HTML仿抽屉新闻
来源：互联网 发布：福建公安便民网络 编辑：程序博客网 时间：2024/09/21 08:17
博客核心内容：
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>效果展示： 
（三）：思考点
1、对于小图像的定位（注意：background:url("http://dig.chouti.com/images/icon.png") no-repeat 9px -195px ;）这是之前用的，后来我把 no-repeat给去掉了，更加容易的进行了定位。2、鼠标触摸状态的显示（貌似有的时候和写法有关--尤其是和变量的命令有关），还有就是加下划线的时候为什么 text-decoration: solid;不管用，但是border-bottom: solid;管用，真的是匪夷所思。阅读全文
0 0
- HTML仿抽屉新闻
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面_仿网易新闻左侧抽屉式交互
- Android 使用Drawerlayout仿网易新闻客户端抽屉模式
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- iOS界面-仿网易新闻左侧抽屉式交互
- Android 使用Drawerlayout仿网易新闻客户端抽屉模式
- iOS - 仿网易新闻侧滑抽屉效果
- Android 使用Drawerlayout仿网易新闻客户端抽屉模式
- 多种方法实现多态！！！
- WebSacrab与SQL注入
- [ifrog] Round #19 B -- Buildings
- 【笔试题】CVTE C++开发岗笔试题7.29
- POJ 1661 Help Jimmy（动态规划--最短下降模板）
- HTML仿抽屉新闻
- linux 下查找文件或者内容命令whereis,locate ,find
- B. Jeff and Furik----数学期望
- 8.数据库语言分类
- hdu 2058 The sum problem
- GCD使用方法以及死锁研究
- 【python技巧实用篇】python读写文件、jieba自定义字典
- xUtils源码分析系列1
- 对 MMSE 估计器与 Kalman 滤波器的理解
