CSS實(shí)現(xiàn)菜單背景自適應(yīng)寬度的方法
發(fā)布時(shí)間：2015-09-28 10:26:04 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家介紹了CSS實(shí)現(xiàn)菜單背景自適應(yīng)寬度的方法,涉及基于css屬性控制背景圖片自適應(yīng)寬度的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了CSS實(shí)現(xiàn)菜單背景自適應(yīng)寬度的方法。分享給大家供大家參考。具體如下：
為了讓菜單看上去更漂亮一些，我們都喜歡用圖片去修飾菜單的背景，如果是規(guī)則圖片，那很好實(shí)現(xiàn)，但是如果菜單的背景是不規(guī)則的，我們應(yīng)該如何讓它的寬度隨著菜單的文字多少而自動(dòng)適應(yīng)寬度變化呢？通過(guò)這個(gè)菜單實(shí)例，你將會(huì)明白其中的原由。
先來(lái)看運(yùn)行效果截圖：
在線演示地址如下：
http://demo.jb51.net/js/2015/css-auto-width-bg-pic-demo/
具體代碼如下：
復(fù)制代碼
代碼如下:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜單背景自適應(yīng)</title>
<style type="text/css">
<!--
.load {
background: url(images/9_o.png) no-repeat right;
position: absolute;margin-left:5px;
}
.load span {
height: 66px;
background: url(images/9_o.png) no-repeat;
display: block;
font-size: 14px;
line-height: 66px;
font-weight: bold;
padding-left: 115px;
margin-right: 15px;
margin-left: -5px;
}
-->
</style>
</head>
<body>
<div class="load"><span>腳本之家網(wǎng)站</span></div>
<div class="load" style="top:100px"><span>提供最新的網(wǎng)絡(luò)編程、腳本編程、網(wǎng)頁(yè)制作、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)頁(yè)特效。</span></div>
</body>
</html>
希望本文所述對(duì)大家的CSS網(wǎng)頁(yè)設(shè)計(jì)有所幫助。
相關(guān)文章
純CSS+XHTML實(shí)現(xiàn)的二級(jí)導(dǎo)航菜單效果
這篇文章主要為大家介紹了純CSS+XHTML實(shí)現(xiàn)的二級(jí)導(dǎo)航菜單效果,通過(guò)簡(jiǎn)單的鼠標(biāo)事件操作頁(yè)面元素樣式變換實(shí)現(xiàn)二級(jí)導(dǎo)航菜單的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-25CSS基于單張背景圖實(shí)現(xiàn)自適應(yīng)寬度的圓角菜單效果代碼
這篇文章主要為大家介紹了CSS基于單張背景圖實(shí)現(xiàn)自適應(yīng)寬度的圓角菜單效果代碼,基于css實(shí)現(xiàn)自適應(yīng)寬度的圓角菜單效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-21純CSS實(shí)現(xiàn)的三級(jí)導(dǎo)航菜單效果代碼
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)的三級(jí)導(dǎo)航菜單效果代碼,通過(guò)css控制頁(yè)面元素樣式實(shí)現(xiàn)三級(jí)導(dǎo)航菜單效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-18基于CSS實(shí)現(xiàn)的4級(jí)下拉菜單效果代碼
這篇文章主要為大家介紹了基于CSS實(shí)現(xiàn)的4級(jí)下拉菜單效果代碼,基于css通過(guò)對(duì)頁(yè)面元素樣式的設(shè)置實(shí)現(xiàn)四級(jí)下拉菜單的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-17純CSS實(shí)現(xiàn)超簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單代碼
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)超簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單代碼,涉及css針對(duì)hover樣式設(shè)置的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-15CSS實(shí)現(xiàn)的中英文雙語(yǔ)菜單效果代碼
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)的中英文雙語(yǔ)菜單效果代碼,涉及css中hover屬性的使用技巧,界面美觀實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-15CSS實(shí)現(xiàn)帶有小圖片的LI圖標(biāo)列表菜單
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)帶有小圖片的LI圖標(biāo)列表菜單,可實(shí)現(xiàn)css圖標(biāo)的正常顯示及滑過(guò)、點(diǎn)擊呈現(xiàn)不同顏色的功能,涉及css針對(duì)visited、hover及active等使用技巧,需要2015-09-15CSS實(shí)現(xiàn)有立體感的橫向按鈕式菜單效果代碼
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)有立體感的橫向按鈕式菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)呈現(xiàn)按鈕按下的效果,具有極強(qiáng)的3D立體效果,涉及css基于hover屬性的border邊框設(shè)置技巧,2015-09-15純CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示子菜單的二級(jí)菜單效果
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示子菜單的二級(jí)菜單效果,通過(guò)簡(jiǎn)單的css針對(duì)hover設(shè)置實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)菜單的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參2015-09-14- 這篇文章主要為大家介紹了CSS實(shí)現(xiàn)的灰色下拉菜單效果代碼,涉及css控制hover樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-14