-
qq截圖測(cè)尺寸
去除表單前面圓點(diǎn)：1.list-styled? ? 2.list-style-type：none；
去除下劃線：text-decoration：none
背景不重復(fù)：background-repeat：none-repeat
查看全部 -
門(mén)戶類網(wǎng)站特點(diǎn)查看全部
-
常見(jiàn)的導(dǎo)航欄列表，電商網(wǎng)站可以采用
查看全部 -
出現(xiàn)問(wèn)題：如何解決懸浮層的內(nèi)容過(guò)少或者過(guò)多的問(wèn)題：
?1、內(nèi)容過(guò)少時(shí)：
將左側(cè)一級(jí)菜單與懸浮層的底部進(jìn)行高度對(duì)比;
首先獲取左側(cè)一級(jí)菜單所處的高度(一級(jí)菜單li的索引*每個(gè)高度為30+標(biāo)題部分的高度)：h0=[this.A-1]*30+42； ? ?
其次獲取懸浮層的高度（當(dāng)前活動(dòng)DIV上部距離頂部的高度+本身DIV的高度）即：
h=this.getElementsByTagName('div')[0].style.top+this.getElementsByTagName('div')[0].offsetHeigth;?
這里的this是指向Li標(biāo)簽的指針，
this.getElementsByTagName('div')[0]是獲取Li標(biāo)簽下面的第一個(gè)div標(biāo)簽，
this.getElementsByTagName('div')[0].style.top是獲取當(dāng)前活動(dòng)DIV上部距離頂部的高度。
判斷語(yǔ)句：if(h<h0){this.getElementsByTagName('div').style.top=h0;}?
當(dāng)懸浮層的高度遠(yuǎn)遠(yuǎn)小于一級(jí)菜單標(biāo)簽所處的高度時(shí)，把一級(jí)菜單標(biāo)簽所處高度賦給懸浮層；
2、當(dāng)內(nèi)容過(guò)多時(shí)：
y=this.getElementsByTagName('div')[0].offsetHeigth;
if(y>550){
this.getElementsByTagName("div")[0].style.top="3px";
}
查看全部 -
分類查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
??? <title></title>
??? <style type="text/css">
?????? 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:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg) no-repeat right;
?? ??? ?
??????? /* 任務(wù)一 */
??????? }
?? ??? ?.topmenu li:hover
??????? {
?????????? ??? ??? ??? ?
??????? background:none;
???????? ?
??????? }
??????? .topmenu li a
??????? {
??????????? text-decoration: none;
??????????? color: #313131;
??????? }
??????? .topmenu li a:hover
??????? {
??????????? text-decoration: underline;
??????????? font-weight: bold;
??????????? color: #e4393c;
??????? }
?? ??? ?
??? ?
?????? ?
??? </style>
</head>
<body>
?? ?
??? <ul class="topmenu">
??????? <div class="toptitle">
??????????? 全部商品分類
??????? </div>
??????? <li><a href="#">圖書(shū)、音像、數(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="#">個(gè)護(hù)化妝</a></li>
??????? <li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
??????? <li><a href="#">運(yùn)動(dòng)戶外</a></li>
??????? <li><a href="#">汽車用品</a></li>
??????? <li><a href="#">母嬰、玩具樂(lè)器</a></li>
??????? <li><a href="#">食品飲料、酒類、生鮮</a></li>
??????? <li><a href="#">營(yíng)養(yǎng)保健</a></li>
??? </ul>
</body>
</html>查看全部 -
IE6不兼容hover：
查看全部 -
定義position：relative；才能定義圖片的right 和bottom
查看全部 -
this.i
top 位置
查看全部 -
?window.onload = function () {
? ? ? // 編寫(xiě)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 = "";
? ? ? ? ? ? }
? ? ? ? }
? ? ??
查看全部 -
1、將原css代碼進(jìn)行修改
?????????li：hover ——> .lihover
2、加入鼠標(biāo)移入事件、鼠標(biāo)隱藏移開(kāi)
window.onload=function（）{
var lis = document.getElementByTagName("li);
for(i? = 0; i < lis.length; i++){
????lis[i].onmousover = function(){
????????this.className = "lihover";
????}
????lis[i].onmouseout = function(){
????????this.className = "";//由于定義的時(shí)候都沒(méi)有用 li 的 class，而是直接定義的 li
????}
}
}
查看全部 -
box-shadow: 0 0 8px #DDD;
? ? ? ? ? ? -moz-box-shadow: 0 0 8px #DDD;
? ? ? ? ? ? -webkit-box-shadow: 0 0 8px #DDD;
投影左邊距、 右邊距、 大小、 顏色
查看全部 -
<dl>
????<dt>定義列表中的項(xiàng)目</dt>
?????<dd>描述列表中的項(xiàng)目</dd>
</dl>
防溢出：overflow：hidden；
右對(duì)齊：text-align:right;
在body中寫(xiě)behavior：url（csshover.htc）;為了適應(yīng)IE瀏覽器下載的hover補(bǔ)丁文件
查看全部
舉報(bào)