html写有道页面

来源：互联网发布：linux 如何查看用户数编辑：程序博客网时间：2024/05/24 02:13
<!DOCTYPE html><html><head><title>interface</title></head><style>*{margin:0;padding: 0px;}#Maininter{box-shadow: 1px 2px 4px #D7D7D7;border:1px solid #272727;height: 608px; width: 785px;position: relative;left:30px;top:30px; }#Caption{background-color: rgba(134,42,119,1);height: 61px;width: 785px;position: absolute;left: 0px;top:0px;}#SideBar{width: 135px;height:547px;border-right: 3px solid #ECEDED;position: absolute;top:61px;left: 0px; }#function{width: 135px;height: 200px;}#function a{width: 135px;height: 40px;border-left: 2px solid #ECEDED;position: absolute;left: 0px;}#function a img{position: absolute;left:10px;top:5px;}#function span{position: absolute;right: 20px;top:8px;}#looword{position: absolute;top:0px;}#translate{position: absolute;top:40px;}#example{position: absolute;top:80px;}#encyclopedia{position: absolute;top:120px;}#Content{height: 547px;width:650px;position: absolute;top:60px;left:135px;border: none; }#Scroll{height: 189px;width: 647px;position: absolute;top:0px;left: 3px; border-bottom:1px solid #888F92;}#Softname{width:100px; position: absolute;left: 18px;top:16px;font-family:'YouYuan',"仿宋", "DFKai-SB",sans-serif,Helvetica, Tahoma, Arial, serif;font-weight: bold;color: #FFFFFF;font-style: italic;}#Back{}#Forward{}#Search{width: 310px;height: 33px;background-color: #FFFFFF;border:1px solid #FFFFFF;position: absolute;left:213px;top:12px;border-radius: 30px;}#lookforw{position: absolute;right: 10px;top:5px;}#Miniature{position: absolute;right: 140px;top:20px;}#Narrow{position: absolute;right: 100px;top:20px;width: 27px;height: 17px;}#Broaden{position: absolute;right: 60px;top:20px;width: 27px;height: 17px;}#Closethis{position: absolute;right: 20px;top:20px;width: 27px;height: 17px;}#Ofunction{width: 130px;height: 345px;position: absolute;top:210px;}#Ofunction a{width: 130px;height: 40px;position: absolute;}#wordbook{position: absolute;top:0px;left:1px;}#tranAi{position: absolute;top:40px;left:0px;}#lesson{position: absolute;top:80px;}#set{position: absolute;top:120px;}#satisfaction{position: absolute;top:160px;}#Ofunction a img{position: absolute;left:10px;top:5px;}#Ofunction span{position: absolute;right: 20px;top:8px;}#lunbo ul li{list-style: none;}#lunbo ul li:not(:first-child){display: none;}#Information{position: absolute;top:189px;left:1px;width: 647px;height: 480px;}#Information a{width: 647px;height: 80px;}#Information a img{position: absolute;left:4px;top:2px;}#Information span{ position: absolute;left:120px; top:26px;}.olds{position: absolute;top:0px;}.study{position: absolute;top:120px;}.value{position: absolute;top:240px;}.tarons{position: absolute;top:360px;}       .scrollbar{        overflow-x: hidden; overflow-y:auto;    }    .scrollbar div {        width:400px;        height:400px;    }        .scrollbar::-webkit-scrollbar {        width:10px;        height:10px;    }   .scrollbar::-webkit-scrollbar-track     {        background:#EFF3F5;    }   .scrollbar::-webkit-scrollbar-track-piece {        background:#BDC1C4;    }    .scrollbar::-webkit-scrollbar-thumb{        background:#862A77;        border-radius:10px;    }    .scrollbar::-webkit-scrollbar-corner {        background:#82AFFF;    }    .scrollbar::-webkit-scrollbar-resizer  {        background:#FF0BEE;    }</style><body>     <div id="Maininter">           <div id="Caption">                  <h2 id="Softname">有道词典</h2>                  <a id="Bcak"></a>                  <a href="Forward"></a>                  <a id="Search"><img id="lookforw" src="img/search.png" alt=""></a>                  <a id="Miniature" ><img src="img/mini5.png"></a>                  <a id="Narrow"><img src="img/narrow.png"></a>                  <a id="Broaden"><img src="img/broaden.png" alt=""></a>                  <a id="Closethis"><img src="img/close.png" alt=""></a>           </div>                      <div id="SideBar">                  <div id="function">                       <a id="looword" ><img src="img/searc.png" alt=""><span>查词</span></a>                       <a id="translate"><img src="img/tran.png" alt=""><span>翻译</span></a>                       <a id="example"><img src="img/eco.png" alt=""><span>例句</span></a>                       <a id="encyclopedia"><img src="img/eclo.png" alt=""><span>百科</span></a>                  </div>                  <div id="limit">                    <hr/ style="width: 80px;position: absolute;left: 26px;">                  </div>                  <div id="Ofunction">                       <a id="wordbook"><img src="img/bool.png" alt=""><span>单词本</span></a>                       <a id="tranAi"><img src="img/traai.png" alt=""><span>人工翻译</span></a>                       <a id="lesson"><img src="img/gond.png" alt=""><span>精品课</span></a>                       <a id="set"><img src="img/set.png" alt=""><span>设置</span></a>                       <a id="satisfaction"><img src="img/good.png" alt=""><span>满意度</span></a>                  </div>           </div>           <div id="Content" class="scrollbar" >               <div id="Scroll">                   <div id="lunbo">                      <ul>                         <li><img src="img/Shakespeare.png"></li>                         <li><img src="img/readb.png"></li>                      </ul>                   </div>     <script type="text/javascript">    var li=document.getElementById('lunbo').getElementsByTagName("li");    var img=0;    var len=li.length;    setInterval(function(){        li[img].style.display="none";        img=++img==len?0:img;        li[img].style.display="inline-block";    },3000);</script>                             </div>                              <div id="Information">                   <a class="olds"><img src="img/faf.png" alt=""><span>老外也追双十一却深陷商家“剁手”骗局，马云你不管管？</span></a>                   <a class="study"><img src="img/gg.png" alt=""><span>每天5分钟，甩掉字幕追美剧></span></a>                   <a class="value" ><img src="img/gfhd.png" alt=""><span>近义词辨析| invaluable和valueless究竟有什么区别？</span></a>                   <a class="tarons" ><img src="img/tjhf.png" alt=""><span>【干货】一套漫画帮你搞定6000词 >></span></a>               </div>           </div>     </div></body></html>
阅读全文
0 0