实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/php.css">
<title>php中文网</title>
<script>
$(function(){
$('.top_left>a').hover(function(){
$x=parseInt($(this).attr('name'))*111;
$('.ba').stop().animate({left:$x+'px'},300)
},function(){
$('.ba').stop().animate({left:0+'px'},300)
})
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #F3F5F7;
}
li{
list-style: none;
}
.clear{
clear:both;
}
.top{
position: relative;
width: 100%;
background: black;
}
span{
width: 175px;
}
.top_left{
text-align: center;
width:1000px;
height: 60px;
position: relative;
/* background: rebeccapurple; */
left: 175px;
line-height: 60px;
}
.top_left a{
margin:0px 20px;
}
.top_left a{
color: #B3B3B3;
font-size: 15px;
text-decoration: none;
}
/* 鼠标移上高亮显示 */
.top_left a:hover{
color:#fff;
}
/* top右侧 */
.top_right{
width: 150px;
/* background: red; */
float: right;
position: relative;
top:-60px;
}
.top_right a li{
margin-right:40px;
float: right;
line-height: 60px;
font-size: 25px;
}
/* banner区 */
.banner-contment{
margin: 25px auto;
margin-top:-25px;
width: 1200px;
height: 510px;
background: white;
box-shadow: 2px 2px 15px #ccc;
border-radius: 5px;
}
/* banner左侧 */
.banner-left{
position: absolute;
width: 200px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background:#2B333B;
height: 510px;
}
.banner-left p{
margin: 16px auto;
}
.banner-left p :hover{
background:#E8E8E8;
}
.banner-left p a{
color: #AAADB1;
display: block;
height: 45px;
width: 200px;
line-height: 45px;
font-size: 20px;
text-decoration: none;
}
/* banner右侧 */
.banner-right{
float: right;
width: 1000px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background: blueviolet;
height: 510px;
}
.one{
line-height: 55px;
width: 100%;
height: 55px;
background: white;
}
.one a{
text-decoration: none;
color: #2B333B;
font-size: 15px;
margin-left: 20px;
}
.one a:hover{
text-decoration: none;
color:#ccc;
font-size: 15px;
margin-left: 20px;
}
.one input{
width: 200px;
height:30px;
background: #F1F0F0;
border-style: none;
border-radius:3px;
margin-left:200px;
padding-left: 10px;
}
.two{
width: 100%;
height: 330px;
}
.three{
line-height: 125px;
width: 100%;
height: 125px;
background: white;
}
.three div{
margin: 20px 5px;
float: left;
width: 240px;
height:90px;
background: #2B333B;
border-radius: 10px;
overflow: hidden;
}
/* 广告 */
.container{
width: 1200px;
margin: 10px auto;
text-align: center;
}
.container img{
width: 1100px;
border-radius: 5px;
}
/* 新闻 */
.xw{
margin: 10px auto;
}
.xw .col-md-4{
height: 500px;
background-color: #2B333B
}
.xw .col-md-6{
height: 500px;
background-color: blue;
}
.xw .col-md-2{
height: 500px;
background-color:blueviolet;
}
</style>
</head>
<body>
<!-- TOP区 -->
<div class="top">
<span></span>
<div class="top_left">
<a name="0" href="">首页</a>
<a name="1" href="">视频教程</a>
<a name="2" href="">社区问答</a>
<a name="3" href="">编程词典 <i class="fa fa-sort-desc"></i></a></li>
<a name="4" href="">手册下载</a>
<a name="5" href="">工具下载</a>
<a name="6" href="">类库下载</a>
<a name="7" href="">特色课堂</a>
<a name="8" href="">菜鸟课堂</a>
<div class="ba"
style="position:absolute; width:111px;height:3px;
background:#5FB878;top: 57px"></div>
</div>
<div class="top_right">
<a href=""><li class="fa fa-bullhorn"></li></a>
<a href=""><li class="fa fa-user-circle-o"></li></a>
</div>
</div>
<div class="clear"></div>
<!-- banner区 -->
<div class="banner">
<div class="banner-contment">
<div class="banner-left" >
<p><a href="">php开发</a></p>
<p><a href="">前端开发</a></p>
<p><a href="">服务端开发</a></p>
<p><a href="">移动开发</a></p>
<p><a href="">数据库</a></p>
<p><a href="">服务器运维&下载</a></p>
<p><a href="">在线工具箱</a></p>
<p><a href="">常用类库</a></p>
</div>
<div class="banner-right">
<div class="one">
<a href="">php头条</a>
<a href="">独孤九剑</a>
<a href="">学习路线</a>
<a href="">在线工具</a>
<a href="">趣味课堂</a>
<a href="">社区问答</a>
<a href="">在线直播</a>
<input type="text" placeholder="# 请输入搜索内容">
</div>
<div class="two"><img src="https://img.php.cn/upload/article/000/000/003/5b49b0e610f26951.jpg" alt=""></div>
<div class="three">
<div style="background: url(http://www.php.cn/static/images/index_dugu2.jpg)"></div>
<div style="background: url(https://img.php.cn/upload/article/000/000/003/5baf2172be8c0490.png)"></div>
<div style="background: url(http://www.php.cn/static/images/index_php_item3.jpg)"></div>
<div style="background: url(http://www.php.cn/static/images/index_php_new4.jpg)"></div>
</div>
</div>
</div>
</div>
<!-- 广告 -->
<div class="gg">
<div class="container">
<div class="row">
<div class="col-md-12"><img src="https://img.php.cn/upload/article/000/000/003/5c4580edb940a985.gif" alt="">
</div>
</div>
</div>
</div>
<!-- 新闻 -->
<div class="xw">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
