html+css3完成的一个网站首页

时间：2017-06-07 12:51:27 阅读：159 评论：0 收藏：0 [点我收藏+]

标签：前端开发工程师 order dex meta 效果 before rgb point

<!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="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="images/pro1.jpg">
    <div class="content">
     <span id="text_1">德州扑克</span>
     <span id="text_2">TWO PLAYER MAHJONG</span>
    </div>
   </li>
   <li>
    <img src="images/pro2.jpg">
    <div class="content">
     <span id="text_1">博雅互动宣传视频</span>
     <span id="text_2">TWO PLAYER MAHJONG</span>
    </div>
   </li>
   <li>
    <img src="images/pro3.jpg">
    <div class="content">
     <span id="text_1">斗地主</span>
     <span id="text_2">TWO PLAYER MAHJONG</span>
    </div>
   </li>
   <li>
    <img src="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="#">博雅互动公布2016全年业绩，经调整纯利增长46.7%</a>
     <span>03/29</span>
    </li>
    <li>
     <a href="#">博雅互动出席“Top棋牌智力游戏启动仪式”</a>
     <span>03/23</span>
    </li>
    <li>
     <a href="#">博雅互动荣获“2016最佳棋牌游戏&棋牌大厅金苹果奖”</a>
     <span>02/22</span>
    </li>
    <li>
     <a href="#">博雅互动泰国分公司携手玩家开展公益赈灾活动</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完成的一个网站首页

标签：前端开发工程师 order dex meta 效果 before rgb point

原文地址：http://www.cnblogs.com/cxwAbbot/p/6955920.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行