1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="citizens.css"> 7 </head> 8 <body> 9 10 <!--line1--> 11 <div class="line1"> 12 <div> 13 <img src="line1_logo.png"> 14 </div> 15 <div class="topsearch"> 16 <input type="text" name="search"><br/> 17 <ul> 18 <li><a href="#">辽宁朝阳 </a></li> 19 <li><a href="#">辽宁朝阳 </a></li> 20 <li><a href="#">辽宁朝阳 </a></li> 21 <li><a href="#">辽宁朝阳 </a></li> 22 <li><a href="#">辽宁朝阳 </a></li> 23 </ul> 24 </div> 25 <div class="topbutton"> 26 <ul > 27 <li><button class="button" datasrc="#">免费发布信息</button></li><!--应该怎么做？？？--> 28 <li><a href="#">修改/删除信息</a></li> 29 </ul> 30 </div> 31 </div> 32 33 34 <!--line2、3、4--> 35 <div class="line234"> 36 <!--特色类目--> 37 <div class="special"> 38 <!--标题图--> 39 <span><img src="line2_title1.png"/></span> 40 <!--6张图--> 41 <ul class="sixul"> 42 <li> 43 <img src="icon1.png"/><br/> 44 <a href="#">闲置真心送</a> 45 </li> 46 <li> 47 <img src="icon2.png"/><br/> 48 <a href="#">拼车顺风车</a> 49 </li> 50 <li> 51 <img src="icon3.png"/><br/> 52 <a href="#">宠物赠送</a> 53 </li> 54 <li> 55 <img src="icon4.png"/><br/> 56 <a href="#">找人寻物</a> 57 </li> 58 <li> 59 <img src="icon5.png"/><br/> 60 <a href="#">技能交换</a> 61 </li> 62 <li> 63 <img src="icon6.png"/><br/> 64 <a href="#">找室友合租</a> 65 </li> 66 </ul> 67 <!--三张图--> 68 <ul class="threepictures"> 69 <a href="#"><img src="pic_big_1.png"/></a> 70 <a href="#" id="righttop"><img src="pic_small_1.png"/></a> 71 <a href="#"><img src="pic_small_11.png"/></a> 72 </ul> 73 </div> 74 <!--二手市集--> 75 <div class="special"> 76 <!--标题图--> 77 <span><img src="line2_title2.png"/></span> 78 </div> 79 <!--二手车--> 80 <div class="special"> 81 <!--标题图--> 82 <span><img src="line2_title3.png"/></span> 83 </div> 84 <!--人才招聘--> 85 <div class="person"> 86 <!--标题图--> 87 <span><img src="line2_title4.png"/></span> 88 <table> 89 <!--一行--> 90 <tr> 91 <td><a href="#">一表人才</a></td> 92 <td><a href="#">一表人才</a></td> 93 <td><a href="#">一表人才</a></td> 94 <td><a href="#">一表人才</a></td> 95 </tr> 96 <!--一行--> 97 <tr> 98 <td><a href="#">一表人才</a></td> 99 <td><a href="#">一表人才</a></td> 100 <td><a href="#">一表人才</a></td> 101 <td><a href="#">一表人才</a></td> 102 </tr> 103 <!--一行--> 104 <tr> 105 <td><a href="#">一表人才</a></td> 106 <td><a href="#">一表人才</a></td> 107 <td><a href="#">一表人才</a></td> 108 <td><a href="#">一表人才</a></td> 109 </tr> 110 <!--一行--> 111 <tr> 112 <td><a href="#">一表人才</a></td> 113 <td><a href="#">一表人才</a></td> 114 <td><a href="#">一表人才</a></td> 115 <td><a href="#">一表人才</a></td> 116 </tr> 117 <!--一行--> 118 <tr> 119 <td><a href="#">一表人才</a></td> 120 <td><a href="#">一表人才</a></td> 121 <td><a href="#">一表人才</a></td> 122 <td><a href="#">一表人才</a></td> 123 </tr> 124 <!--一行--> 125 <tr> 126 <td><a href="#">一表人才</a></td> 127 <td><a href="#">一表人才</a></td> 128 <td><a href="#">一表人才</a></td> 129 <td><a href="#">一表人才</a></td> 130 </tr> 131 <!--一行--> 132 <tr> 133 <td><a href="#">一表人才</a></td> 134 <td><a href="#">一表人才</a></td> 135 <td><a href="#">一表人才</a></td> 136 <td><a href="#">一表人才</a></td> 137 </tr> 138 <!--一行--> 139 <tr> 140 <td><a href="#">一表人才</a></td> 141 <td><a href="#">一表人才</a></td> 142 <td><a href="#">一表人才</a></td> 143 <td><a href="#">一表人才</a></td> 144 </tr> 145 <!--一行--> 146 <tr> 147 <td><a href="#">一表人才</a></td> 148 <td><a href="#">一表人才</a></td> 149 <td><a href="#">一表人才</a></td> 150 <td><a href="#">一表人才</a></td> 151 </tr> 152 <!--一行--> 153 <tr> 154 <td><a href="#">一表人才</a></td> 155 <td><a href="#">一表人才</a></td> 156 <td><a href="#">一表人才</a></td> 157 <td><a href="#">一表人才</a></td> 158 </tr> 159 <!--一行--> 160 <tr> 161 <td><a href="#">一表人才</a></td> 162 <td><a href="#">一表人才</a></td> 163 <td><a href="#">一表人才</a></td> 164 <td><a href="#">一表人才</a></td> 165 </tr> 166 </table> 167 </div> 168 <!--便民服务--> 169 <div class="convenient"></div> 170 <!--工具--> 171 <div class="tool"></div> 172 <!--百姓故事--> 173 <div class="convenient"><a href="#"><img src="line4_1.png"/></a></div> 174 <!--百姓网卧槽--> 175 <div class="convenient"><a href="#"><img src="line4_2.png"/></a></div> 176 <!--快速入职--> 177 <div class="convenient"><a href="#"><img src="lin4_3.png"/></a></div> 178 <!--微信--> 179 <div class="wechat"><img src="lin4_wechat.png"></div> 180 </div> 181 182 183 <!--line5--> 184 <div class="line5"> 185 <!--bottom--> 186 <div class="botoom"> 187 <img src="line5_bottom.png"/> 188 </div> 189 </div> 190 191 </body> 192 </html>
1 body{ 2 margin: 0 auto; 3 border:1px solid gainsboro; 4 width: auto; 5 } 6 7 a:link{ 8 text-decoration: none; 9 color: black; 10 font-size: 14px;/*为什么都是14px 表格里的比其他地方的字体小？？？*/ 11 }/*未放鼠标*//*要设置字体颜色去相应的地方设定 （在全局设为什么不管用？？？）*/ 12 13 a:hover{ 14 text-decoration: underline; 15 color: black; 16 }/*鼠标放在上面*/ 17 /* a:link { text-decoration: none;color: blue} 18 a:active { text-decoration:blink} 19 a:hover { text-decoration:underline;color: red} 20 a:visited { text-decoration: none;color: green} 21 其中： 22 a:link 指正常的未被访问过的链接； 23 a:active 指正在点的链接； 24 a:hover 指鼠标在链接上； 25 a:visited 指已经访问过的链接； 26 text-decoration是文字修饰效果的意思； 27 none参数表示超链接文字不显示下划线； 28 underline参数表示超链接的文字有下划线*/ 29 30 ul{ 31 list-style-type: none; 32 } 33 34 .line1{ 35 height: 115px; 36 background-color:#EEEFF1; 37 border: solid 2px #DEDEDE; 38 } 39 40 .line1 div{ 41 float: left; 42 height: 115px; 43 } 44 45 .topsearch{ 46 width: 553px; 47 } 48 49 .topsearch input{ 50 margin: 30px 50px 0px 150px; 51 } 52 53 .topsearch ul li{ 54 float: left; 55 border-right: solid 2px #999999; 56 } 57 58 .topbutton ul{ 59 margin: 30px; 60 } 61 62 .topbutton a{ 63 color: #999999; 64 text-align: center; 65 } 66 67 .button{ 68 height: 45px; 69 width: 180px; 70 background-color: #FF4466; 71 border: none; 72 color: white; 73 } 74 75 .line234{ 76 background-color: #EEEFF1; 77 height: 1090px; 78 padding: 26px 67px 55px 77px; 79 } 80 81 .special{ 82 background-color: white; 83 width: 223px; 84 height: 500px; 85 float: left; 86 margin: 0 21px 0 0; 87 /*border: solid 1px #DEDEDE;*//*为什么加border格子就乱了？？？？？*/ 88 } 89 90 .special span img{ 91 width: 223px; 92 } 93 94 .sixul{ 95 padding: 0 15px; 96 } 97 98 .sixul li{ 99 margin: 10px 0 0 0; 100 float: left; 101 }/*ul内边距为零 li外边距为0 可有效去除ul自带的左边距*/ 102 103 .sixul li img { 104 width: 96px; 105 height: 44px; 106 margin-bottom:5px; 107 } 108 109 .sixul li a{ 110 text-align: end;/*???为什么不居中*/ 111 color: black; 112 } 113 114 115 .threepictures{ 116 padding: 0 15px 0 15px; 117 position: relative; 118 float: left; 119 } 120 121 .threepictures li{ 122 float: left; 123 } 124 125 #righttop{ 126 position: absolute; 127 left: 146px; 128 top: 0; 129 } 130 131 .person{ 132 background-color: white; 133 width: 465px; 134 height: 500px; 135 float: left; 136 } 137 138 .person span img{ 139 width: 465px; 140 } 141 142 .person table{ 143 margin-left: 30px; 144 align-items: center;/*为什么不管用????*/ 145 border: 1px red;/*为什么不管用？？？？*/ 146 width:436px; 147 height:396px; 148 } 149 150 .person table a{ 151 color: black; 152 } 153 154 .convenient{ 155 background-color: chartreuse; 156 width: 223px; 157 height: 260px; 158 float: left; 159 margin: 24px 21px 0 0; 160 } 161 162 .convenient img{ 163 width: 223px; 164 height: 260px; 165 } 166 167 .tool{ 168 background-color: black; 169 width: 954px; 170 height: 260px; 171 float: left; 172 margin: 24px 0 0 0; 173 } 174 175 .wechat{ 176 background-color: green; 177 width: 470px; 178 height: 260px; 179 float: left; 180 margin: 24px 0 0 0; 181 } 182 183 .wechat img{ 184 width: 470px; 185 height: 260px; 186 } 187 188 .line5{ 189 background-color:#EEEFF1; 190 height: 235px; 191 border: solid 2px #DEDEDE; 192 /*padding:85px 0 0 0;*/ 193 } 194 195 .botoom{ 196 height: 150px; 197 width: 1350px; 198 float: left; 199 margin-top: 86px; 200 } 201 /*??????? 202 给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，遇到此问题 203 1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用） 204 2、为父元素添加overflow：hidden；样式即可（完美） 205 3、为父元素或者子元素声明浮动（float：left；可用） 206 4、为父元素添加border（border:1px solid transparent可用） 207 5、为父元素或者子元素声明绝对定位 208 */ 209 210 .botoom img{ 211 height: 150px; 212 width: 1350px; 213 }
这是我第一次使用div+css编程模式写html静态网页。由于时间原因没有做完整，但收获很大，包括掌握的技术和发现的疑问。
掌握的技术总结为两点：1.初步掌握用浮动技术、盒子模型进行网页布局。2.初步掌握父子选择器等选择器的使用。
发现了许多疑问，还未被解答：大多数都标注在备注中，下周有机会尽快解决。
欢迎大家帮助解决疑问、提建议、交流。
原文：http://www.cnblogs.com/coding-gaga/p/4959862.html
