-
答案： window.onload = function () { // 編寫JS代碼 var lis=document.getElementsByTagName("li"); for(var i=0; i<lis.length; i++){ lis[i].onmouseover=function(){ this.className="lihover"; } lis[i].onmouseout=function(){ this.className=""; } } }查看全部
-
商城導(dǎo)航j(luò)s查看全部
-
js部分查看全部
-
js 三個知識點(diǎn)的css name命名寫法：查看全部
-
商城分類導(dǎo)航： 兼容ie6:behavior:url(css/csshover.htc);查看全部
-
right:html <div class="sright"> <dl> <dd> <a href="#"> <img src="../img/DD.ico" width="200" height="200" title="點(diǎn)名"/> </a> </dd> <dd> <a href="#"> <img src="../img/GM.ico" width="200" height="200" title="國美"/> </a> </dd> </dl> <dl> <dt>推薦品牌</dt> <dd> <a href="#">美的官方旗艦店</a> </dd> <dd> <a href="#">小熊官方旗艦店</a> </dd> <dd> <a href="#">本草官方旗艦店</a> </dd> </dl> </div> </div> </li> <li><a href="#">圖像</a></li> <li><a href="#">圖像</a></li> <li><a href="#">圖像</a></li> <li><a href="#">圖像</a></li> </ul>查看全部
-
left:html <ul class="menu"> <div class="title"> 全部 </div> <li><a href="#">圖像</a><span></span> <div class="sub"> <div class="sleft"> <dl> <dt> <a href="#">電子書</a> </dt> <dd> <a href="#">免費(fèi)</a> </dd> </dl> <dl> <dt> <a href="#">電子書</a> </dt> <dd> <a href="#">免費(fèi)</a> </dd> </dl> <dl> <dt> <a href="#">電子書</a> </dt> <dd> <a href="#">免費(fèi)</a> </dd> </dl> </div>查看全部
-
css3:(dl標(biāo)簽---友好的搜索引擎結(jié)構(gòu),dl dt dd做二級菜單) .sleft dl dt{ display:block; width:60px; height:22px; line-height:22px; float:left; text-align:right; padding-right:6px; } .sleft dl dt a{ text-decoration:underline; font-weight:bold; font-size:14px; color:#e4393c; } .sleft dl dd{ display:block; overflow:hidden; } .sleft dl dd a{ display:block; float:left; border-left:1px solid #ccc; color:#737373; font-size:12px; padding:0 8px; height:14px; line-height:14px; margin:4px 0; } .sright dl dd{ margin:3px 0; } .sright dl dd a{ color:#ccc; font-size:9px; height:16px; line-height:16px; } .sright dl dd a img{ width:200px; height:100px; } .sright dl dd a:hover{ color:#ccc; font-weight:normal; } .sright dl dt{ color:#e4393c; font-weight:bold; font-size:12px; }查看全部
-
css2: -moz-box-shadow:0 0 8px #ddd; background-image:none; } .sub{ display:none; width:715px; position:absolute; top:40px; left:220px; border:1px solid #ddd; z-index:4; background:#fff; box-shadow:0 0 8px #ddd; -webkit-box-shadow:0 0 8px #ddd; -moz-box-shadow:0 0 8px #ddd; } .sleft{ /*background:gray;*/ float:left; width:490px; margin:5px; } .sright{ float:left; width:200px; margin:5px; } .menu li:hover .sub{ display:block; } .menu li:hover span{ background-color:#fff; display:inline-block; width:20px; height:30px; z-index:20; float:right; position:relative; } .sleft dl{ display:block; border-bottom:1px solid #eee; padding-bottom:6px; overflow:hidden; } .sleft dl dt{ display:block; width:60px; height:22px; line-height:22px; float:left; text-align:right; padding-right:6px; }查看全部
-
兼容ie6：csshover.htc 兼容ie6的補(bǔ)丁文件 *{ padding:0; margin:0; font-size:12px; behavior:url(css/csshover.htc); //csshover.htc 兼容ie6的補(bǔ)丁文件 } .menu{ display:block; width:220px; border:2px solid #e4393c; margin:0; padding:0; } .menu .title{ height:40px; line-height:40px; text-align:left; font-size:12px; font-weight:bold; color:#fff; background-color:#e4393c; padding-left:20px; } .menu li{ height:30px; line-height:30px; list-style-type:none; text-align:left; padding-left:8px; z-index:3; background-image:url(../img/YMX.ico); background-repeat:no-repeat; background-position:right; } .menu li a{ text-decoration:none; color:#313131; } .menu li a:hover{ text-decoration:underline; font-weight:bold; color:#e4393c; } .menu li:hover{ border:1px solid #ddd; border-right:0; box-shadow:0 0 8px #ddd; -webkit-box-shadow:0 0 8px #ddd; -moz-box-shadow:0 0 8px #ddd; }查看全部
-
html 左查看全部
-
xiabu: .menu li a:hover{ text-decoration:underline; font-weight:bold; color:#e4393c; } .menu li:hover{ border:1px solid #ddd; border-right:0; box-shadow:0 0 8px #ddd; -webkit-box-shadow:0 0 8px #ddd; -moz-box-shadow:0 0 8px #ddd; background-image:none; } .sub{ display:none; width:715px; position:absolute; top:40px; left:220px; border:1px solid #ddd; z-index:4; background:#fff; box-shadow:0 0 8px #ddd; -webkit-box-shadow:0 0 8px #ddd; -moz-box-shadow:0 0 8px #ddd; } .sleft{ /*background:gray;*/ float:left; width:490px; margin:5px; } .sright{ background:blue; float:left; width:200px; margin:5px; } .menu li:hover .sub{ display:block; } .menu li:hover span{ background-color:#fff; display:inline-block; width:20px; height:30px; z-index:20; float:right; position:relative; }查看全部
-
<div class="sright"> 右邊導(dǎo)航 </div> </div> </li> <li><a href="#">圖像</a></li> <li><a href="#">圖像</a></li> <li><a href="#">圖像</a></li> <li><a href="#">圖像</a></li> </ul> *{ padding:0; margin:0; font-size:12px; } .menu{ display:block; width:220px; border:2px solid #e4393c; margin:0; padding:0; } .menu .title{ height:40px; line-height:40px; text-align:left; font-size:12px; font-weight:bold; color:#fff; background-color:#e4393c; padding-left:20px; } .menu li{ height:30px; line-height:30px; list-style-type:none; text-align:left; padding-left:8px; z-index:3; background-image:url(../img/YMX.ico); background-repeat:no-repeat; background-position:right; } .menu li a{ text-decoration:none; color:#313131; } .menu li a:hover{ text-decoration:underline; font-weight:bold; color:#e4393c; }查看全部
-
body { padding: 0; font-size: 10pt; behavior:url(css/csshover.htc); } .topmenu { display: block; width: 220px; border: 2px solid #e4393c; margin: 0; padding: 0; } .toptitle { height: 40px; line-height: 40px; text-align: left; font-size: 11pt; font-weight: bold; color: White; background: #e4393c; padding-left: 20px; } .topmenu li { height: 30px; line-height: 30px; font-size: 11pt; list-style-type: none; text-align: left; padding-left: 8px; z-index: 3; background-image: url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg); background-repeat: no-repeat; background-position: right; }查看全部
-
/* 任務(wù)一 */ background-image: url(http://img1.sycdn.imooc.com//1.jpg); background-repeat: no-repeat; background-position: right; } .topmenu li:hover { /* 任務(wù)二 */ background-image: none; } .topmenu li a { text-decoration: none; color: #313131; } .topmenu li a:hover { text-decoration: underline; font-weight: bold; color: #e4393c; } </style> </head> <ul class="topmenu"> <div class="toptitle"> 全部商品分類 </div> <li><a href="#">圖書、音像、數(shù)字商品</a><span></span> </li> <li><a href="#">家用電器</a></li> <li><a href="#">手機(jī)、數(shù)碼</a></li> <li><a href="#">電腦、辦公</a></li> <li><a href="#">家居、家具、家裝、廚具</a></li> <li><a href="#">服飾內(nèi)衣、珠寶首飾</a></li> <li><a href="#">個護(hù)化妝</a></li> </ul> </body>查看全部
舉報
0/150
提交
取消