html写有道页面

最新推荐文章于 2024-08-20 11:38:38 发布
原创最新推荐文章于 2024-08-20 11:38:38 发布 · 788 阅读
3 ·
CC 4.0 BY-SA版权
文章标签：
#html5 #css
html5，css3 专栏收录该内容
5 篇文章
订阅专栏
<!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>