html css 的页面切图

最新推荐文章于 2023-04-17 22:01:52 发布

andyliu

最新推荐文章于 2023-04-17 22:01:52 发布

阅读量1.4k

点赞数

分类专栏： html+css 文章标签： html css class div url float

本文链接：https://blog.csdn.net/liushuai_andy/article/details/7357428

版权

html+css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<html><head></head>
<style>
*{margin:0;padding:0;list-style:none;}
#tab, #tab li a:hover{background:url(ding.png) no-repeat;z-index:10}
#tab{width:760px;height:42px;}
#tab li{float:left;}
#tab .l1 a{display:block;width:100px;height:42px;}
#tab .l1 a:hover{background-position:0px -42px;}

#tab .l2 a{display:block;width:100px;height:43px;}
#tab .l2 a:hover{background-position:-100px -43px;}

#tab .l3 a{display:block;width:100px;height:43px;}
#tab .l3 a:hover{background-position:-200px -43px;}

#tab .l4 a{display:block;width:90px;height:43px;}
#tab .l4 a:hover{background-position:-300px -43px;}

#tab .l5 a{display:block;width:90px;height:43px;}
#tab .l5 a:hover{background-position:-390px -43px;}

#tab .l6 a{display:block;width:100px;height:43px;}
#tab .l6 a:hover{background-position:-480px -43px;}

#tab .l7 a{display:block;width:90px;height:43px;}
#tab .l7 a:hover{background-position:-580px -43px;}

#tab .l8 a{display:block;width:90px;height:43px;}
#tab .l8 a:hover{background-position:-670px -43px;}

#tabTask {background:url(wu.png) no-repeat;}
#tabTask{width:760px;height:240px;}
#tabTask li{float:left;}
#tabTask a{display:block;margin-top:60px;width:150px;height:181px;}

.main {width:760px;height:100px;}
.logo {width:760px;height:50px;}
.logo_left {width:100px;height:43px;margin-bottom:-43px !important;background:url('logo.png') no-repeat;}
.logo_right {width:89px;height:73px;margin-left:630px;margin-bottom:-20px; background:url('xing.png') no-repeat;}
.menu {position:relative;width:760;height:50px;z-index:100}
</style>
<body>
   
   <div class = "main">
       
       <div class = "logo">
           <div class="logo_left" ></div>
           <div class="logo_right"></div>


           
       </div>
       
       <div class = "menu">
           <ul id="tab">
               <li class="l1"><a href="1"></a></li>
               <li class="l2"><a href="2"></a></li>
               <li class="l3"><a href="3"></a></li>
               <li class="l4"><a href="4"></a></li>
               <li class="l5"><a href="5"></a></li>
               <li class="l6"><a href="6"></a></li>
               <li class="l7"><a href="7"></a></li>
               <li class="l8"><a href="8"></a></li>
           </ul>
       </div>
       
       <div>
           <ul id="tabTask">
               <li class="l1"><a href="1"></a></li>
               <li class="l2"><a href="2"></a></li>
               <li class="l3"><a href="3"></a></li>
               <li class="l4"><a href="4"></a></li>
               <li class="l5"><a href="5"></a></li>
           </ul>
       </div>
   </div>
</body>
</html>