下拉及多級彈出菜單-Web標準(div+css)教程 二維碼
247
預覽顯示效果如下所示，因背景圖片比較長，所以右側顯示不太友好，下一步就需要把a的寬度給去掉，設置span的背景，使右側顯示正常，另外把三個按鈕橫向排列 在a上增加如下代碼： float:left; margin:5px; 橫向排列，并增加5px的外邊距，現在看下效果吧。為了美觀，下一步需要a的左側增加填充，使文字不死貼左側，同理span右側需要增加一個同樣的填充。 a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; } a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;} a:hover { background: url(btn_bg.gif) no-repeat 0px -37px;} a:hover span{ background: url(btn_bg.gif) no-repeat right -37px;} 對比以上代碼，可能你已經發現，原來a頂部的3px給去掉了，把高度改為37px了，行高也改為37px了，為什么這么做，大家動手試下就明白了。然后設置a下span的背景圖片，span默認是內聯元素，所以需先轉換為塊級元素；另外需增加鼠標經過時span的樣式。顯示效果如下，對比一下實例圖，是不是實現了這樣的效果。
提示：可以先修改部分代碼后再運行 文章出處：標準之路 編輯：楊雨晨思  以信載商，良心建站。遨游始終秉承“一次建站、終身維護”的宗旨，竭誠為客戶提供最優質的互聯網服務。遨游建站率先植入seo優化理念，讓你的網頁更利于搜索引擎抓取，關鍵詞排名更靠前。可仿站、可定制。無論是傳統型企業官網、集團型品牌官網，還是營銷型網站、電商型網站、定制型網站、特殊行業網站（醫療、教育），全部搞定。 公司：網站建設_小程序設計_競價托管代運營公司；郵箱：1013601535@qq.com 手機：17073547034；QQ： 1013601535 在線留言咨詢，24小時內回復
我想咨詢 *
企業名稱
手機號碼 *
您的姓名
所在城市 提交 |
網站建設問題
熱門標簽
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
