某雅互动静态页面
页面展示
页面大多是自己仿着写的，图片也是从官网上爬的。
相关代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-size: 12px;
}
body,
ul,
h5,
li {
margin: 0;
padding: 0;
}
/* 头部 */
.header {
height: 58px;
background: #191d3a;
}
.inner-c {
overflow: hidden;
width: 1000px;
margin: 0 auto;
}
.logo {
float: left;
height: 58px;
margin: 0 48px 0 20px;
}
.logo a {
display: block;
width: 157px;
height: 58px;
background-size: contain;
background: url(logo.png) no-repeat center;
text-indent: -9999em;
}
.nav {
float: left;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
width: 87px;
height: 58px;
line-height: 58px;
font: 1.166em/58px 'Microsoft YaHei', 'simhei';
text-align: center;
text-decoration: none;
border-left: 1px solid #252947;
border-right: 1px solid #252947;
color: #818496;
}
.nav .current {
background-color: #252947;
color: #e2e4ed;
}
.jrwm-box {
float: left;
width: 98px;
height: 32px;
margin-left: 10px;
margin-top: 12px;
line-height: 58px;
border: 1px solid #3aca7a;
border-radius: 3px;
background: #38b774;
}
.jrwm {
text-align: center;
line-height: 32px;
}
.jrwm a {
font-size: 1.166em;
color: #fff;
text-decoration: none;
}
.changeLang {
float: right;
line-height: 58px;
}
.changeLang a {
font-size: 14px;
text-align: center;
text-decoration: none;
color: #444866;
}
.changeLang span {
padding-left: 20px;
}
.changeLang a:first-child {
margin-right: 10px;
color: #38b774;
}
/* 通栏 banner */
.banner {
height: 460px;
background: url(banner20200827.jpg) no-repeat center top;
}
/* 主体内容 */
.content {
overflow: hidden;
padding-bottom: 57px;
background: url(indexmainbg.jpg) no-repeat center bottom;
}
/* 上部分 */
.content .product-list {
overflow: hidden;
margin-bottom: 64px;
padding-top: 50px;
list-style: none;
}
.content .product-list li {
float: left;
height: 200px;
margin-right: 42px;
text-align: center;
}
.content .product-list li:last-child {
margin-right: 0;
}
.content .product-list li img {
width: 218px;
}
.content h5 {
padding: 5px 0 10px 0;
font-size: 1.166em;
}
.product-list p {
margin: 0;
}
.product-list p a {
margin: 0;
padding-right: 15px;
text-decoration: none;
background: url(arrow.png) no-repeat right center;
color: #38b774;
}
/* 下部分 */
.wrapper {
/* 清除浮动 */
overflow: hidden;
}
.news {
float: left;
width: 500px;
height: 310px;
background: url(bynewsbg.jpg) no-repeat left -10px;
}
.news-logo {
height: 110px;
}
.news-list {
padding: 0 20px;
list-style: none;
color: #44487f;
}
.news-list li {
overflow: hidden;
height: 29px;
padding: 10px 0;
line-height: 29px;
font-size: 1.166em;
border-bottom: 1px solid #dbe1e7;
}
.news-list li a {
float: left;
/* 字过多时则显示省略号 */
max-width: 415px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.news-list li span {
float: right;
font-size: 12px;
color: #b7bed2;
}
.jobs {
float: left;
width: 500px;
height: 310px;
background: url(byhrbg3.jpg) no-repeat left top;
}
/* 页脚 */
.footer {
height: 190px;
line-height: 50px;
font-size: 12px;
background: #191d3a;
color: #6c6e7e;
}
.footer p {
margin: 0;
}
.footer .inner-c {
padding: 20px 0;
}
.footer p:last-child img {
width: 36px;
height: 50px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="header">
<div class="inner-c">
<div class="logo">
<!-- 将超链接作为logo的布局，里面放入文字（文字可以被SEO） -->
<a href="#">深圳市东方博雅科技有限公司</a>
</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><a href="#">投资者关系</a></li>
</ul>
</div>
<div class="jrwm-box">
<div class="jrwm">
<a href="#">加入我们</a>
</div>
</div>
<div class="changeLang">
<span>
<a href="#" class="on china">中文</a>
<a href="#">EN</a>
</span>
</div>
</div>
</div>
<div class="banner"></div>
<div class="content">
<div class="inner-c">
<ul class="product-list">
<li>
<img src="yngxs.png" alt="" />
<h5>博雅东东</h5>
<p><a href="#">点击播放</a></p>
</li>
<li>
<img src="cdmjcf.png" alt="" />
<h5>博雅东东</h5>
<p><a href="#">点击播放</a></p>
</li>
<li>
<img src="cdmjgyshg.png" alt="" />
<h5>博雅东东</h5>
<p><a href="#">点击播放</a></p>
</li>
<li>
<img src="bygy.jpg" alt="" />
<h5>博雅东东</h5>
<p><a href="#">点击播放</a></p>
</li>
</ul>
<div class="wrapper">
<div class="news">
<div class="news-logo"></div>
<ul class="news-list">
<li>
<a>博雅互动2020年中期业绩</a
><span>10 / 23</span>
</li>
<li>
<a
>博雅互动公布2020第一季度业绩，第一季度收益同期增加约16.1%云云云</a
><span>10 / 23</span>
</li>
<li>
<a
>博雅互动公布2019全年业绩，全年收益约为人民币3.2亿，成功举办</a
><span>10 / 23</span>
</li>
<li>
<a
>博雅互动荣获第九届中国公益节“2019上市公司社会责任奖”</a
><span>10 / 23</span>
</li>
</ul>
</div>
<div class="jobs"></div>
</div>
</div>
</div>
<div class="footer">
<div class="inner-c">
<p>
网站地图 | 免责声明 | 监督举报
</p>
<p>
Copyright © 2004 - 2020 博雅互动(Boyaa
Interactive)粤ICP备05062536号
</p>
<p>
网络文化经营许可证：粤网文[2015]1991-405号 |
互联网出版许可证：新出网证（粤）字062号 |
增值电信业务经营许可证：粤B2-20110513
<img src="govIcon.gif" alt="" />
</p>
</div>
</div>
</body>
</html>
