- A+
所属分类：Web前端
页面展示
页面大多是自己仿着写的，图片也是从官网上爬的。
相关代码
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="某雅互动静态页面" alt="" /> <h5>博雅东东</h5> <p><a href="#">点击播放</a></p> </li> <li> <img src="cdmjcf.png" alt="某雅互动静态页面" alt="" /> <h5>博雅东东</h5> <p><a href="#">点击播放</a></p> </li> <li> <img src="cdmjgyshg.png" alt="某雅互动静态页面" alt="" /> <h5>博雅东东</h5> <p><a href="#">点击播放</a></p> </li> <li> <img src="bygy.jpg" alt="某雅互动静态页面" 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>网站地图 | 免责声明 | 监督举报</p> <p>Copyright © 2004 - 2020 博雅互动(Boyaa Interactive)粤ICP备05062536号</p> <p>网络文化经营许可证：粤网文[2015]1991-405号 | 互联网出版许可证：新出网证（粤）字062号 | 增值电信业务经营许可证：粤B2-20110513 <img src="govIcon.gif" alt="某雅互动静态页面" alt=""></p> </div> </div> </body> </html> 
