仿写练习-京东商城导航条

纯CSS版

注意节点之间的继承关系：

style：

.topmenu dl:hover .subdiv
{
    display:block;
}

body：

<ul class="topmenu">
    <dl>
    <li><a href="#">图书、音像、数字商品</a></li>
    <div class="subdiv">
        hhhhhhhhhhhhhhhhhhhhhh<br />
        hhhhhhhhhhhhhhhhhhhhhh<br />
        hhhhhhhhhhhhhhhhhhhhhh<br />
        hhhhhhhhhhhhhhhhhhhhhh<br />
        hhhhhhhhhhhhhhhhhhhhhh<br />     
    </div></dl>

意为：subdiv的父节点为topmenu下的dl 且只有在hover的时候才能满足这个关系。

 

之前写作.topmenu a:hover.subdiv 本意是在鼠标移动到链接上的时候显示模块，其中的问题：

首先 subdiv并没有被包含在a标签内，不满足父子关系；

另外a标签中写入列表后：

<ul class="topmenu">
    <li><a href="#">图书、音像、数字商品
    <div class="subdiv">
        hhhhhhhhhhhhhhhhhhhhhh<br />
        hhhhhhhhhhhhhhhhhhhhhh<br />
        hhhhhhhhhhhhhhhhhhhhhh<br />
        hhhhhhhhhhhhhhhhhhhhhh<br />
        hhhhhhhhhhhhhhhhhhhhhh<br />    
    </div></a></li>

鼠标移上链接后可以显示subdiv模块 但subdiv中的text会被直接加上a标签 并且因为链接和模块之间的距离导致无法选择subdiv中的内容

贴上完整链接 subdiv还未完全完成 之后有时间再补上。

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 
  7 <style type="text/css">
  8 body
  9 {
 10     font-size:10pt;
 11     padding:0;
 12     line-height:1.5;
 13 }
 14 .toptitle
 15 {
 16     padding:0px;
 17     height:50px;
 18     line-height:50px;
 19     font-size:11pt;
 20     background-color:#C30;
 21     font-weight:bold;
 22     color:white;
 23     text-align:left;
 24     width:224px;
 25     padding-left:20px;
 26 
 27 }
 28 .topmenu
 29 {
 30     display:block;
 31     font-size:11pt;
 32     border:2px solid #C30;
 33     padding:0;
 34     width:220px;
 35     padding-left:20px;
 36 
 37     margin:0;    
 38 }
 39 .topmenu li
 40 {
 41     height:30px;
 42     line-height:30px;
 43     list-style-type:none;
 44     background-image:url(0.png);
 45     background-repeat:no-repeat;
 46     background-position:right;
 47     padding-left:0;
 48 }
 49 .topmenu li:hover
 50 {
 51     background-image:none;
 52     border:1px solid #DDD;
 53     border-right:0;
 54     border-left:0;
 55     box-shadow:0 0 8px #DDD;
 56     -moz-box-shadow:0 0 8px #DDD;
 57     padding-left:0;
 58 }
 59 .topmenu li a
 60 {
 61     text-decoration:none;
 62     color:#003;
 63 }
 64 .topmenu li a:hover
 65 {
 66     text-decoration:underline;
 67     color:#C30;
 68     font-weight:bold;
 69     font-size:12pt;
 70 }
 71 .subdiv
 72 {
 73     display:none;
 74     position: absolute;
 75     width: 715px;
 76     left: 228px;
 77     top: 60px;
 78     border: 1px solid #DDD;
 79     background-color: white;
 80 }
 81 .topmenu a:hover .subdiv
 82 {
 83     display:block;
 84 }
 85 </style>
 86 </head>
 87 
 88 <body>
 89 <div class="toptitle">全部商品分类</div>
 90 <ul class="topmenu">
 91 
 92     <li><a href="#">图书、音像、数字商品
 93     <div class="subdiv">
 94         hhhhhhhhhhhhhhhhhhhhhh<br />
 95         hhhhhhhhhhhhhhhhhhhhhh<br />
 96         hhhhhhhhhhhhhhhhhhhhhh<br />
 97         hhhhhhhhhhhhhhhhhhhhhh<br />
 98         hhhhhhhhhhhhhhhhhhhhhh<br />
 99         
100     </div></a></li>
101     <li><a href="#">家用电器</a></li>
102     <li><a href="#">手机、数码、京东通信</a></li>
103     <li><a href="#">电脑、办公</a></li>
104     <li><a href="#">家居、家具、家庭、厨具</a></li>
105     <li><a href="#">男装、女装、内衣、珠宝</a></li>
106     <li><a href="#">个护化妆</a></li>
107     <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
108     <li><a href="#">运动户外</a></li>
109     <li><a href="#">整车、汽车用品</a></li>
110     <li><a href="#">母婴、玩具乐器</a></li>
111     <li><a href="#">食品饮料、酒类、生鲜</a></li>
112     <li><a href="#">营养保健</a></li>
113     <li><a href="#">彩票、旅行、充值、票务</a></li>
114 </ul>
115 </body>
116 </html>

PS：因为是第一次动手写CSS 属性逻辑方面有些混乱 只求效果正确 可读性差 今后要注意

　

posted @ 2014-12-07 21:59  verlen  阅读(246)  评论(0)  编辑  收藏  举报