1 Star 1 Fork 0

东哥/博雅互动css布局

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 6.76 KB
一键复制 编辑 原始数据 按行查看 历史
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>博雅互动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 1888px;
}
.header{
width: 100%;
height: 58px;
background-color: #191d3a;
}
.inner_c{
width: 1000px;
margin: 0 auto;
}
.inner_c .logo{
padding-left: 20px;
float: left;
}
.nav{
width: 517px;
/* background-color: orange; */
overflow: hidden;
float: left;
margin-left: 48px;
}
.nav ul{
list-style: none;
}
.nav ul li{
float: left;
width: 85px;
border-right: 1px solid #252947;
}
.nav .navfirst{
border-left: 1px solid #252947;
}
.nav ul li a{
display: block;
font: 14px/58px "微软雅黑";
text-align: center;
text-decoration: none;
color: #818496;
}
.nav ul li a:hover{
color: #eee;
}
.nav ul li a.current{
color: #eee;
background-color: #252947;
}
.jrwm{
float: left;
margin-left: 138px;
height: 58px;
padding-top: 12px;
}
.jrwm a{
display: block;
}
.banner{
width: 100%;
height: 460px;
background: url(images/banner.jpg) repeat-x center center;
}
.content .shows{
width: 100%;
height: 229px;
margin-top: 50px;
border-bottom: 1px solid #dbe1e7;
}
.content .shows ul{
list-style: none;
}
.content .shows ul li{
float: left;
width: 218px;
height: 229px;
margin-right: 43px;
text-align: center;
}
.content .shows ul li.last{
width: 217px;
margin-right: 0;
}
.content .shows ul li p img{
width: 100%;
height: 128px;
}
.content .shows ul li h3{
font: 14px/30px "微软雅黑";
font-weight: bold;
color: #444866;
}
.content .shows ul li a{
font: 12px/29px "Arial","Microsoft Yahei";
color: #38b774;
text-decoration: none;
padding-right: 8px;
background: url(images/sanjiaoxing.png) no-repeat right center;
}
.content .maincon{
margin-top: 53px;
}
.content .maincon .news{
width: 500px;
background: url(images/bynewsbg.jpg) 0px -10px;
float: left;
padding-top: 110px;
}
.content .maincon .jobs{
width: 500px;
height: 310px;
background: url(images/byhrbg3.jpg);
float: left;
position: relative;
}
.content .maincon .news ul{
list-style: none;
padding: 0 20px;
}
.content .maincon .news ul li{
line-height: 49px;
border-bottom: 1px solid #bde1e7;
overflow: hidden;
}
.content .maincon .news ul li .title{
text-decoration: none;
color: #444866;
font: 14px/49px "微软雅黑";
float: left;
}
.content .maincon .news ul li .date{
float: right;
font-size: 12px;
font-family: "微软雅黑";
color: #afbecf;
}
.content .maincon .jobs .jobstit{
padding-top: 35px;
padding-left: 80px;
}
.content .maincon .jobs .jobstit h2{
font-size: 28px;
font-family: "微软雅黑";
color: #fff;
}
.content .maincon .jobs .jobstit p{
font: 12px/22px "微软雅黑";
color: #fff;
}
.content .maincon .jobs .joblist{
width: 308px;
font-size: 14px;
font-family: "微软雅黑";
color: #fff;
padding-left: 18px;
padding-top: 15px;
}
.content .maincon .jobs .joblist h3{
line-height: 21px;
font-size: 14px;
font-weight: bold;
}
.content .maincon .jobs .joblist ul{
list-style: none;
}
.content .maincon .jobs .joblist ul li{
line-height: 37px;
border-bottom: 1px solid #6fdea3;
}
.content .maincon .jobs .more2{
width: 66px;
height: 28px;
position: absolute;
top: 40px;
left: 218px;
}
.content{
overflow: hidden;
}
.footer{
width: 100%;
height: 141px;
background: #191d3a;
margin-top: 57px;
}
.footer .top{
width: 68px;
height: 29px;
position: fixed;
bottom: 74px;
right: 14px;
}
.footer .top a{
display: block;
height: 29px;
background: url(images/top.png) no-repeat 0 -40px;
}
.footer .top a:hover{
background: url(images/top.png) no-repeat 0 0px;
}
</style>
</head>
<body>
<div class="header">
<div class="inner_c">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="" />
</a>
</div>
<div class="nav">
<ul>
<li class="navfirst"><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><a href="#">投资者关系</a></li>
</ul>
</div>
<div class="jrwm">
<a href="#"><img src="images/jrwm.png" alt="" /></a>
</div>
</div>
</div>
<div class="banner inner_c"></div>
<!-- 内容区开始 -->
<div class="content inner_c">
<!-- 产品区域开始 -->
<div class="shows">
<ul>
<li>
<p><img src="images/bpt.jpg" alt="" /></p>
<h3>BPT,联结世界的智慧</h3>
<p><a href="#">点击播放</a></p>
</li>
<li>
<p><img src="images/gamepic3.jpg" alt="" /></p>
<h3>BPT,联结世界的智慧</h3>
<p><a href="#">点击播放</a></p>
</li>
<li>
<p><img src="images/bpt.jpg" alt="" /></p>
<h3>BPT,联结世界的智慧</h3>
<p><a href="#">点击播放</a></p>
</li>
<li class="last">
<p><img src="images/bpt.jpg" alt="" /></p>
<h3>BPT,联结世界的智慧</h3>
<p><a href="#">点击播放</a></p>
</li>
</ul>
</div>
<!-- 产品区域结束 -->
<!-- 新闻与招聘区域开始 -->
<div class="maincon">
<div class="news">
<ul>
<li><a href="#" class="title">博雅互动出席“TOP棋牌智力游戏联盟”启动仪式</a><span class="date">02/23</span></li>
<li><a href="#" class="title">博雅互动出席“TOP棋牌智力游戏联盟”启动仪式</a><span class="date">02/23</span></li>
<li><a href="#" class="title">博雅互动出席“TOP棋牌智力游戏联盟”启动仪式</a><span class="date">02/23</span></li>
<li><a href="#" class="title">博雅互动出席“TOP棋牌智力游戏联盟”启动仪式</a><span class="date">02/23</span></li>
</ul>
</div>
<div class="jobs">
<div class="more2">
<a href="#"><img src="images/more2.png" alt="" /></a>
</div>
<div class="jobstit">
<h2>专场招聘</h2>
<p>BOYAA JOBS</p>
</div>
<div class="joblist">
<h3>专场招聘岗位:</h3>
<ul>
<li>PHP开发工程师</li>
<li>C++开发工程师</li>
<li>WEB前端开发工程师</li>
<li>大数据开发工程师</li>
</ul>
</div>
</div>
</div>
<!-- 新闻与招聘区域结束 -->
</div>
<!-- 内容区结束 -->
<div class="footer">
<div class="top"><a href="#"></a></div>
</div>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/ldq678/boya_interactive_css_layout.git
[email protected]:ldq678/boya_interactive_css_layout.git
ldq678
boya_interactive_css_layout
博雅互动css布局
master

搜索帮助