課程
/前端開發(fā)
/CSS3
/按鈕特效
為什么菜單項的寬度還是沒有根據(jù)內(nèi)容自適應(yīng)寬度????
2014-12-16
源自:按鈕特效 4-2
正在回答
剛剛試了一下圖片,也是可以的,除了按鈕的左右兩邊用左右對齊以外,其他部分用背景顏色填充,就可以達到寬度自適應(yīng)了,代碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title><style type="text/css">body ul li {margin: 0px; padding: 0px; font-size: 12px;border-bottom:1px solid #21530C; }ul { list-style-type: none; height: 40px; width:500px; }li { float: left; }a{border-radius:5px; display:inline-block; padding:15px; text-decoration:none; }a:hover{color:#fff;background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg) no-repeat right;background-color:#21530c;}</style></head><body><ul>??? <li><a href="#" class="ac"><span>首頁</span></a></li>??? <li><a href="#"><span>最新產(chǎn)品</span></a></li>??? <li><a href="#"><span>內(nèi)部新聞</span></a></li>??? <li><a href="#"><span>聯(lián)系我們聯(lián)系房頂上體會過投入工會 我們</span></a></li></ul></body></html>
用CSS3,圖片素材不完整,且長度有限制,他只是能很好的交互而已,代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title><style type="text/css">body ul li {margin: 0px; padding: 0px; font-size: 12px; }ul { list-style-type: none; height: 27px; width:500px;border-bottom:5px solid #21530C;}li { float: left; margin:0;padding:0;}li a{height:27;??? text-align:center;??? text-decoration:none;??? color:#000;??? padding:10px ;?? ?}li a:hover{??? border:#21530c 3px solid;??? border-radius:5px 5px 0 0;??? background:#21530c;??? color:#fff;}</style></head><body><ul>??? <li><a href="#" class="ac"><span>首頁</span></a></li>??? <li><a href="#"><span>最新產(chǎn)品</span></a></li>??? <li><a href="#"><span>內(nèi)部新聞</span></a></li>??? <li><a href="#"><span>聯(lián)系我們</span></a></li></ul></body></html>
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>無標(biāo)題文檔</title> <style?type="text/css"> body?ul?li?{margin:?0px;?padding:?0px;?font-size:?12px;?} ul?{?list-style-type:?none;?height:?27px;?width:500px;border-bottom:2px?solid?#21530C} li?{?float:?left;?} a{ display:inline-block;height:25px;line-height:25px;margin-left:15px;text-decoration:none; ????background:url(http://img1.sycdn.imooc.com//538588030001c52300090027.jpg)?no-repeat;padding-left:8px; } a?span{ ????display:inline-block;height:25px; ????background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg)?right??0;padding-right:8px; } </style> </head> <body> <ul> ????<li><a?href="#"><span>首頁</span></a></li> ????<li><a?href="#"><span>最新產(chǎn)品</span></a></li> ????<li><a?href="#"><span>內(nèi)部新聞</span></a></li> ????<li><a?href="#"><span>聯(lián)系我們</span></a></li> </ul> </body> </html>
舉報
WEB前端開發(fā)必備能力,課程分為二個實例講解,讓你牢牢掌握
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2015-01-15
剛剛試了一下圖片,也是可以的,除了按鈕的左右兩邊用左右對齊以外,其他部分用背景顏色填充,就可以達到寬度自適應(yīng)了,代碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px;border-bottom:1px solid #21530C; }
ul { list-style-type: none; height: 40px; width:500px; }
li { float: left; }
a{border-radius:5px; display:inline-block; padding:15px; text-decoration:none; }
a:hover{color:#fff;background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg) no-repeat right;background-color:#21530c;}
</style>
</head>
<body>
<ul>
??? <li><a href="#" class="ac"><span>首頁</span></a></li>
??? <li><a href="#"><span>最新產(chǎn)品</span></a></li>
??? <li><a href="#"><span>內(nèi)部新聞</span></a></li>
??? <li><a href="#"><span>聯(lián)系我們聯(lián)系房頂上體會過投入工會 我們</span></a></li>
</ul>
</body>
</html>
2015-01-15
用CSS3,圖片素材不完整,且長度有限制,他只是能很好的交互而已,代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px; }
ul { list-style-type: none; height: 27px; width:500px;border-bottom:5px solid #21530C;
}
li { float: left; margin:0;padding:0;}
li a{height:27;
??? text-align:center;
??? text-decoration:none;
??? color:#000;
??? padding:10px ;
?? ?
}
li a:hover{
??? border:#21530c 3px solid;
??? border-radius:5px 5px 0 0;
??? background:#21530c;
??? color:#fff;
}
</style>
</head>
<body>
<ul>
??? <li><a href="#" class="ac"><span>首頁</span></a></li>
??? <li><a href="#"><span>最新產(chǎn)品</span></a></li>
??? <li><a href="#"><span>內(nèi)部新聞</span></a></li>
??? <li><a href="#"><span>聯(lián)系我們</span></a></li>
</ul>
</body>
</html>
2014-12-16
2014-12-16
2014-12-16
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style type="text/css">
body ul li {margin: 0px; padding: 0px; font-size: 12px; }
ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}
li { float: left; }
a{
display:inline-block;height:25px;line-height:25px;margin-left:15px;text-decoration:none;
? ?background:url(http://img1.sycdn.imooc.com//538588030001c52300090027.jpg) no-repeat;padding-left:8px;
}
a span{
? ?display:inline-block;height:25px;
? ?background:url(http://img1.sycdn.imooc.com//5385882d0001030900080027.jpg) right ?0;padding-right:8px;
}
</style>
</head>
<body>
<ul>
? ?<li><a href="#"><span>首頁</span></a></li>
? ?<li><a href="#"><span>最新產(chǎn)品</span></a></li>
? ?<li><a href="#"><span>內(nèi)部新聞</span></a></li>
? ?<li><a href="#"><span>聯(lián)系我們</span></a></li>
</ul>
</body>
</html>