博客核心内容：
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;管用，真的是匪夷所思。
扫一扫
2353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
