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>
BeijingCitizens.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 }
citizens.css
这是我第一次使用div+css编程模式写html静态网页。由于时间原因没有做完整，但收获很大，包括掌握的技术和发现的疑问。
掌握的技术总结为两点：1.初步掌握用浮动技术、盒子模型进行网页布局。2.初步掌握父子选择器等选择器的使用。
发现了许多疑问，还未被解答：大多数都标注在备注中，下周有机会尽快解决。
欢迎大家帮助解决疑问、提建议、交流。
时间： 2024-08-08 17:45:01