CSS實(shí)現(xiàn)菜單背景自適應(yīng)寬度的方法
發(fā)布時(shí)間：2015-09-28 10:26:04 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了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)寬度變化呢？通過這個(gè)菜單實(shí)例，你將會(huì)明白其中的原由。
先來看運(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)頁制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)頁特效。</span></div>
</body>
</html>
希望本文所述對大家的CSS網(wǎng)頁設(shè)計(jì)有所幫助。
相關(guān)文章
純CSS+XHTML實(shí)現(xiàn)的二級導(dǎo)航菜單效果
這篇文章主要為大家介紹了純CSS+XHTML實(shí)現(xiàn)的二級導(dǎo)航菜單效果,通過簡單的鼠標(biāo)事件操作頁面元素樣式變換實(shí)現(xiàn)二級導(dǎo)航菜單的功能,非常簡單實(shí)用,需要的朋友可以參考下2015-09-25CSS基于單張背景圖實(shí)現(xiàn)自適應(yīng)寬度的圓角菜單效果代碼
這篇文章主要為大家介紹了CSS基于單張背景圖實(shí)現(xiàn)自適應(yīng)寬度的圓角菜單效果代碼,基于css實(shí)現(xiàn)自適應(yīng)寬度的圓角菜單效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-21純CSS實(shí)現(xiàn)的三級導(dǎo)航菜單效果代碼
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)的三級導(dǎo)航菜單效果代碼,通過css控制頁面元素樣式實(shí)現(xiàn)三級導(dǎo)航菜單效果,非常簡單實(shí)用,需要的朋友可以參考下2015-09-18- 這篇文章主要為大家介紹了基于CSS實(shí)現(xiàn)的4級下拉菜單效果代碼,基于css通過對頁面元素樣式的設(shè)置實(shí)現(xiàn)四級下拉菜單的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-17
純CSS實(shí)現(xiàn)超簡單的二級下拉導(dǎo)航菜單代碼
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)超簡單的二級下拉導(dǎo)航菜單代碼,涉及css針對hover樣式設(shè)置的相關(guān)技巧,非常簡單實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-15- 這篇文章主要為大家介紹了CSS實(shí)現(xiàn)的中英文雙語菜單效果代碼,涉及css中hover屬性的使用技巧,界面美觀實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-15
CSS實(shí)現(xiàn)帶有小圖片的LI圖標(biāo)列表菜單
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)帶有小圖片的LI圖標(biāo)列表菜單,可實(shí)現(xiàn)css圖標(biāo)的正常顯示及滑過、點(diǎn)擊呈現(xiàn)不同顏色的功能,涉及css針對visited、hover及active等使用技巧,需要2015-09-15CSS實(shí)現(xiàn)有立體感的橫向按鈕式菜單效果代碼
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)有立體感的橫向按鈕式菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過呈現(xiàn)按鈕按下的效果,具有極強(qiáng)的3D立體效果,涉及css基于hover屬性的border邊框設(shè)置技巧,2015-09-15純CSS實(shí)現(xiàn)鼠標(biāo)滑過顯示子菜單的二級菜單效果
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)鼠標(biāo)滑過顯示子菜單的二級菜單效果,通過簡單的css針對hover設(shè)置實(shí)現(xiàn)鼠標(biāo)滑過顯示二級菜單的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參2015-09-14- 這篇文章主要為大家介紹了CSS實(shí)現(xiàn)的灰色下拉菜單效果代碼,涉及css控制hover樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-14