知识回顾： 常用的：
块级标签： <div> <p> <h1-6> <ul> <ol> <dl>
内联标签 <a> <img> <p> <input> <span> <select> <textarea>
正常文档流：按照从上到下，从左到右的
脱离文档流：在正常文档流的基础上，将元素从文档流中取出，进行一个覆盖。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/index_css.css" type="text/css" rel="stylesheet" /> </head> <body> <!--头部信息 --> <div class="top"> <div class="inner"> <div class="dht"> <!-- 内联标签 --> <a href="#" class="logo"></a> <div class="menu"> <a href="#" class="tb active">全部</a> <a href="#" class="tb">42区</a> <a href="#" class="tb">段子</a> <a href="#" class="tb">图片</a> <a href="#" class="tb">挨踢1024</a> <a href="#" class="tb">你问我答</a> </div> <div class="key_search"> <form action="#" method="post" name="search_info" id="search_info1"> <input type="text" class="search_txt" name="words" /> <a href="#" class="i"> <span class="ico"></span> </a> </form> </div> <div class="action_zc"> <a href="#" class="login_btn_a">注册</a> <a href="#" class='login_btn_a'>登陆</a> </div> </div> </div> </div> <!-- 主体信息 --> <div class="main"> <div class="inner_main"> <div class="main_l">左边</div> <div class="main_r">右边</div> </div> </div> <!-- 底部信息 --> <div class="bottom"> <div class="inner"> 该吃中饭了。 </div> </div> </body> </html>
*{
font-family: "微软雅黑";
margin: 0px;
padding: 0px;
}
.inner{
1016px;
margin: 0px auto;
/* position: relative; */
}
/* 头部背景色 设置fixed 脱离文档流 */
.top{
height: 44px;
100%;
position: fixed;
top: 0;
left: 0;
background-color:#2459a2;
}
/* 主体内容的背景色 */
.main{
clear: both;
background-color: #ededed;
margin-top: 44px;
}
.logo{
121px;
height: 23px;
background:url(../img/logo.png) no-repeat 0px 0px;
margin-top: 11px;
float: left;
}
.menu{
float:left;
margin-left: 20px;
font-size: 12px;
line-height: 44px;
}
.key_search{
float: right;
margin-top: 6px;
}
.tb{
color:#c0cddf;
display: inline-block;
margin-left: -3px;
padding: 0 13px 0 16px;
}
.tb:active{
color:white;
background-color: #204982;
}
.tb:hover{
/* background-color: #3174cb; */
color: #FFFFFF;
}
a{
text-decoration: none;
}
.action_zc{
float:right;
margin-left: 20px;
font-size: 12px;
line-height: 44px;
}
.action_zc a{
color: #FFFFFF;
display: inline-block;
height: 44px;
margin:0 5px;
padding: 0 20px;
}
.login_btn_a:hover{
background-color: #3174cb;
}
.search_txt{
background-color: #f4f4f4;
border: 1px solid #e0e0e0;
color:#333;
height: 25px;
padding: 2px 2px 2px 5px;
91px;
float: left;
}
.i{
30px;
height: 29px;
display: inline-block;
border: 1px solid #e0e0e0;
border-left:0;
background-color: #f4f4f4;
float: left;
}
.ico{
background-image: url(../img/icon_1.png);
background-repeat: no-repeat;
display: block;
height: 12px;
11px;
margin-top: 9px;
margin-left: 11px;
overflow: hidden;
}
.inner_main{
960px;
margin: 0 auto;
/* overflow: hidden; */
height: auto;
min-height: 713px;
padding: 6px 28px 60px;
background-color: #FFFFFF;
}
.main_l{
630px;
background-color: chocolate;
float: left;
margin-top: 3px;
overflow: hidden;
}
.main_r{
300px;
float: right;
padding-top: 4px;
background-color: brown;
min-height: 713px;
height: auto;
}
1 *{ 2 margin: 0px; 3 padding: 0px; 4 font-family: "microsoft yahei"; 5 font-size: 12px; 6 7 } 8 9 a{ 10 text-decoration: none; 11 } 12 .daoh{ 13 background-color: #2459a2; 14 height: 44px; 15 width: 100%; 16 position: fixed; 17 top: 0px; 18 left: 0px; 19 z-index: 999; 20 } 21 .buju{ 22 width: 1020px; 23 margin: 0px auto; 24 } 25 .logo{ 26 background-image: url(../img/logo.png); 27 /* 如果想要给内联标签设置宽度,必须转化为块标签 */ 28 float: left; 29 width: 121px; 30 height: 23px; 31 margin-top: 11px; 32 } 33 .menu{ 34 font-size: 12px; 35 float: left; 36 margin-left: 20px; 37 line-height: 44px; 38 /* 因为需要把子标签中的a 变为块级元素. 39 inline-block默认的空格符就是标签与标签之间的空隙造成的。 40 我们可以通过在父级标签中做如下设置,可以消除空隙 */ 41 word-spacing: -4px; 42 } 43 .menu a{ 44 display: inline-block; 45 color:#c0cddf; 46 padding: 0 13px 0 16px; 47 } 48 .menu a:hover{ 49 color: #fff; 50 background-color: #376fbd; 51 } 52 .menu a:active{ 53 color: white; 54 background-color: #204982; 55 } 56 .menu .active{ 57 color: white; 58 background-color: #204982; 59 } 60 .key_search{ 61 float: right; 62 line-height: 44px; 63 margin-top: 6px; 64 } 65 .key_search .search_txt{ 66 width: 100px; 67 height: 30px; 68 float: left; 69 70 } 71 .key_search a{ 72 /* display: inline-block; */ 73 width: 30px; 74 height: 32px; 75 background-color: #FFFFFF; 76 border: 1px solid #e0e0e0; 77 border-left: 0px; 78 float: left; 79 } 80 .ico{ 81 display:block; 82 background-image: url(../img/icon.png); 83 background-position: 0px -197px; 84 height: 12px; 85 width: 11px; 86 margin-top: 9px; 87 margin-left: 10px; 88 } 89 .action_zc{ 90 float: right; 91 font-size: 12px; 92 line-height: 44px; 93 } 94 .action_zc a{ 95 display: inline-block; 96 color: #FFFFFF; 97 height: 44px; 98 margin:0 5px; 99 padding: 0 20px; 100 } 101 .action_zc a:hover{ 102 background-color: #376fbd; 103 } 104 105 106 107 .neirong{ 108 /* 不管导航栏的变化如何,我都在下方. */ 109 clear: both; 110 background-color:#ededed ; 111 margin-top: 44px; 112 } 113 114 .buju2{ 115 width: 960px; 116 margin: 0 auto; 117 /*overflow: hidden; */ 118 height: auto; 119 min-height: 713px; 120 padding: 6px 28px 60px; 121 background-color: white; 122 } 123 .neirong-l{ 124 float: left; 125 width: 630px; 126 /* background-color: #2459A2; */ 127 margin-top: 3px; 128 } 129 .neirong-r{ 130 width: 300px; 131 background-color: brown; 132 float: right; 133 margin-top: 4px; 134 } 135 .nei_00{ 136 width: 100%; 137 height: 43px; 138 /* background-color: yellow; */ 139 border-bottom: solid 1px #3174cb; 140 } 141 .nei_00_l a{ 142 display: inline-block; 143 width:60px; 144 height: 26px; 145 font-size: 12px; 146 margin-top: 3px; 147 margin-bottom: 13; 148 text-align: center; 149 line-height: 26px; 150 font-weight: bold; 151 } 152 .nei_00_l{ 153 float: left; 154 } 155 .nei_00_l a:active{ 156 color: black; 157 border: 1px solid #ccc; 158 border-radius: 13px; 159 background-color:#F0F8FF ; 160 } 161 .nei_00_l .active{ 162 color: black; 163 border: 1px solid #ccc; 164 border-radius: 13px; 165 background-color:#F0F8FF ; 166 } 167 .nei_00_m{ 168 float: left; 169 margin-left: 144px; 170 margin-top: 10px; 171 } 172 .nei_00_m a{ 173 color: #84a42b; 174 font-size: 12px; 175 text-align: center; 176 margin-left: 10px; 177 } 178 .nei_00_m .active{ 179 color: #CCCCCC; 180 text-decoration: none; 181 } 182 .nei_00_m a:hover{ 183 text-decoration: underline; 184 } 185 186 .nei_00_r{ 187 float: right; 188 background-color: #84a42b; 189 color:white; 190 width: 134px; 191 height: 30px; 192 font-size: 14px; 193 text-align: center; 194 line-height: 30px; 195 } 196 .nei_00_r .ico_1{ 197 display: inline-block; 198 height: 12px; 199 width: 11px; 200 background-image: url(../img/icon.png); 201 background-position: 0 -184px; 202 } 203 .nei_00_r .ico_2{ 204 margin-left: 8px; 205 font-weight: 400; 206 } 207 .item{ 208 display: inline-block; 209 clear: both; 210 padding: 10px; 211 border-bottom: 1px solid #dce7f4; 212 position: relative; 213 } 214 .item .new-pic{ 215 display: inline; 216 float: right; 217 margin-left: 10px; 218 margin-bottom: 5px; 219 } 220 .item .new-pic img{ 221 width: 60px; 222 height: 60px; 223 background-color: #FFFFFF; 224 border: 1px solid #CCCCCC; 225 padding: 1px; 226 vertical-align: top; 227 /* float: right; */ 228 } 229 .item .new-pic img:hover{ 230 width: 120px; 231 height: 120px; 232 background-color: #FFFFFF; 233 border: 1px solid #CCCCCC; 234 padding: 1px; 235 vertical-align: top; 236 position: absolute; 237 top:0; 238 right:0; 239 /* float: right; */ 240 } 241 .item .new-content{ 242 line-height: 20px; 243 244 } 245 .item .new-content .show-content{ 246 font-size: 14px; 247 color: #369; 248 font-weight: 700; 249 } 250 .item .new-content .content-soure{ 251 color: #b4b4b4; 252 margin-left: 7px; 253 } 254 .item .new-content .n2{ 255 color: #b4b4b4; 256 } 257 .item .new-content .n2 .content-kind{ 258 white-space: nowrap; 259 } 260 .part2{ 261 line-height: 20px; 262 color: #787878; 263 margin-top: 5px; 264 } 265 .part3{ 266 padding-top:6px; 267 color: #ccc; 268 margin-bottom: 6px; 269 } 270 .part3 span{ 271 display: inline-block; 272 width: 18px; 273 height: 18px; 274 275 } 276 .part3 a{ 277 color: #99aecb; 278 font-size: 14px; 279 font-weight: 700; 280 margin-left: 7px; 281 vertical-align: 4px; 282 } 283 284 .part3 .tj span{ 285 background-image: url(../img/icon_18_118.png); 286 background-position: 0 -40px; 287 } 288 .part3 .pl span{ 289 background-image: url(../img/icon_18_118.png); 290 background-position: 0 -100px; 291 } 292 .part3 .sc span{ 293 background-image: url(../img/icon_18_118.png); 294 background-position: 0 -160px; 295 } 296 297 .jiewei{ 298 /* 不管导航栏的变化如何,我都在下方. */ 299 clear: both; 300 background-color:#ededed ; 301 302 } 303 304 .buju3{ 305 width: 960px; 306 background-color: white; 307 margin: 0 auto; 308 padding: 20px 28px; 309 310 } 311 .footer{ 312 border-top: solid 1px #3174cb; 313 padding-top: 20px; 314 315 } 316 .footer p{ 317 text-align: center; 318 line-height: 40px; 319 }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/css.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="wrapper"> <div class="daoh"> <div class="buju"> <div class="daoh_inner"> <!-- 内联标签 --> <a href="#" class="logo"></a> <div class="menu"> <a href="#" class="tb active">全部</a> <a href="#" class="tb">42区</a> <a href="#" class="tb">段子</a> <a href="#" class="tb">图片</a> <a href="#" class="tb">挨踢1024</a> <a href="#" class="tb">你问我答</a> </div> <div class="key_search"> <form action="#" method="post" name="search_info" id="search_info1"> <input type="text" class="search_txt" name="words" /> <a href="#" class="i"> <span class="ico"></span> </a> </form> </div> <div class="action_zc"> <a href="#" class="login_btn_a">注册</a> <a href="#" class='login_btn_a'>登陆</a> </div> </div> </div> </div> <div class="neirong"> <div class="buju2"> <div class="neirong-l"> <div class="nei_00"> <div class="nei_00_l"> <a href="#" class="zr-btn active">最热</a> <a href="#" class="find-btn">发现</a> <a href="#" class="person-btn">人类发布</a> </div> <div class="nei_00_m"> <a href="#" class="active">即时排序</a> <a href="#">24小时</a> <a href="#">3天</a> </div> <a class="nei_00_r"> <span class="ico_1"></span> <span class="ico_2">发布</span> </a> </div> <!-- 第一条 --> <div class="item"> <div class="new-pic"> <img src="img/1.jpg" /> </div> <div class="new-content"> <div class="part1"> <a class="show-content">马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</a> <span class="content-soure">-m.21jingji.com</span> <a href="#" class="n2"> <span class="content-kind">挨踢1024</span> </a> </div> <div class="part2"> <span>马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</span> </div> <div class="part3"> <a class="tj" title="推荐"> <span class="hand-icon"></span> <b>18</b> </a> <a class="pl" title="评论"> <span class="hand-icon"></span> <b>210</b> </a> <a class="sc" title="加入收藏"> <span class="hand-icon"></span> <b>私藏</b> </a> </div> </div> </div> <!-- 第二条 --> <div class="item"> <div class="new-pic"> <img src="img/3.jpg" /> </div> <div class="new-content"> <div class="part1"> <a class="show-content">桥咖啡，一家在五道口经营了15年的咖啡馆，在几经转手之后，最终在杨小飞手上跑完了最后一棒，于6月29日关上最后一盏灯。</a> <span class="content-soure">-mp.weixin.qq.com</span> <a href="#" class="n2"> <span class="content-kind">挨踢1024</span> </a> </div> <div class="part2"> <span>杨小飞端着两杯咖啡上了二楼，笑意中略带疲惫。九月的第一天，我们约在五道口做采访。</span> </div> <div class="part3"> <a class="tj" title="推荐"> <span class="hand-icon"></span> <b>8</b> </a> <a class="pl" title="评论"> <span class="hand-icon"></span> <b>5</b> </a> <a class="sc" title="加入收藏"> <span class="hand-icon"></span> <b>私藏</b> </a> </div> </div> </div> <!-- 第三条 --> <div class="item"> <div class="new-pic"> <img src="img/1.jpg" /> </div> <div class="new-content"> <div class="part1"> <a class="show-content">马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</a> <span class="content-soure">-m.21jingji.com</span> <a href="#" class="n2"> <span class="content-kind">挨踢1024</span> </a> </div> <div class="part2"> <span>马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</span> </div> <div class="part3"> <a class="tj" title="推荐"> <span class="hand-icon"></span> <b>18</b> </a> <a class="pl" title="评论"> <span class="hand-icon"></span> <b>210</b> </a> <a class="sc" title="加入收藏"> <span class="hand-icon"></span> <b>私藏</b> </a> </div> </div> </div> <!-- 第三条 --> <div class="item"> <div class="new-pic"> <img src="img/1.jpg" /> </div> <div class="new-content"> <div class="part1"> <a class="show-content">马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</a> <span class="content-soure">-m.21jingji.com</span> <a href="#" class="n2"> <span class="content-kind">挨踢1024</span> </a> </div> <div class="part2"> <span>马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</span> </div> <div class="part3"> <a class="tj" title="推荐"> <span class="hand-icon"></span> <b>18</b> </a> <a class="pl" title="评论"> <span class="hand-icon"></span> <b>210</b> </a> <a class="sc" title="加入收藏"> <span class="hand-icon"></span> <b>私藏</b> </a> </div> </div> </div> <!-- 第三条 --> <div class="item"> <div class="new-pic"> <img src="img/1.jpg" /> </div> <div class="new-content"> <div class="part1"> <a class="show-content">马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</a> <span class="content-soure">-m.21jingji.com</span> <a href="#" class="n2"> <span class="content-kind">挨踢1024</span> </a> </div> <div class="part2"> <span>马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</span> </div> <div class="part3"> <a class="tj" title="推荐"> <span class="hand-icon"></span> <b>18</b> </a> <a class="pl" title="评论"> <span class="hand-icon"></span> <b>210</b> </a> <a class="sc" title="加入收藏"> <span class="hand-icon"></span> <b>私藏</b> </a> </div> </div> </div> <!-- 第三条 --> <div class="item"> <div class="new-pic"> <img src="img/1.jpg" /> </div> <div class="new-content"> <div class="part1"> <a class="show-content">马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</a> <span class="content-soure">-m.21jingji.com</span> <a href="#" class="n2"> <span class="content-kind">挨踢1024</span> </a> </div> <div class="part2"> <span>马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</span> </div> <div class="part3"> <a class="tj" title="推荐"> <span class="hand-icon"></span> <b>18</b> </a> <a class="pl" title="评论"> <span class="hand-icon"></span> <b>210</b> </a> <a class="sc" title="加入收藏"> <span class="hand-icon"></span> <b>私藏</b> </a> </div> </div> </div> <!-- 第三条 --> <div class="item"> <div class="new-pic"> <img src="img/1.jpg" /> </div> <div class="new-content"> <div class="part1"> <a class="show-content">马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</a> <span class="content-soure">-m.21jingji.com</span> <a href="#" class="n2"> <span class="content-kind">挨踢1024</span> </a> </div> <div class="part2"> <span>马斯克价值30亿美元的长谈：关于人工智能、宇宙终结，以及威士忌、烟草和武士剑</span> </div> <div class="part3"> <a class="tj" title="推荐"> <span class="hand-icon"></span> <b>18</b> </a> <a class="pl" title="评论"> <span class="hand-icon"></span> <b>210</b> </a> <a class="sc" title="加入收藏"> <span class="hand-icon"></span> <b>私藏</b> </a> </div> </div> </div> </div> <div class="neirong-r">444</div> </div> </div> <div class="jiewei"> <div class="buju3"> <div class="footer"> <p> 版权所有：北京格致璞科技有限公司 </p> </div> </div> </div> </div> </body> </html>