-
原垂直菜單，讓菜單浮動(dòng)以水平顯示且文字居中： .nav li{ float:left; text-align:center; }查看全部
-
text-decoration:none; display:block; text-indent:10px;查看全部
-
text-indent 文本縮進(jìn)
list-style：none；去掉圓點(diǎn)
text-decoration：none；去掉下劃線
<a>標(biāo)簽的設(shè)置關(guān)鍵是將標(biāo)簽設(shè)置為塊元素
display：block；轉(zhuǎn)化為塊元素，可以設(shè)置長寬屬性
a:hover{} 鼠標(biāo)放上去的隱藏效果
查看全部 -
我的這個(gè)箭頭菜單實(shí)例
https://blog.csdn.net/wtxy24/article/details/82316133
查看全部 -
<!DOCTYPE html>
<html>
<head>
<title>菜單</title>
<style type="text/css">
* { padding: 0; margin: 0; }
ul, ol { list-style-type: none; }
a { text-decoration: none; color: #000; }
.menu { width: 600px; height: 50px; margin: 50px auto 0; }
.menu li { float: left; width: 200px; height: 50px; }
.menu li:last-child a { border-radius: 5px; }
.menu li a { display: block; width: 100%; height: 50px; line-height: 50px; border: 1px solid #d8d8d8; position: relative;
background-image: linear-gradient(to bottom, #a5a5a5, #5d5d5d); }
.menu li a span { font-size: 30px; font-weight: bold; color: #fff; margin: 0 10px 0 30px; }
.menu li a i { font-style: normal; color: #fff; display: inline-block; vertical-align: 10%; }
.menu li a::before { content: ""; position: absolute; left: 0; top: 0; width: 35.355px; height: 35.355px; border-left: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8; transform-origin: 0 0; transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
background-image: linear-gradient(to right bottom, #a5a5a5, #5d5d5d); }
.menu li:hover a { background-image: linear-gradient(to bottom, rgb(246, 226, 150), rgb(238, 166, 40)); }
.menu li:hover a::before { background-image: linear-gradient(to right bottom, rgb(246, 226, 150), rgb(238, 166, 40)); }
</style>
</head>
<body>
<ul class="menu">
<li><a href="javascript:;"><span>1</span><i>step1</i></a></li>
<li><a href="javascript:;"><span>2</span><i>step2</i></a></li>
<li><a href="javascript:;"><span>3</span><i>step3</i></a></li>
</ul>
</body>
</html>
查看全部 -
全角空格被解釋為漢字，所以不會(huì)被被解釋為HTML分隔符，可以按照實(shí)際的空格數(shù)顯示
查看全部 -
菜單<li>浮動(dòng)后，<li>脫離文檔流，導(dǎo)致<ul>將失去高度和寬度；如果需要對(duì)<ul>進(jìn)行整體背景設(shè)置，首先要給<ul>定義寬、高。
查看全部 -
碰到跑不動(dòng)的狀況，不光是檢查js，還檢查html
查看全部 -
基本的樣式清除： ?*{margin:0;padding:0}
無序列表圓點(diǎn)去除： ul{list-style:none}
下劃線去除： ? a{text-decoration:none}
文本縮進(jìn)標(biāo)簽 text-indent 不會(huì)影響總體寬度（padding會(huì)）
需要將a標(biāo)簽設(shè)置為塊元素，才能設(shè)高寬、hover效果 ? 代碼：a{display:block}
hover格式 ? a:hover{}查看全部 -
元素設(shè)置浮動(dòng)以后，就會(huì)脫離文檔流，這時(shí)候原來的高度和寬都都不復(fù)存在了，所以如果需要對(duì)該元素設(shè)置整體背景，就需要對(duì)該元素先設(shè)置高度和寬度！
查看全部 -
圓角css代碼：border-radius:4px 4px 3px 3px
查看全部 -
text-decoration：none是對(duì)a標(biāo)簽的下劃線進(jìn)行去掉操作！
查看全部 -
使用padding縮進(jìn)一定和使用text-indent對(duì)文本進(jìn)行縮進(jìn)的時(shí)候，padding會(huì)相應(yīng)的增加盒子的寬度，而text-indent不會(huì)！
查看全部 -
onmouseover?,?鼠標(biāo)移過?；?<br>onmouseout?,?鼠標(biāo)離開?；<br>setIntervel?,?不停地調(diào)用函數(shù)?；?<br>clearInterval?,?取消?setInterval?函數(shù)的運(yùn)行?；?<br>javascript:
window.onload=function(){ ??var?aA?=?document.getElementsByIagName('a');??/*查找所有的a標(biāo)簽元素*/ ??for(var?i=0;?i<aA.length;?i++){ ???aA[i].onmouseover?=?function(){????/*獲取a標(biāo)簽的鼠標(biāo)事件*/ ?????clearInterval(This.time);?/*防止累加*/ ?????var?This?=?this;??/*把當(dāng)前的this?對(duì)象傳進(jìn)來*/ ?????This.time?=?setInterval(function(){ ??????This.style.width?=?This.offsetWidth?+?8?+?"px";? ??????if(This.offsetWidth?>=?160){??/*如果當(dāng)前對(duì)象的寬度?大于?160*/ ???????clearInterval(This.time);??/*就停止當(dāng)前時(shí)間*/ ??????} ?????},30)?? ???} ??? ???aA[i].onmouseout?=?function(){????/*獲取a標(biāo)簽的鼠標(biāo)移除事件*/ ?????clearInterval(This.time);?/*防止累加*/ ?????var?This?=?this;??/*把當(dāng)前的this?對(duì)象傳進(jìn)來*/ ?????This.time?=?setInterval(function(){ ??????This.style.width?=?This.offsetWidth?-?8?+?"px";? ??????if(This.offsetWidth?<=?120){??/*如果當(dāng)前對(duì)象的寬度?大于?160*/ ???????This.style.width?=?"120px"; ???????clearInterval(This.time);??/*就停止當(dāng)前時(shí)間*/ ??????} ?????},30)?? ??? ??} }jquray:
$(function(){ $("a").hover(function(){ $(this).stop().animate({"width":"160px"},200); },function(){ $(this).stop().animate({"width":"120px"},200); }) })
查看全部 -
解析：菜單<li>浮動(dòng)后，<li>脫離文檔流，導(dǎo)致<ul>將失去高度和寬度；如果需要對(duì)<ul>進(jìn)行整體背景設(shè)置，首先要給<ul>定義寬、高。
查看全部
舉報(bào)