首页 > > 网页制作 > css >

练习——设计中文报刊版式

2018-06-24 02:02:18来源：未知阅读 ()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>设计中文版式</title>
 6     <style type="text/css">
 7         body{ /*页面基本属性*/
 8             background:#FFF;
 9             color:#000;
10             font-size:0.875em;
11             font-family:"新宋体", Arial, Helvetica, sans-serif;
12         }
13         h1,h2,h3{ /*标题样式*/
14             text-align:center;
15             margin-bottom:1em;
16         }
17         h2{ /*个性化二级标题样式*/
18             color:#999;
19             text-decoration:underline;
20         }
21         h3{ /*个性化三级标题样式*/
22             letter-spacing:0.4em;
23             font-size:1.4em;
24         }
25         p{ /*统一段落文本样式*/
26             margin:0;
27             line-height:1.8em;
28         }
29         #Summary .p1{ /*第一文本块第一段的样式*/
30             color:#444;
31             margin-left:4em;
32             margin-right:4em;
33             text-indent:2em;
34         }
35         #Summary .p2{
36             text-align:right;
37         }
38         .p2,.p3{
39             text-indent:2em;
40         }
41         .first:first-letter{
42             font-size:50px;
43             float:left;
44             margin-right:6px;
45             padding:2px;
46             font-weight:bold;
47             line-height:1em;
48             background:#000;
49             color:#FFF;
50         }
51     </style>
52 </head>
53 <body>
54 <div id="introduction">
55     <div id="pageHeader">
56         <h1><span>CSS Zen Garden</span></h1>
57         <h2><span><acronym title="cascading style sheets">CSS</acronym>设计之美</span></h2>
58     </div>
59     <div id="Summary">
60         <p class="p1"><span>展示以<acronym title="cascading style sheets">CSS</acronym>技术为基础，并提供超
61             强的视觉冲击力。只要选择列表中任意一个样式表，就可以将它加载到本页面中，并呈现不同的设计效果。</span></p>
62         <p class="p2"><span>下载<a title="这个页面的HTML源代码不能被改动。" href="http://www.csszengarden.com/zengarden-sample.html">
63             HTML文档</a>和<a title="这个页面的CSS样式表文件，你可以更改它。" href="http://www.csszengarden.com/zengarden-sample.css">
64             CSS文件</a>。</span></p>
65     </div>
66     <div id="preamble">
67         <h3><span>启蒙之路</span></h3>
68         <p class="p1 first"><span>不同浏览器随意定义标签，导致无法相互兼容的<acronym title="Document Object Model">DOM</acronym>结构，
69             或者提供缺乏标准支持的CSS等陋习随处可见，如今当使用这些不兼容的标签和样式时，设计之路会很艰难。</span></p>
70         <p class="p2"><span>现在，我们必须清除以前为了兼容不同浏览器而是用的一些过时的小技巧。感谢<acronym title="world wide web consortium">
71             W3C</acronym>、<acronym title="web standards project">WASP</acronym>等标准组织，以及浏览器厂家和开发师们的不解努力，我们终于能够进
72             入Web设计的标准时代。</span></p>
73         <p class="p3"><span>CSS Zen Garden（样式禅意花园）邀请你发挥自己的想象力，构思一个专业级的网页。让我们用慧眼来审视，充满理想和激情去学习CSS
74         这个不朽的技术，最终使自己能够达到技术与艺术合而为一的最高境界。</span></p>
75     </div>
76 </div>
77 </body>
78 </html>