关于动态门户WEB博雅互动的源代码(HTML+CSS+javascript)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>博雅互动</title><link rel="stylesheet" href="./CSS/index.css"></head> <body><div class = "box"><div class = "nav"><span><a href="http://www.boyaa.com"><img src="./images/logo.png"></a></span><ul><li class = "frist"><a href="#">首页</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><li class = "last"><img src="./images/jrwm.png"></li></ul></div></div><div class = "banner"><img src="./images/banner1.jpg" alt="" name = "banner"></div><div class = "bpt"><div><img src="./images/bpt1.jpg" alt=""><p align = "center">BPT宣传片</p><p align = "center"><a href="#">点击播放</a></p></div><div><img src="./images/bpt2.jpg" alt=""><p align = "center">博雅互动宣传视频</p><p align = "center"><a href="#">点击播放</a></p></div><div><img src="./images/bpt3.jpg" alt=""><p align = "center">斗地主</p><p align = "center"><a href="#">点击播放</a></p></div><div class="bptlast"><img src="./images/bpt4.jpg" alt="" class="imglast"><p align = "center">德州扑克</p><p align = "center"><a href="#">点击播放</a></p></div></div> <!--博雅新闻开始--> <div class= "new"><div class = "newone"><img src="./images/bynewsbg.jpg" alt=""><ul><li><script type="text/javascript">var today = new Date();var y = today.getFullYear();var m = today.getMonth()+1;document.write(y+"/"+m)</script> <a href="http://www.gdzsxx.com/news/dx/201612/106161.html"><strong>第三届宠物文化节在华南农业大学正式落幕</strong></a></li><li><script type="text/javascript">var today = new Date();var y = today.getFullYear();var m = today.getMonth()+1;document.write(y+"/"+m)</script> <a href="http://gd.people.com.cn/n/2015/0122/c123932-23644282.html"><strong>杂交水稻之父袁隆平院士两度光临华农</strong></a></li><li><script type="text/javascript">var today = new Date();var y = today.getFullYear();var m = today.getMonth()+1;document.write(y+"/"+m)</script> <a href="https://idol001.com/news/liyifeng/detail/54fd09997a1173350e8b49ba"><strong>李易峰,何炅《栀子花开》在华南农业大学取景</strong></a></li><li><script type="text/javascript">var today = new Date();var y = today.getFullYear();var m = today.getMonth()+1;document.write(y+"/"+m)</script> <a href="http://hi.people.com.cn/n2/2016/0904/c231182-28944338.html"><strong>科比,库里在华南农业大学田家炳训练场</strong></a></li><li class=" last"><a href=""><img src="./images/more.png" alt=""></a></li></ul></div><div class = "newtwo"><img src="./images/zczp.jpg" alt=""><div><ul><li><img src="./images/zczp.png" alt=""></li><li class = "IMG2"><img src="./images/more2.png" alt=""></li></ul></div><div class="zp"><ol><li><strong>专场招聘岗位</strong></li><li><a href="">PHP开发工程师</a></li><li><a href="">WEB前端开发工程师</a></li><li><a href="">JAVA开发工程师</a></li><li><a href="">IOS开发工程师</a></li></ol></div></div></div> <!-- 1、图片轮播函数 开始定义--><script>var imgObjet = document.images[2];console.log(imgObjet);setInterval(imgplay, 2000);var i =2;function imgplay(){imgObjet.src ="./images/banner"+i+".jpg";i++;if(i>4){i = 1} }</script><!-- 底部收尾栏开始 --><div class = "bottom"><div class = "botone"><ul><font color="#ffffff"><li>网站地图 | 免责声明</li><li>Copyright®2017-2030博雅互动(Boyaa Interactive)粤ICP备999999号 增值电信业务许可证</li></font><li><img src="./images/govIcon.gif" alt="" width="60" height="85"></li></ul></div></div></body> </html>
*{margin:0px;padding:0px; } /* 清除HTML样式 */ a{text-decoration: none;color:#b12ff2; } a:hover{text-decoration: underline;color: #4d90fe; } .box{width:100%;height:58px;border:1px solid;background-color: #191d3a;position: fixed;z-index: 3px; } .nav span {float: left;margin-right: 60px; } .nav {width:1248px;height:58px;margin:0 auto;} .nav li{list-style-type: none;float: left;width: 100px;height: 58px;line-height: 58px;text-align: center;border-right: 2px solid #252947; } .nav .frist{border-left: 2px solid #252947;background-color: #252947;} .nav .last{padding-left: 48px;padding-top: 12px;border-right: 0px;} /* 图片轮播栏开始 */ .banner{width:100%;height:463px; padding-top: 58px;} .bpt{width: 1050px;height: 230px;margin:0 auto;margin-top: 50px;border-bottom: 1px solid #dbe1e7; } .bpt div{display: inline-block;margin-right: 43px;height:230px; } .bpt div img{width:218px;height: 130px } .bpt div .imglast{width:217px; }.bpt a{color:#38b774;font-weight: bold; } /* 图片轮播栏结束 */ /* 博雅新闻开始 */ .new {width:1000px;height: 310px;margin:12px auto; } .newone{width:500px;height: 310px;display:inline-block; } .newtwo{width:500px;height: 310px;position: relative;left: 500px;bottom: 507px; } .newone li{display: block;width:500px;height: 40px;line-height: 40px;list-style-type: none;position: relative;bottom: 165px;left:20px;border-bottom: 1px solid #dbe1e7; } .newone .last{border-bottom: none;position: relative;left:220px;bottom: 440px; } .newtwo li{list-style-type: none;position: relative;left:100px;bottom: 275px;} .newtwo .IMG2{position: relative;left:250px;bottom: 325px; } .zp{position: relative;right: 80px;bottom: 20px; } .zp li{width: 350px;height: 37px;line-height: 37px;border-bottom: 1px solid #ffffff;} .zp a{color: #ffffff;} /* 博雅新闻结束 */ /* 底部栏开始 */ .bottom{width: 100%;height: 130px;background-color: #191d3a;margin-top: 130px; } .botone{width: 1000px;height: 130px;margin:0 auto; } .botone li{list-style-type: none;float: left;height: 91px;line-height: 130px;margin-right: 35px;} .botone img{margin-top: 20px; }
预览图:(因为谷歌浏览器不支持全屏保存图片,因此用的是360浏览器打开,可能一些字体存在兼容性的问题,望忽略!)
转载于:https://www.cnblogs.com/jiangliang520/p/7681101.html
关于动态门户WEB博雅互动的源代码(HTML+CSS+javascript)相关推荐
- web前端期末大作业 html+css+javascript 校园主题(东北大学8页)网页设计实例 代码质量高...
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能满足你的需求 ...
- HTML5期末大作业:漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码 常见网页设计作业题材有 个 ...
- HTML5期末大作业:旅行网站设计——开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例
HTML5期末大作业:旅行网站设计--开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- 网页设计作业 开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例
HTML5期末大作业:旅行网站设计--开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
- web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
- web前端实训作业 html+css+javascript 水果网页设计实例 企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...
- web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作...
web前端期末大作业 html+css+javascript 酒庄网页设计实例(5个页面)~学生网页设计制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- HTML5期末大作业:汽车主题网页设计——21 汽车租赁(47页) HTML+CSS+JavaScript web前端期末大作业 html+css+javascript网页设计实例 企业网站制作
HTML5期末大作业:汽车主题网页设计--21 汽车租赁(47页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设 ...
- web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 (绿色植物网站设计)...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
最新文章
- 浅谈树形结构的特性和应用(上):多叉树,红黑树,堆,Trie树,B树,B+树......
- python 图像计算方位角
- 【Ansible 文档】【译文】模式
- 【转】大型网站系统架构演化之路
- mybatis+spring+c3p0+maven+ehcache
- Vue.js 极简小例: 点击事件
- 养鸡农场小程序游戏京东拼多多优惠券附近商家流量主购物源码-修复登录接口
- 学计算机的专属表白方式,九个学科专属表白句子-花式表白公式【蜜匠婚礼】...
- doxygen 无法生成图片_设计稿智能生成代码如何识别组件?Imgcook 3.0 解析
- 渗透测试工程师面试题大全(二)
- pygame实现找方块(色彩敏感度测试)游戏
- 液压缸移动负载分析(液压系统基础)
- ThinkPHP6+swoole+easywechat使用教程
- P1216 数字金字塔
- SpringBoot+Mybatis+Elasticsearch 实现模糊分页查询并标记关键字
- The ST Intranet updater server is unknown:mcucrossselector.codex.cro.st.com
- 天天生鲜项目——注册页面
- 单片机无线调频发射器的设计
- HCIP-H12-221单选题库(4)
- Clover双系统卸载黑苹果和Clover引导