當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
关于动态门户WEB博雅互动的源代码（HTML+CSS+javascript）
生活随笔
收集整理的這篇文章主要介紹了
关于动态门户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）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bzoj 2962 序列操作
- 下一篇： 九宫格抽奖