1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>零基础HTML编码</title>
6 <link rel="stylesheet" href="css/style.css" type="text/css">
7 </head>
8
9 <body>
10 <div id="body">
11
12
13 <div class="header">
14 <img src="images/logo.png" alt="logo" class="logo" />
15 <ul class="nav1">
16 <li><a href="#">导航链接四</a></li>
17 <li><a href="#">导航链接三</a></li>
18 <li><a href="#">导航链接二</a></li>
19 <li><a href="#">导航链接一</a></li>
20 </ul>
21 </div><!--header结束-->
22 <div class="bg">
23 <div class="main">
24 <div id="page1">
25 <h2>文章一级标题</h2>
26 <h3>文章二级标题</h3>
27 <h5>文章作者 文章发表时间</h5>
28 <div>
29 <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，该换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有一个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，</p>
30 </div>
31 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
32 <div>
33 <p>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有一个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com" target="_blank">这里有一个链接链，点击后打开新窗口接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有一个粗体字</b>这是一个很长很长的段落</p>
34 </div>
35 </div><!--第一篇结束-->
36
37 <div id="page2">
38 <h2>另一篇文章一级标题</h2>
39 <h3>文章二级标题</h3>
40 <h5>文章作者 文章发表时间</h5>
41 <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，该换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有一个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,</p>
42 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
43 <ul class="nav2">
44 <li>列表项目一</li>
45 <li>列表项目二</li>
46 <li>列表项目三</li>
47 </ul>
48 </div><!--第二篇结束-->
49
50 <div id="page3">
51 <h2>图片</h2>
52 <div class="pic">
53 <p>好看的图片</p>
54 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
55 </div>
56 <div class="pic">
57 <p>好看的图片</p>
58 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
59 </div>
60 <div class="pic">
61 <p>好看的图片</p>
62 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
63 </div>
64 <div class="pic">
65 <p>好看的图片</p>
66 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
67 </div>
68 <div class="pic">
69 <p>好看的图片</p>
70 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
71 </div>
72 <div class="pic">
73 <p>好看的图片</p>
74 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
75 </div>
76 <div class="pic">
77 <p>好看的图片</p>
78 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
79 </div>
80 <div class="pic">
81 <p>好看的图片</p>
82 <img src="../../响应式模板/2014052701/images/det_pic.jpg" />
83 </div>
84 <br class="aa" />
85 </div><!--第三篇结束-->
86
87 <div id="page4">
88 <h2>最后一篇文章一级标题</h2>
89 <h3>文章二级标题</h3>
90 <h5>文章作者 文章发表时间</h5>
91 <ol class="nav3">
92 <li>排名1</li>
93 <li>排名2</li>
94 <li>排名3</li>
95 </ol>
96 <p>下面是一个表格，已经没有给表格加了一个border="1"</p>
97 <table class="table">
98 <tr>
99 <td>表头</td>
100 <td>表头</td>
101 <td>表头</td>
102 </tr>
103 <tr>
104 <td>表格单元</td>
105 <td>表格单元</td>
106 <td>操作</td>
107 </tr>
108 <tr>
109 <td>表格单元</td>
110 <td>表格单元</td>
111 <td>操作</td>
112 </tr>
113 <tr>
114 <td>表格单元</td>
115 <td>表格单元</td>
116 <td>操作</td>
117 </tr>
118 <tr>
119 <td>表格单元</td>
120 <td>表格单元</td>
121 <td>操作</td>
122 </tr>
123 <tr>
124 <td>总计</td>
125 <td colspan="2">1000</td>
126 </tr>
127 </table>
128 </div><!--第四篇结束-->
129 </div><!--main结束-->
130 <div id="page5">
131 <h4>这里以后是个侧栏，这是侧栏的标题</h4>
132 <div class="form_top">
133 <form class="form_in">请输入邮箱地址：<input type="email" name="user_email" /><p>邮箱地址请按照要求格式输入</p></form>
134
135 <form class="form_in">请输入密码：<input type="password" name="password" /></form>
136 <form class="form_in">请重复输入密码：<input type="password" name="password" /><p>密码请为6-16位英文数字</p></form>
137 <form class="form_in city">
138 城市：<select name="city">
139 <option value="北京">北京</option>
140 <option value="上海">上海</option>
141 <option value="广州">广州</option>
142 <option value="深圳">深圳</option>
143 </select>
144 </form>
145 <form class="form_in sex">性别：<input type="radio" checked="checked" name="Sex" value="male" />男<input type="radio" name="Sex" value="female" />女</form>
146 <form class="form_in love">爱好：<input type="checkbox" name="sports">运动 <input type="checkbox" name="art">艺术 <input type="checkbox" name="sencise">科学</form>
147 <form class="form_in personal">
148 个人描述：
149 <textarea row="5" cols="18"></textarea>
150 </form>
151 </div>
152
153 <form class="form_in button">
154 <input type="button" style="width:316px;height:40px;background-color:blue;border-radius:10px;color:#fff;font-size:16px;font-weight:bold;margin-top:20px;" value="确认提交" />
155 </form>
156 </div><!--第五篇结束-->
157
158 </div>
159 <br class="aa" />
160 </div>
161 </body>
162 </html>
1 @charset "utf-8";
2 /* CSS Document */
3 *{margin:0px;padding:0px;}
4 body{font-size:16px;background-color:black;font-family:"黑体";padding:0px 40px 60px;}
5 #body{margin:0 auto;background-color:#CCC;}
6 .header{height:60px;background-color:#333;}
7 .logo{position:relative;top:10px;left:40px;}
8 .nav1{float:right;}
9 .nav1 li{float:right;line-height:60px;margin:0 12px;}
10 .nav1 li a{color:#fff;text-decoration:none;}
11 h2{padding-bottom:20px;}
12 h3{padding-bottom:10px;color:#666;}
13 h5{padding-bottom:10px;color:#999;}
14 p{text-indent:2em;line-height:28px;}
15 .nav2{list-style:none;margin-left:20px;}
16 .nav2 li{margin-top:10px;}
17 .bg{padding-right:416px;}
18 .main{float:left;width:100%;margin:0px 20px 20px;}
19 #page1,#page2,#page3,#page4{background-color:#fff;margin-top:20px;padding:40px 20px;border:1px solid #999;box-shadow:2px 2px 2px #666;text-align:justify;clear:both;}
20 .pic{width:220px;height:170px;border:1px solid #ccc;margin-left:40px;margin-bottom:20px;float:left;}
21 .pic p{text-align:center;padding:10px 0px;}
22 .pic img{display:inline-block;padding-left:10px;}
23 .nav3{margin:10px 0 20px 40px;}
24 #page4 p{text-indent:0;}
25 .table{border-collapse:collapse;}
26 tr{line-height:28px;font-size:12px;}
27 td{width:450px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;padding-left:5px;}
28 td:last-child{width:256px;border-left:1px solid #ccc;border-right:1px solid #ccc;}
29 tr:first-child{background-color:#333;color:#fff;border:1px solid #333;font-size:14px;}
30 tr:last-child{background-color:#CCC;border:1px solid #333;font-weight:bold;}
31 #page5{width:316px;background-color:#fff;margin:20px 0px;padding:40px 20px;border:1px solid #999;box-shadow:2px 2px 2px #666;text-align:justify;float:left;margin-left:-416px;position:relative;left:416px;}
32 #page5 h4{border-left:3px solid #999;line-height:28px;padding-left:10px;padding-top:5px;}
33 .form_top{margin:10px 0px 30px;padding-right:50px;font-size:14px;}
34 .form_in{margin-bottom:10px;float:right;display:inline-block;clear:both;position:relative;}
35 .form_in p{position:relative;left:90px;font-size:12px;color:#666;}
36 .clearfloat{clear:both}
37 .city{position:relative;right:95px;}
38 .sex{position:relative;right:88px;}
39 .love{position:relative;right:5px;}
40 .personal{left:40px;}
41 .aa{clear:both;}
