分类导航

HTML HTML5 JavaScript CSS jQuery Bootstrap Angularjs Vue Dojo Json Electron Node.js Express XML Ajax Unity React Flex Web前端微信小程序支付小程序百度小程序

设计盒布局

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了设计盒布局，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

多列布局

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<Metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<styletype="text/css">

#left-sidebar {

float: left;

width: 160px;

padding: 20px;

background-color:orange;

}

#contents {

float: left;

width: 500px;

padding: 20px;

background-color:yellow;

}

#right-sidebar {

float: left; 浮动显示

width: 160px;

padding: 20px;

background-color:limegreen;

}

#left-sidebar,#contents,#right-sidebar {

-moz-Box-sizing:border-Box;

-webkit-Box-sizing:border-Box;

}

</style>

</head>

<body>

<divid="container">

<divid="left-sidebar">

<ul>

</ul>

</div>

<divid="contents">

<h2>标题：Javascript是实现HTML5强大功能的重要语言</h2>

<p>JavaScript时代的大幕才刚刚拉开。在今年的JSConf上，一个核心主题就是“JavaScript到JavaScript的编译器”，也被人们看成是未来的一个主要趋势。Google在“编译生成JavaScript代码”方面是首开先河者。据我所知，GWT（Google Web Toolkit）应该是通过编译（从Java代码）生成JavaScript代码的第一个框架。以前我对GWT并没有太重视，只是觉得它是一个致力于拯救那些Java程序员的框架，好让他们不必因为（学习）编写JavaScript而浪费时间。可是，GWT在编译过程中对JavaScript做了那么多的优化，简直是太神了。Closure就是一个“JavaScript到JavaScript的编译器”，能够实现同样级别的优化。Traceur，这是几个星期前才冒出来的一个框架，通过它能够试验JavaScript的新特性，换句话说，它可以把带有实验性语言特性的JavaScript代码编译成可以在所有现代平台中运行的JavaScript代码。

</p>

</div>

<divid="right-sidebar">

<ul>

</ul>

</div>

</body>

</html>

盒子布局

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<Metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<styletype="text/css">

#container {

display: Box;

display: -moz-Box;

display: -webkit-Box;

}

#left-sidebar {

width: 160px;

padding: 20px;

background-color:orange;

}

#contents {

width: 500px;

padding: 20px;

background-color:yellow;

}

#right-sidebar {

width: 160px;

padding: 20px;

background-color:limegreen;

}

#left-sidebar,#right-sidebar {

-moz-Box-sizing:border-Box;

-webkit-Box-sizing:border-Box; 自动适应宽度

}

</style>

</head>

<body>

<divid="container">

<divid="left-sidebar">

<ul>

</ul>

</div>

<divid="contents">

<h2>标题：Javascript是实现HTML5强大功能的重要语言</h2>

</div>

<divid="right-sidebar">

<ul>

</ul>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#container{

display: -moz-Box;

display: -webkit-Box;

}

#left-sidebar{

-moz-Box-ordinal-group: 3;

-webkit-Box-ordinal-group: 3;

width: 200px;

padding: 20px;

background-color: orange;

}

#contents{

-moz-Box-ordinal-group: 1; 设定盒子的排列循序

-webkit-Box-ordinal-group: 1;

-moz-Box-flex:1;

-webkit-Box-flex:1; 自动适应

padding: 20px;

background-color: yellow;

}

#right-sidebar{

-moz-Box-ordinal-group: 2;

-webkit-Box-ordinal-group: 2;

width: 200px;

padding: 20px;

background-color: limegreen;

}

#left-sidebar,#right-sidebar{

-moz-Box-sizing: border-Box;

-webkit-Box-sizing: border-Box;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<h2>标题：Javascript是实现HTML5强大功能的重要语言</h2>

</div>

<ul>

</ul>

</div>

</body>

</html>

定义模块大小自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#container {

display: -moz-Box;

display: -webkit-Box;

border: solid1px red;

-moz-Box-orient: horizontal;

-webkit-Box-orient: horizontal;

width: 800px;

height: 200px;

}

#text-a { background-color: orange; }

#text-b { background-color: yellow; }

#text-c { background-color: limegreen; }

#text-a, #text-b, #text-c {

-moz-Box-sizing: border-Box;

-webkit-Box-sizing: border-Box;

font-size: 1.5em;

font-weight: bold;

width:200px;

}

</style>

</head>

<body>

</div>

</body>

</html>

消除空白

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#container {

display: -moz-Box;

display: -webkit-Box;

border: solid1px red;

-moz-Box-orient: vertical;

-webkit-Box-orient: vertical;

width: 800px;

height: 400px;

}

#text-a { background-color: orange; height:100px; }

#text-b {

background-color: yellow;

-moz-Box-flex: 1;

-webkit-Box-flex: 1;

}

#text-c { background-color: limegreen; height:60px; }

#text-a, #text-c {

-moz-Box-sizing: border-Box;

-webkit-Box-sizing: border-Box;

font-size: 1.5em;

font-weight: bold;

}

</style>

</head>

<body>

</div>

</body>

</html>

字体居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

div#container {

display: -moz-Box;

display: -webkit-Box;

-moz-Box-align: center; 字体据中

-webkit-Box-align: center; 字体据中

-moz-Box-pack: center;

-webkit-Box-pack: center;

width: 300px;

height: 200px;

background-color: pink;

}

#text-a { background-color: orange; }

#text-b { background-color: yellow; }

#text-c { background-color: limegreen; }

</style>

</head>

<body>

</div>

</body>

</html>

大佬总结

以上是大佬教程为你收集整理的设计盒布局全部内容，希望文章能够帮你解决设计盒布局所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

猜你在找的HTML5相关文章

详解HTML5表单新增属性 2019-10-08
详解HTML5通讯录获取指定多个人的信息 2019-10-08
html5+css如何实现中间大两头小的轮播效果 2019-10-08
Html5 Canvas动画基础碰撞检测的实现 2019-10-08
使用HTML5捕捉音频与视频信息概述及实例 2019-10-08
详解HTML5中的<template>标签 2019-10-08
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例 2019-10-08
HTML5应用之文件上传 2019-10-08
详解HTML5 LocalStorage 本地存储 2019-10-08
MPMoviePlayerController错误_itemFailedToPlayToEnd同时播放YouTube视频iOS 7 2022-04-27