首页 > 代码库 > html+css3完成的一个网站首页
html+css3完成的一个网站首页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" onselectstart="return false">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>博雅网</title>
</head>
<style type="text/css">
*{margin:0px;padding:0px;}
/*导航条*/
.header{
width:100%;height:65px;
margin:0px auto;
background:rgba(25, 28, 60, 1);
}
.header img{
height:100%;
float:left;
margin-left:100px;
margin-right:50px;
}
.header ul{
width:100%;height:100%;
}
.header ul li{
list-style:none;
display:inline-block;
width:100px;height:100%;
line-height:70px;
text-align:center;
font-size:18px;
font-family:"微软雅黑";
color:#979797;
border-left:1px solid #3b3b3b;
float:left;
}
.header ul li:hover{
cursor:pointer;
color:#ddd;
/*background:rgba(68, 72, 102, 1);*/
}
.header ul li#last{
border-right:2px solid #303030;
}
.header ul li#next{
border-left:none;
height:40px;width:120px;
color:white;
background:rgba(51, 185, 114, 1);
border-radius:3px;
margin-top:15px;
margin-left:10px;
line-height:40px;
}
.header ul li#_text{
float:right;
margin-right:60px;
border-left:none;
}
.header ul li#_text #btn_1{
font-size:18px;
color:rgba(51, 185, 114, 1);
}
.header ul li#_text #btn_2{
font-size:18px;
margin-left:10px;
color:#ddd;
}
.header ul li#_text #btn_2:hover{
color:rgba(51, 185, 114, 1);
}
/*大轮播图*/
.lun{
width:1349px;height:465px;
background: url("images/banner.jpg") no-repeat center top;
margin:0 auto;
position:relative;
}
.lun ul{
width:120px;height:30px;
position:absolute;
left:615px;top:420px;
}
.lun ul li{
list-style:none;
display:inline-block;
width:16px;height:18px;
border-radius: 100%;
background:white;
margin-left:9px;
margin-right:9px;
}
.lun ul li:hover{
width:28px;
margin-left:3px;
margin-right:3px;
border-radius: 8px 8px;
background:pink;
}
/*小轮播图*/
.minlun{
width:100%;height:260px;
margin:60px auto;
}
.minlun ul{
width:100%;height:100%;
}
.minlun ul li{
display:inline-block;
width:300px;height:100%;
float:left;margin-left:30px;
}
.minlun ul li:hover .content{
background:rgba(51, 185, 114, 1);
}
.minlun ul li:hover .content #text_2{
color:white;
}
.minlun ul li img{
width:300px;height:179px;
}
.minlun ul li .content{
width:100%;height:81px;
transition:background 0.5s;
}
.minlun ul li .content:hover{
background:rgba(51, 185, 114, 1);
}
.minlun ul li .content:hover #text_2{
color:white;
}
.minlun ul li .content #text_1{
display:inline-block;
width:100%;height:30px;
text-align:center;
line-height:30px;
}
.minlun ul li .content #text_2{
display:inline-block;
width:100%;height:30px;
text-align:center;
line-height:30px;
margin-top:10px;
color:rgba(51, 185, 114, 1);
}
/*小轮播图的圆点*/
.circle{
margin-top:30px;
width:120px;height:30px;
margin-left:615px;
position:relative;
}
.circle:before{
content:"";
display:inline-block;
width:580px;border:1px solid #aaa;
margin-left:130px;
margin-top:13px;
}
.circle:after{
content:"";
display:inline-block;
width:580px;border:1px solid #aaa;
margin-right:118px;
float:right;
}
.circle ul{
position:absolute;
top:0px;left:13px;
}
.circle ul li{
list-style: none;
display:inline-block;
float:left;
width:14px;height:14px;
border-radius:100%;
background:rgb(51, 185, 114);
margin-top:8px;
margin-left:6px;
margin-right:6px;
}
.circle ul li:hover{
width:20px;
margin-left:3px;
margin-right:3px;
border-radius:7px 7px;
background:pink;
}
.bg_down{
width:1630px;height:364px;
background: url("images/indexmainbg.jpg");
margin-top:50px;
}
.bg_down .left{
float:left;
width:500px;height:310px;
background: url(‘images/bynewsbg.jpg‘);
margin-left:175px;
}
.bg_down .right{
width:500px;height:310px;
background: url(‘images/byhrbg3.jpg‘);
float:left;
}
.last_bg{
width:100%;height:100px;
margin-top:30px;
background:rgba(25, 28, 60, 1);
}
.bg_down .left ul{
width:460px;height:50%;
margin-left:20px;
margin-top:121px;
}
.bg_down .left ul li{
list-style:none;
display:inline-block;
width:100%;height:46px;
border-bottom:1px solid #ccc;
}
.bg_down .left ul li a{
display:inline-block;
height:100%;
font-size:14px;
color:#666;
text-align:center;
line-height:46px;
text-decoration:none;
float:left;
}.bg_down .left ul li a:hover{
color:rgba(51, 185, 114, 1);
}
.bg_down .left ul li span{
display:inline-block;
height:100%;
font-size:14px;
color:#bbb;
text-align:center;
line-height:46px;
float:right;
}
.bg_down .right .topText{
width:200px;height:100px;
margin-left:78px;
}
.bg_down .right .topText .leftText{
width:60%;height:60%;
margin-top:36px;
}
.bg_down .right .topText .leftText #b_text{
font-size:28px;
color:#fff;
}
.bg_down .right .topText .leftText #m_text{
font-size:12px;
color:#fff;
}
.bg_down .right .bottomText{
width:300px;height:170px;
margin-top:-22px;
margin-left:20px;
}
.bg_down .right .bottomText span{
font-size:18px;
color:#fff;
}
.bg_down .right .bottomText ul{
margin-top:10px;
}
.bg_down .right .bottomText ul li{
list-style:none;
display:inline-block;
width:100%;
height:35px;
border-bottom: 1px solid #bbb;
font-size:14px;
color:#fff;
line-height:35px;
}
.bg_down .right .bottomText ul li:hover{
cursor:pointer;
}
</style>
<body>
<!--导航条开始-->
<div class="header">
<img src="http://www.mamicode.com/images/logo.png">
<ul>
<li>首页</li>
<li>博雅游戏</li>
<li>博雅新闻</li>
<li>关于我们</li>
<li>客服中心</li>
<li id="last">投资者关系</li>
<li id="next">加入我们</li>
<li id="_text">
<span id="btn_1">中文</span>
<span id="btn_2">EN</span>
</li>
</ul>
</div>
<!--导航条结束-->
<!--轮播图开始-->
<div class="lun">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--轮播图结束-->
<!--小轮播图开始-->
<div class="minlun">
<ul>
<li>
<img src="http://www.mamicode.com/images/pro1.jpg">
<div class="content">
<span id="text_1">德州扑克</span>
<span id="text_2">TWO PLAYER MAHJONG</span>
</div>
</li>
<li>
<img src="http://www.mamicode.com/images/pro2.jpg">
<div class="content">
<span id="text_1">博雅互动宣传视频</span>
<span id="text_2">TWO PLAYER MAHJONG</span>
</div>
</li>
<li>
<img src="http://www.mamicode.com/images/pro3.jpg">
<div class="content">
<span id="text_1">斗地主</span>
<span id="text_2">TWO PLAYER MAHJONG</span>
</div>
</li>
<li>
<img src="http://www.mamicode.com/images/pro4.jpg">
<div class="content">
<span id="text_1">德州扑克</span>
<span id="text_2">TWO PLAYER MAHJONG</span>
</div>
</li>
</ul>
</div>
<!--小轮播图结束-->
<!--小轮播图的小圆点-->
<div class="circle">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--博雅新闻-->
<div class="bg_down">
<div class="left">
<ul>
<li>
<a href="http://www.mamicode.com/#">博雅互动公布2016全年业绩，经调整纯利增长46.7%</a>
<span>03/29</span>
</li>
<li>
<a href="http://www.mamicode.com/#">博雅互动出席“Top棋牌智力游戏启动仪式”</a>
<span>03/23</span>
</li>
<li>
<a href="http://www.mamicode.com/#">博雅互动荣获“2016最佳棋牌游戏&棋牌大厅金苹果奖”</a>
<span>02/22</span>
</li>
<li>
<a href="http://www.mamicode.com/#">博雅互动泰国分公司携手玩家开展公益赈灾活动</a>
<span>01/22</span>
</li>
</ul>
</div>
<div class="right">
<div class="topText">
<div class="leftText">
<span id="b_text">专场招聘</span>
<span id="m_text">BOYAA JOBS</span>
</div>
<span></span>
</div>
<div class="bottomText">
<span>专场招聘岗位:</span>
<ul>
<li>Php开发工程师</li>
<li>C++开发工程师</li>
<li>Web前端开发工程师</li>
<li>大数据开发工程师</li>
</ul>
</div>
</div>
</div>
<!--收尾 底部声明条-->
<div class="last_bg">
</div>
</body>
</html>
实现效果如下：
html+css3完成的一个网站首页