多列布局
<!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"/>
<title></title>
<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 {
-webkit-Box-sizing:border-Box;
}
</style>
</head>
<body>
<divid="container">
<divid="left-sidebar">
<h2>站内导航</h2>
<ul>
<li><ahref="">新闻</a></li>
<li><ahref="">博客</a></li>
<li><ahref="">微博</a></li>
<li><ahref="">社区</a></li>
<li><ahref="">关于</a></li>
</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">
<h2>友情链接</h2>
<ul>
<li><ahref="">百度</a></li>
<li><ahref="">谷歌</a></li>
<li><ahref="">360</a></li>
</ul>
</div>
</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"/>
<title></title>
<styletype="text/css">
#container {
}
#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 {
-webkit-Box-sizing:border-Box; 自动适应宽度
}
</style>
</head>
<body>
<divid="container">
<divid="left-sidebar">
<h2>站内导航</h2>
<ul>
<li><ahref="">新闻</a></li>
<li><ahref="">博客</a></li>
<li><ahref="">微博</a></li>
<li><ahref="">社区</a></li>
<li><ahref="">关于</a></li>
</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">
<h2>友情链接</h2>
<ul>
<li><ahref="">百度</a></li>
<li><ahref="">谷歌</a></li>
<li><ahref="">360</a></li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title></title>
<style type="text/css">
#container{
}
#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;
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{
-webkit-Box-sizing: border-Box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>站内导航</h2>
<ul>
<li><ahref="">新闻</a></li>
<li><ahref="">博客</a></li>
<li><ahref="">微博</a></li>
<li><ahref="">社区</a></li>
<li><ahref="">关于</a></li>
</ul>
</div>
<div id="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>
<div id="right-sidebar">
<h2>友情链接</h2>
<ul>
<li><ahref="">百度</a></li>
<li><ahref="">谷歌</a></li>
<li><ahref="">360</a></li>
</ul>
</div>
</div>
</body>
</html>
定义模块大小自适应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title></title>
<style type="text/css">
#container {
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 {
-webkit-Box-sizing: border-Box;
font-size: 1.5em;
font-weight: bold;
width:200px;
}
</style>
</head>
<body>
<div id="container">
<div id="text-a">列1</div>
<div id="text-b">列2</div>
<div id="text-c">列3</div>
</div>
</body>
</html>
消除空白
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title></title>
<style type="text/css">
#container {
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 {
-webkit-Box-sizing: border-Box;
font-size: 1.5em;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="text-a">列1</div>
<div id="text-b">列2</div>
<div id="text-c">列3</div>
</div>
</body>
</html>
字体居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title></title>
<style type="text/css">
div#container {
-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 id="container">
<div id="text-a">列1</div>
<div id="text-b">列2</div>
<div id="text-c">列3</div>
</div>
</body>
</html>