關於動態門戶WEB博雅互動的原始碼(HTML+CSS+javascript)

來源:互聯網
上載者:User

標籤:isp   copy   script   bottom   cti   jpg   today   head   門戶   

<!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"  name = "banner">    </div>    <div class = "bpt">        <div>            <img src="./images/bpt1.jpg" ><p align = "center">BPT宣傳片</p><p align = "center"><a href="#">點擊播放</a></p>        </div><div>            <img src="./images/bpt2.jpg" ><p align = "center">博雅互動宣傳視頻</p><p align = "center"><a href="#">點擊播放</a></p>        </div><div>            <img src="./images/bpt3.jpg" ><p align = "center">鬥地主</p><p align = "center"><a href="#">點擊播放</a></p>        </div><div class="bptlast">            <img src="./images/bpt4.jpg"  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" >    <ul>        <li><script type="text/javascript">            var today = new Date();            var y = today.getFullYear();            var m = today.getMonth()+1;            document.write(y+"/"+m)        </script>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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" ></a></li>    </ul>    </div>    <div class = "newtwo"><img src="./images/zczp.jpg" >            <div>                <ul>                <li><img src="./images/zczp.png" ></li>                <li class = "IMG2"><img src="./images/more2.png" ></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&reg;2017-2030博雅互動(Boyaa Interactive)粵ICP備999999號 增值電信業務許可證</li>                </font>                <li><img src="./images/govIcon.gif"  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;}

 預覽圖:(因為Google瀏覽器不支援全屏儲存圖片,因此用的是360瀏覽器開啟,可能一些字型存在相容性的問題,望忽略!)

關於動態門戶WEB博雅互動的原始碼(HTML+CSS+javascript)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.