-
qq截圖測尺寸
去除表單前面圓點：1.list-styled? ? 2.list-style-type：none；
去除下劃線：text-decoration：none
背景不重復(fù)：background-repeat：none-repeat
查看全部 -
門戶類網(wǎng)站特點查看全部
-
常見的導(dǎo)航欄列表，電商網(wǎng)站可以采用
查看全部 -
出現(xiàn)問題：如何解決懸浮層的內(nèi)容過少或者過多的問題：
?1、內(nèi)容過少時：
將左側(cè)一級菜單與懸浮層的底部進行高度對比;
首先獲取左側(cè)一級菜單所處的高度(一級菜單li的索引*每個高度為30+標(biāo)題部分的高度)：h0=[this.A-1]*30+42； ? ?
其次獲取懸浮層的高度（當(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)簽下面的第一個div標(biāo)簽，
this.getElementsByTagName('div')[0].style.top是獲取當(dāng)前活動DIV上部距離頂部的高度。
判斷語句：if(h<h0){this.getElementsByTagName('div').style.top=h0;}?
當(dāng)懸浮層的高度遠(yuǎn)遠(yuǎn)小于一級菜單標(biāo)簽所處的高度時，把一級菜單標(biāo)簽所處高度賦給懸浮層；
2、當(dāng)內(nèi)容過多時：
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ù)字商品</a><span></span>? </li>
<li><a href="#">家用電器</a></li>
??????? <li><a href="#">手機、數(shù)碼</a></li>
??????? <li><a href="#">電腦、辦公</a></li>
??????? <li><a href="#">家居、家具、家裝、廚具</a></li>
??????? <li><a href="#">服飾內(nèi)衣、珠寶首飾</a></li>
??????? <li><a href="#">個護化妝</a></li>
??????? <li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
??????? <li><a href="#">運動戶外</a></li>
??????? <li><a href="#">汽車用品</a></li>
??????? <li><a href="#">母嬰、玩具樂器</a></li>
??????? <li><a href="#">食品飲料、酒類、生鮮</a></li>
??????? <li><a href="#">營養(yǎng)保健</a></li>
??? </ul>
</body>
</html>查看全部 -
IE6不兼容hover：
查看全部 -
定義position：relative；才能定義圖片的right 和bottom
查看全部 -
this.i
top 位置
查看全部 -
?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 = "";
? ? ? ? ? ? }
? ? ? ? }
? ? ??
查看全部 -
1、將原css代碼進行修改
?????????li：hover ——> .lihover
2、加入鼠標(biāo)移入事件、鼠標(biāo)隱藏移開
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 = "";//由于定義的時候都沒有用 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>定義列表中的項目</dt>
?????<dd>描述列表中的項目</dd>
</dl>
防溢出：overflow：hidden；
右對齊：text-align:right;
在body中寫behavior：url（csshover.htc）;為了適應(yīng)IE瀏覽器下載的hover補丁文件
查看全部
舉報