欢迎光临
我的个人博客网站

某雅互动静态页面


页面展示

某雅互动静态页面

页面大多是自己仿着写的,图片也是从官网上爬的。

相关代码

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 {                 overflow: hidden;                 height: 58px;                 background: #191d3a;             }             .inner-c {                 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 class="wrapper">                 <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>                     <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>网站地图&nbsp;&nbsp;|&nbsp;&nbsp;免责声明&nbsp;&nbsp;|&nbsp;&nbsp;监督举报</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>  

资料下载

download

赞(0) 打赏
未经允许不得转载:张拓的天空 » 某雅互动静态页面
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏