博雅互动(静态网页)分享

前端学习—博雅互动(静态网页)代码文件分享

效果图

代码分享

<!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;border: none;}.header{width: 100%;height: 58px;background-color: #191d3a;}.inner_c{width: 1000px;margin: 0 auto;}.header .logo{float: left;margin-left: 20px;}.header .nav{width: 517px;overflow: hidden;line-height: 58px;float: left;}.header .nav ul{list-style: none;}.header .nav ul li{float: left;width: 85px;border-right: 1px solid #252947;text-align: center;}.header .nav ul li.first{border-left: 1px solid #252947;}.header .nav ul li a{display: block;font: 14px/58px "微软雅黑";color: #818496;text-decoration: none;}.header .nav ul li a:hover{color: #e2e4e2;background-color: #252947;}.header .nav ul li a.current{color: #e2e4e2;background-color: #252947;}.header .jrwm{float: left;line-height: 58px;margin-left: 120px;padding-top: 7px;}.banner{width: 100%;height:574px;background: url(banner.PNG) repeat-x center center;}.content{margin-top: 50px;}.content .shows{height: 229px;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:hover{float: left;width: 218px;height: 229px;margin-right: 43px;text-align:center;background: #6c6e7e;}.content .shows ul li.last{width: 217px;margin-right:0;}.content .shows ul li p img{width: 218px;height: 128px; }.content .shows ul li h3{font: 14px/30px "微软雅黑";font-weight: bold;color : #444866;       }.content .shows ul li p.djbf a{text-decoration:none;font:12px/29px "微软雅黑";color: #38b774;background:url(箭头.PNG) no-repeat right center;padding-right: 30px;}.content .main{margin-top:52px;}.content .main .news{width:480px;height:311px;background: url(moreb.jpg) no-repeat 0px -10px;padding-top:111px;padding-left:20px;float:left;position: relative;}.content .main .news ul {list-style:none;width:461px;}.content .main .news ul li {font:14px/49px "微软雅黑";border-bottom: 1px solid #dbe1e7;overflow:hidden;}.content .main .news ul li .newstit{color:#444866;text-decoration:none;float:left;}.content .main .news ul li .date{float:right;color:#afbecf;font-size:12px;}.content .main .news ul li a:hover{color:#38b774;}.content .main .news .more1{position: absolute;top: 40px;left: 218px;width: 79px;height: 39px;background: url(more1.PNG);}.content .main .news .more1:hover{position: absolute;top: 40px;left: 218px;width: 79px;height: 39px;background: url(more2.PNG);}.content .jobs{width:500px;height:311px;background:url(moregb.jpg) no-repeat top left;float:left;position: relative;}.content .jobs .jobslist ul li{font:14px/37px "微软雅黑";border-bottom:1px solid #6fdea3;}.content .jobs .jobstit{padding-top: 40px;padding-left: 80px;}.content .jobs .jobstit h2{font-size: 24px;font-family: "微软雅黑";color: #fff;}.content .jobs .jobstit p{font: 14px/23px "微软雅黑";color: #fff;}.content .jobs .jobslist{width: 305px;margin-top: 22px;padding-left: 20px;}.content .jobs .jobslist .more2{position: absolute;top: 40px;left: 200px;width: 79px;height: 39px;background: url(more2.png);}.content .jobs .jobslist .more2:hover{position: absolute;top: 40px;left: 200px;width: 79px;height: 39px;background: url(more1.png);}.content .jobs .jobslist h3{font: 14px/20px "微软雅黑";color: #fffbde;}.content .jobs .jobslist ul{list-style: none;}.content .jobs .jobslist ul li {font: 14px/37px "微软雅黑" #fffbde;border-bottom: #6fdea3;}.content .jobs .jobslist ul li a{color: #fffbde;text-decoration: none;}.backtop{width: 68px;height: 29px;position:fixed;right: 14px;bottom: 74px;}.backtop a{display: block;height: 29px;width: 68px;background: url(top.PNG) no-repeat 0 -40px ;}.backtop a:hover{background: url(top.png) no-repeat 0  0  ;}.footer{width: 100%;height: 150px;background-color: #444866;margin-top: 500px;}.footer p{width: 1000px;height: 50px;line-height: 50px;margin: 0 auto;font-size: 12px;}.footer img{float: right;width: 40px;height: 40px;margin-right: 235px;margin-top: 5px;}.footer a{text-decoration: none;list-style: none;color: #6c6e7e;}.footer .a1 a:hover{color: #fff;}.footer p{color: #6c6e7e;}.footer span{width: 100px;height: 40px;padding-right: 10px;margin-right: 5px;}.footer .e1{border-right: 1px #6c6e7e solid;}</style>
</head>
<body><!-- header开始 --><div class="header"><div class="inner_c"><div class="logo"><a href="#"><img src="logo.PNG"></a></div><!-- 导航条开始 --><div class="nav"><ul><li class="first"><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="加入我们.PNG"></a></div></div></div><!-- header结束 --><div class="banner"></div><!-- 内容区开始 --><div class="content inner_c"><!-- 游戏展播开始 --><div class="shows"><ul><li><p><a href="#"><img src="img1.PNG"></a></p><h3>博雅互动2020梅州助学行</h3><p class="djbf"><a href="#">点击播放</a></p></li><li><p><a href="#"><img src="img2.PNG"></a></p><h3>云南高校赛回顾</h3><p class="djbf"><a href="#">点击播放</a></p></li><li><p><a href="#"><img src="img3.PNG"></a></p><h3>成都麻将采访</h3><p class="djbf"><a href="#">点击播放</a></p></li><li class="last"><p><a href="#"><img src="img4.PNG"></a></p><h3>成都麻将公益赛回顾</h3><p class="djbf"><a href="#">点击播放</a></p></li></ul></div><!-- 游戏展播结束 --><!-- 新闻和招聘模块开始 --><div class="main"><div class="news"><ul><li><a href="#" class="newstit">博雅互动2020年度业绩</a><span class="date">3/25</span></li><li><a href="#" class="newstit">喜讯|博雅互动荣获2020鲸鸣奖“十佳出海品牌”</a><span class="date">12/25</span></li><li><a href="#" class="newstit">博雅互动2020年第三季度业绩</a><span class="date">11/26</span></li><li><a href="#" class="newstit">博雅互动2020年中期业绩</a><span class="date">8/27</span></li></ul><div class="more1"></div></div><div class="jobs"><div class="jobstit"><h2>专场招聘</h2><p>BOYAA JOBS</p></div><div class="jobslist"><h3>专场招聘岗位</h3><ul><li><a href="#">PHP开发工程师</a></li><li><a href="#">C++开发工程师</a></li><li><a href="#">LUA开发工程师</a></li><li><a href="#">大数据开发工程师</a></li></ul><div class="more2"></div></div></div></div><!-- 新闻和招聘模块结束 --></div><!-- top --><div class="backtop"><a href="#"></a></div><div class="footer"><p class="a1"><span class="e1"><a href="#">网站地图</a></span><span class="e1"><a href="#">免责声明</a></span><span><a href="#">举报监督</a></span></p><p>Copyright © 2004 - 2019 博雅互动(Boyaa Interactive)<a href="#">粤ICP备05062536号 <a href="http://szcert.ebs.org.cn/3a08cc75-94e5-4d0c-b6ae-92a13a947618"><img src="jlogo.gif" alt=""></a></a></p><p>网络文化经营许可证：粤网文<a href="#">[2015]1991-405号</a> | 互联网出版许可证：新出网证（粤）字062号 | 增值电信业务经营许可证：粤B2-20110513</p></div></body></html>

博雅互动(静态网页)分享相关推荐

写网页设计与制作的博雅互动的作业
Web 页面设计和制作是一门技术性的工作,需要掌握一些相关的知识和技能.首先,你需要熟悉 HTML 和 CSS 这两种语言,以便能够构建出网页的框架和样式.其次,你也可以使用 JavaScript 等 ...
【2016.12.09】博雅互动网页布局
1.html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
博雅互动：德州扑克，全球挣钱
博雅互动:德州扑克,全球挣钱 2012-7-10 12:07:00 浏览数(425) 分享到:QQ空间新浪微博人人网腾讯微薄这是一家典型的招风险投资喜欢的公司:三年前,公司只有5个人,CEO张伟和核 ...
通过HTML和CSS设计一个静态网页（练习实例，附完整代码）
本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web 网页原址:博雅互动 <!DOCTYPE html> <html la ...
Freemarker入门小案例（生成静态网页的其中一种方式）
其实生成静态网页的方式有好多种,我昨天看了一下,Freemarker是其中一种,但是Freemarker现在我们都用得比较少了,现在用得ActiveMQ用来发送信息到静态页面,不过想了一下这个小东西, ...
abv asp是静态网页吗_2019年seo动态网页优化“指南针”
相信那些SEO优化的那些朋友们,肯定还在一股脑的想着如何让自己的网站安静下来,他们都把这一点列入了重中之重的位置.傲马创新营销培训专家不赞成此观点,网站页面是动态还是静态,根据网站实际目的需求来确定就 ...
请在贵网站的根目录下部署一个文件_使用 github pages, 快速部署你的静态网页
使用 github pages, 快速部署你的静态网页 Github Pages 官网 Github Pages: Websites for you and your projects. Hosted ...
静态网页托管_求职季，教你制作一份精美的在线网页简历，程序员必看！！
引言近期和学弟交流了一下找实习的相关的话题,谈到了简历这块.虽然近期没有找工作的打算,但还是会不定期的更新自己的简历. 于是将自己的简历分享了一下,没想到得到了这样的评价,心里还是挺高兴的. 简历的 ...
Linux 创建网页服务,Linux使用Node.js建立访问静态网页的服务实例详解
Linux使用Node.js建立访问静态网页的服务实例详解一.安装node.js运行所需要的环境,: 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.j ...

博雅互动(静态网页)分享

前端学习—博雅互动(静态网页)代码文件分享

博雅互动(静态网页)分享相关推荐

最新文章

热门文章