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