HTML仿抽屉新闻
博客核心內容：
1、代碼展示
2、效果展示
3、思考點
（一）代碼展示
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>抽屜新熱榜-聚合每日熱門、搞笑、有趣資訊</title><link rel="icon" href="http://dig.chouti.com/images/chouti.ico"><style>body{margin: 0px;background-color: aqua;width: 100%;height: 2500px;}.head-band{height: 44px;width: 100%;background-color:#2459a2;/*在這里面還要設置一個定位*/position: fixed;top: 0px;left: 0px;}.digg-logo{/*通過float屬性可以對內聯標簽設置長和寬*/float: left;width: 121px;height: 23px;background:url("logo.png") no-repeat ;margin-left: 164px;margin-top: 12px;}.location2{float: left;width: 381px;height: 44px;margin-left: 18px;}.total_lab,.sier_lab,.duanzi_lab,.tupian_lab,.ti_lab,.ans_lab{float: left;height:44px;text-align: center;line-height: 44px;text-decoration: none;color: #c0cddf;font-size: 13px;}.total_lab,.sier_lab,.duanzi_lab,.tupian_lab{width: 54px;}.ti_lab,.ans_lab{width: 82.5px;}/*接下來設置鼠標懸浮效果*/.total_lab:hover{color: white;background-color: darkblue;}.sier_lab:hover{color: white;background-color: darkblue;}.duanzi_lab:hover{color: white;background-color: darkblue;}.tupian_lab:hover{color: white;background-color: darkblue;}.ti_lab:hover{color: white;background-color: darkblue;}.ans_lab:hover{color: white;background-color: darkblue;}.location3{float: left;width: 132px;height: 44px;margin-left: 240px;}.register_lab,.log_lab{float: left;height:44px;width: 66px;text-align: center;line-height: 44px;text-decoration: none;color: #c0cddf;font-size: 13px;color: white;}.register_lab:hover{background-color: darkblue;}.log_lab:hover{background-color: darkblue;}.location4{width: 133px;height: 44px;background-color: #2459a2;float: left;margin-left: 2px;}.input_lab{float: left;width: 93px;height: 27px;margin-top: 4.5px;margin-left: 2px;background-color: #f4f4f4;}/*接下來整最有技術的圖片:調節圖標*/.search_lab{background-color: white;float: left;width: 29px;height: 32.0px;margin-top: 5px;margin-left: 0px;background: #f4f4f4;border: solid 1px;}.img1{float: left;margin-top: 10px;width: 20px;height: 16px;background:url("http://dig.chouti.com/images/icon.png") no-repeat 9px -195px ;}/*內部成員全部票完之后,在head-hand的末尾加一個block塊,這樣騰出一個快*/.clearfix1:after{content:"";display: block;clear: both;border: solid 0px red;}.main_content_band{height:2500px ;width: 1015px;background-color: white;margin-left: 167.5px;border: solid 1px red;}.main-content{float: left;height: 2270px;width: 635px;background-color: azure;margin-left: 26.6px;margin-right: 26.6px;}/*接下來要好好研究左側的布局*/.chat-content{float: left;height: 2270px;width: 300px;background-color: aliceblue;border: solid 0px red;}/*接下來我要給右側的先插入一張圖片*/.chat-content > .homepage_download{margin-top: 250px;}.main-content > .choice{height:95px;border-bottom: solid silver 1.5px;background-color: white;}.hot_lab,.find_lab,.people_report_lab,.sort_lab,.twofour_hour_lab,.three_day_lab{margin-top: 44px;}.hot_lab{float: left;width: 75px ;height: 51px;/*border: solid 1px;*/background: url("zuire.png") no-repeat center center;}.find_lab,.people_report_lab{float: left;height: 51px;width: 75px;border: solid 0px red ;text-align: center;line-height: 51px;text-decoration: none;font-size: small;color: #2459a2;}.sort_lab,.twofour_hour_lab,.three_day_lab{float: left;height: 51px;width: 75px;/*border: solid 1px;*/text-align: center;line-height: 51px;text-decoration: none;font-size: small;}.sort_lab{color: #b4b4b4;margin-left: 65px;}.twofour_hour_lab,.three_day_lab{color: #390;}.three_day_lab{margin-left: -17px;}.publish-btn{margin-top: 52px;float: left;width:134px;height:33px ;background-color: #84a42b;color: white;text-align: center;line-height:33px;text-decoration: none;margin-left: 2px;}/*進行鼠標觸摸操作*/#two2:hover{border-bottom: solid 1px;}#three3:hover{border-bottom: solid 1px;}.clearfix21:after{content:"";display: block;clear: both;}/*接下來做整個頁面最難的部分*//*設計第二個邊框*/.item1{height: 85px;background-color: white;border-bottom: solid silver 1.5px;}.item_zuo1{float: left;width: 560px;height: 85px;/*border: solid 1px;*/}.content1{float: left;text-decoration: none;font-size: 15px;color: #369;font-weight: 700;margin-top: 14px;}.item1_shang1 span,.item1_shang1 .location1 {float: left;color:#b4b4b4;margin-left: 13px;font-size: 14px;margin-top: 15px;}.item1_shang1:after{content:"";display: block;clear: left;}.item_you_1{float: left;height: 85px;width: 73px;background: url("wjl.png") no-repeat 6px 8px;}.item1_xia1{float:left;width: 560px;height: 20px;/*border: solid 1px;*/margin-top: 15px;}#a1_1,#a2_1,#a3_1,#a4_1{margin-top: 2px;width: 23px;height:15px ;float: left;}#a1_2,#a2_2,#a3_2,#a4_2{float: left;width: 23px;height: 21px;}#a1_3,#a2_3,#a3_3,#a4_3{float: left;color: #99aecb;font-weight: 700;margin-top: 5px;}#a1_2{background: url("icon_18_118.png") no-repeat 2px -39px ;}#a1_3{margin-left: 5px;}#a2_2{background: url("icon_18_118.png") no-repeat 2px -98px ;margin-left: 20px;}#a2_3{margin-left: 25px;}#a3_2{background: url("icon_18_118.png") no-repeat 2px -158px ;margin-left: 15px;}#a3_3{margin-left: 20px;font-weight: 200;font-size: small;}#a4_2{background: url("pp.jpg") no-repeat 2px 2px ;margin-left: 15px;border: solid 1px;width: 20px;height: 18px;margin-top: 2px;}#a4_3{margin-left: 20px;font-weight: 200;font-size: small;}#a5_1{margin-top: 5px;width: 86px;height:15px ;float: left;}#a5_2{float: left;width: 86px;height: 15px;margin-left: 20px;font-size: 13px;color: #390;}#a5_3{float: left;color: #b4b4b4;font-weight: 700;margin-top: 5px;margin-left: 20px;font-weight: 200;font-size: small;}.item_xia1_you{float: left;width: 130px ;height: 20px;margin-left: 10px;margin-top: 2px;display: none;}#share{float: left;color: #b4b4b4;font-size: small;margin-top:3px;margin-right: 10px;}.item_xia1_you a{float: left;width: 17px;height: 178px;margin-right: 3px;/*border: solid 1px;*/}#share_one,#share_two,#share_three,#share_four{margin-top: 1px;width: 19px;height: 16px;float: left;}#share_one{width: 16px;background: url("share_icon.png") 34px -177px ;}#share_two{background: url("share_icon.png") 36px -191px ;}#share_three{background: url("share_icon.png") 34px -207px ;}#share_four{background: url("share_icon.png") 36px -149px ;}.item_zuo1:hover .item_xia1_you{display: block;}.content1:hover{border-bottom: solid 1px;}.aone_three:hover{border-bottom: solid 1px;}.atwo_three:hover{border-bottom: solid 1px;}.athree_three:hover{border-bottom: solid 1px;}.afour_three:hover{border-bottom: solid 1px;}.afive_two:hover{border-bottom: solid 1px;}</style></head><div class="head-band clearfix1"><a href="http://www.baidu.com" class="digg-logo"></a><div class="location2"><a href="http://www.baidu.com" class="total_lab">全部</a><a href="http://www.baidu.com" class="sier_lab">42區</a><a href="http://www.baidu.com" class="duanzi_lab">段子</a><a href="http://www.baidu.com" class="tupian_lab">圖片</a><a href="http://www.baidu.com" class="ti_lab">挨踢1024</a><a href="http://www.baidu.com" class="ans_lab">你問我答</a></div><div class="location3"><a href="http://www.baidu.com" class="register_lab">注冊</a><a href="http://www.baidu.com" class="log_lab">登陸</a></div><div class="location4"><input type="text" class="input_lab"><a href="http://www.baidu.com" class="search_lab"><span class="img1"></span></a></div></div><div class="main_content_band clearfix2"><div class="main-content"><!--設計第一個欄目--><div class="choice clearfix21"><a href="http://www.baidu.com" class="hot_lab"></a><a href="http://www.baidu.com" class="find_lab"><strong>發現</strong></a><a href="http://www.baidu.com" class="people_report_lab"><strong>人類發布</strong></a><a href="http://www.baidu.com" class="sort_lab">即時排序</a><a href="http://www.baidu.com" class="twofour_hour_lab"><span id="two2">24小時</span></a><a href="http://www.baidu.com" class="three_day_lab"><span id="three3">3天</span></a><a href="http://www.baidu.com" class="publish-btn"><span>+ 發布</span></a></div><!--設計第二個欄目--><div class="item1"><div class="item_zuo1"><div class="item1_shang1"><a href="" class="content1">除了賣掉“重資產”，王健林還放棄了“東方好萊塢”的影視夢 </a><span>-www.thepaper.cn </span><a href="" class="location1">42區</a></div><div class="item1_xia1"><div item_xia1_zuo><!--接下來仿著上面寫就1個了--><a href="" id="a1_1"><span id="a1_2"></span></a><a href="http://www.baidu.com"><span id="a1_3" class="aone_three">15</span></a><!--接下來仿著上面寫就2個了--><a href="" id="a2_1"><span id="a2_2"></span></a><a href="http://www.baidu.com"><span id="a2_3" class="atwo_three" >20</span></a><!--接下來仿著上面寫就3個了--><a href="" id="a3_1"><span id="a3_2"></span></a><a href="http://www.baidu.com"><span id="a3_3" class="athree_three" >私藏</span></a><!--接下來仿著上面寫就4個了--><a href="" id="a4_1"><span id="a4_2"></span></a><a href="http://www.baidu.com"><span id="a4_3" class="afour_three">私藏</span></a><!--接下來寫第5個--><a href="" id="a5_1"><span id="a5_2"class="afive_two">5小時31分鐘前</span></a><span id="a5_3">入熱榜</span></div><div class="item_xia1_you"><span id="share">分享到</span><a href="http://www.baidu.com"><span id="share_one"></span></a><a href="http://www.baidu.com"><span id="share_two"></span></a><a href="http://www.baidu.com"><span id="share_three"></span></a><a href="http://www.baidu.com"><span id="share_four"></span></a></div></div></div><div class="item_you_1"></div></div></div><!--右側插入一張圖片就完事了--><div class="chat-content"><img src="http://dig.chouti.com/images/homepage_download.png" class="homepage_download"><div style="font-size: large;font-family: 宋體">24小時全部 TOP 10</div></div></div><body></body></html>效果展示：
（三）：思考點
總結
- 上一篇： 百分点科技位居中国数据治理解决方案市场第
- 下一篇： 复旦大学计算机专业硕士平均工资,在复旦大