HTML5几个设计和修改的页面范例分享

在不增加任何 CSS 样式表之前，效果如下：

上面通过三个 <div> 将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。

这个例子中的样式表很简单，整个页面最大宽度设置为 800 像素，避免文本在宽屏显示器上显示过长。页眉位于一个带有蓝色边框的盒子中，内容区的两侧都增加了内边距，而页脚在整个页面的底部居中。

ApocalypsePage_Original.css样式文件内容如下：

XML/HTML Code复制内容到剪贴板

@charset "utf-8"; /* CSS Document */
body{ /*font-family 要使用安全字体，按照先特殊后一般的原则，
先给出你想要的字体，然后是保险一些的字体，最后以 sans-serif 字体结尾*/
font-family: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif; max-width: 800px; /*最大宽度不超过 800 像素*/
} /*页面顶部的标题区样式*/
.Header { background-color: #7695FE; /*可接受任何颜色值*/
border: thin #336699 solid; /*多合一的 border 属性*/ padding: 10px; /* 10像素的内边距，边框与内容之间的距离*/
margin: 10px; /* 10像素的外边距，边框与周围元素之间的距离*/ text-align: center; /*头部文本居中*/
} /*页眉中标题<h1>样式*/
.Header h1{ margin: 0px;
color: white; font-size: xx-large; /*精确控制可以用像素或者em单位*/
} /*页眉中子标题样式*/
.Header .Teaser{ margin: 0px;
font-weight: bold; }
/*页眉中署名行样式*/ .Header .Byline{
font-style: italic; font-size: small;
margin: 0px; }
2/7 首页上一页 1 2 3 4 5 6 下一页尾页