原作者:www.bilibili.com/read/cv1759…
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
/*清除浮动的影响*/
.cl{
clear: both;
}
body{
font-size: 14px;
font-family: "Microsoft YaHei","SimSun";
height: 8888px;
}
.header{
height: 58px;
background-color: #191D3A;
}
/*版心*/
.inner_c{
width: 1000px;
margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
}
/*导航条的logo*/
.header .logo{
float: left;
margin-right: 40px;
}
.header .nav{
float: left;
}
.header .nav ul{
list-style: none; /*去掉列表前面的圆点*/
}
.header .nav ul li{
float: left;
width: 100px;
line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
border-left: 1px solid #252947; /*每个li之间有间隔线*/
}
.header .nav ul li.last{
border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/
}
.header .nav ul li a{
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
height: 58px;
text-decoration: none; /*去掉超链的下划线*/
color:#818496;
text-align: center; /*让这个div内部的文本居中*/
}
.header .nav ul li a.current{
color:white;
background: #252947;
}
.header .nav ul li a:hover{
color: white;
background: #252947;
}
.header .jrwm_box{
float: left;
height: 58px;
width: 100px;
padding-left: 48px;
padding-top: 12px;
}
/*放背景图片的div*/
.header .jrwm_box .jrwm{
height: 34px;
background-image: url(images/jrwm.png);
background-repeat: no-repeat;
text-align: center; /*让这个div内部的超链接居中*/
}
.header .jrwm_box .jrwm a{
display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
text-decoration: none; /*去掉超链的下划线*/
color: white;
}
.banner{
height: 465px;
background: url(images/banner.jpg) no-repeat center top;
}
.content{
padding-top: 50px;
}
.content .product{
height: 229px;
border-bottom: 1px solid #DBE1E7;
}
.content .product ul{
list-style: none;
}
.content .product ul li{
float: left;
width: 218px;
margin-right: 43px;
}
.content .product ul li.last{
margin-right: 0;
width: 217px;
}
.content .product ul li img{
width: 218px;
height: 130px;
}
.content .product ul li.last img{
width: 217px;
}
.content .product ul li h3{
text-align: center;
line-height: 38px;
font-size: 14px;
font-weight: bold;
}
.content .product ul li p.djbf{
text-align: center;
line-height: 16px;
}
.content .product ul li p.djbf a{
font-size: 12px;
color:#38B774;
text-decoration: none;
background:url(images/sanjiaoxing.png) no-repeat right 5px;
padding-right: 12px;
}
</style>
</head>
<body>
<div class="header">
<div class="inner_c">
<div class="logo">
<img src="images/logo.png " alt="">
</div>
<div class="nav">
<ul>
<li><a href="#" class="current">首页</a></li>
<li><a href="#">博雅游戏</a></li>
<li><a href="#">博雅新闻</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">客服中心</a></li>
<li class="last"><a href="#">投资者关系</a></li>
</ul>
</div>
<div class="jrwm_box">
<div class="jrwm">
<a href="https://www.google.com/" target="_blank">加入我们</a>
</div>
</div>
</div>
</div>
<!-- 在导航条和banner之间隔一堵墙 -->
<div class="cl"></div>
<div class="banner"></div>
<!-- 内容区域 -->
<div class="content inner_c">
<div class="product">
<ul>
<li>
<p><img src="images/pro1.jpg" alt="" /></p>
<h3>BPT宣传片</h3>
<p class="djbf">
<a href="#">点击播放</a>
</p>
</li>
<li>
<p><img src="images/pro2.jpg" alt="" /></p>
<h3>BPT宣传片</h3>
<p class="djbf">
<a href="#">点击播放</a>
</p>
</li>
<li>
<p><img src="images/pro3.jpg" alt="" /></p>
<h3>BPT宣传片</h3>
<p class="djbf">
<a href="#">点击播放</a>
</p>
</li>
<li class="last">
<p><img src="images/pro4.jpg" alt="" /></p>
<h3>BPT宣传片</h3>
<p class="djbf">
<a href="#">点击播放</a>
</p>
</li>
</ul>
</div>
</div>
</body>
</html>
