您的位置：首页 > Web前端 > HTML5

HTML5基础加强css样式篇 （高仿百度新闻热门文章窗口）（六）

2017-03-15 10:01 477 查看


1.静态布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高仿百度新闻热门文章</title>
<style type="text/css">
html,body,div{
margin: 0px;
padding: 0px;
}

#tables{
width: 350px;

margin: 0px auto;
position: relative;
margin-top: 60px;
border-top: 1px solid #eeeeee;
}
.tab{
width: 45px;
height: 28px;
position: absolute;
top: -30px;
border: 1px solid #eeeeee;
text-align: center;
line-height: 28px;

}
.tab_left{
right: 45px;
border-right: 0px;
vertical-align: middle;
border-bottom: 1px white solid;
}
.tab_right{
right: 0px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="tables" >
<div class="tab tab_left">日榜</div>
<div class="tab tab_right">周榜</div>
<div class="tabcontent" >日榜66666</div>
<div class="tabcontent" >周榜77777</div>
</div>

</body>
</html>


2.添加逻辑：

所需精灵图如下：可以随意制作



代码如下：注：细节自己调下就好

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高仿百度新闻热门文章</title>
<style type="text/css">
html,body,div{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
margin: 0px;
padding: 0px;
}
#tables{
width: 350px;

margin: 0px auto;
position: relative;
margin-top: 60px;
border-top: 1px solid #eeeeee;
}
.tab{
width: 45px;
height: 28px;
position: absolute;
top: -30px;
border: 1px solid #eeeeee;
text-align: center;
line-height: 28px;

}
.tab_left{
right: 45px;
border-right: 0px;
vertical-align: middle;

}
.tab_right{
right: 0px;
vertical-align: middle;

}
.show_hot{
border-bottom: 2px white solid;
}
.tabcontent{
position: absolute;
top:0px;
left: 0px;
background-color:white ;
}
#contentday{
z-index: 10;
}
#contentweek{
z-index: 1;
}
.titlesimg{
display: inline-block;
width: 17px;
height: 18px;
vertical-align: middle;
}
a{
text-decoration: none;
}
#one2{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 -18px;
}
#one3{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 -36px;
}
#one4{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 -54px;
}

#one5{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 -72px;
}
#one1{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 0;
}
#two1{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 0;
}
#two2{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 -18px;
}
#two3{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 -36px;
}
#two4{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 -54px;
}#two5{
background:#fff url("img/icon-nums_7f1b1d2.png") no-repeat 0 -72px;
}

.tab_title{

height: 28px;
position: absolute;
top: -30px;

text-align: center;
line-height: 28px;
left: 0px;
}
</style>
</head>
<body>
<div id="tables" >
<div class="tab tab_left show_hot" id="hotday">日榜</div>
<div class="tab tab_right" id="hotweek">周榜</div>
<div class="tab_title">热门文章</div>
<div class="tabcontent" id="contentday">
<ul>
<li ><i id="one1" class="titlesimg"></i><a href="javascript:;" title="完整的标题... ....">日榜内容</a></li>
<li ><i id="one2" class="titlesimg"></i><a href="javascript:;">日榜内容</a></li>
<li ><i id="one3" class="titlesimg"></i><a href="javascript:;">日榜内容</a></li>
<li ><i id="one4" class="titlesimg"></i><a href="javascript:;">日榜内容</a></li>
<li ><i id="one5" class="titlesimg"></i><a href="javascript:;">日榜内容</a></li>
</ul>
</div>
<div class="tabcontent" id="contentweek" >
<ul>
<li ><i id="two1" class="titlesimg"></i><a href="javascript:;">周榜内容</a></li>
<li ><i id="two2" class="titlesimg"></i><a href="javascript:;">周榜内容</a></li>
<li ><i id="two3" class="titlesimg" ></i><a href="javascript:;">周榜内容</a></li>
<li ><i id="two4" class="titlesimg"></i><a href="javascript:;">周榜内容</a></li>
<li ><i id="two5" class="titlesimg"></i><a href="javascript:;">周榜内容</a></li>
</ul>
</div>
</div>

</body>
<script type="text/javascript">
var tables=document.getElementById("tables");
var hotday=document.getElementById("hotday");
var hotweek= document.getElementById("hotweek");
var contentday=document.getElementById("contentday");
var contentweek=document.getElementById("contentweek");
tables.onmouseover=function(even){
var tar= even.target;
if(tar.id=="hotday"){
hotday.style.borderBottom="2px white solid";
hotweek.style.borderBottom="1px solid #eeeeee";
contentday.style.zIndex=10;
contentweek.style.zIndex=1;

}else if(tar.id=="hotweek"){
hotweek.style.borderBottom="2px white solid";
hotday.style.borderBottom="1px solid #eeeeee";
contentday.style.zIndex=1;
contentweek.style.zIndex=10;
}
}
</script>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html5 javascript 经验 百度
相关文章推荐
新的分享
章节导航