CSS-實戰-梯形背景導航
1、實現效果
梯形背景圖導航,如下圖。由於導航條文字多少不固定,因此面臨的挑戰是,當文字內容增加時,中間的背景寬度自動拉伸。CSS3的出現實現這樣的效果相對變的容易,本文使用背景圖定位的知識,加上CSS其他知識。介紹CSS2實現這樣效果的一種思路。
2、總體實現思路
(1)準備背景圖
注意圖片,一定是透明背景格式的,可以另存為下圖。
(2)建立A標籤巢狀B標籤的導航選單
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
(3)設定A標籤的左邊距,背景圖從左向右顯示。
A標籤紅色區域的背景顯示出來,其他區域背景讓B標籤的背景將其覆蓋。
(4)設定B標籤的右邊距,背景圖從右向左顯示。
B標籤,通過文字的寬度讓盒子變寬,同時設定B的右邊距,背景圖從右向左顯示。
(5)說明:A標籤背景圖主要顯示左邊部分,B標籤背景圖主要是顯示右邊和中間部分,AB兩個標籤的背景圖合併,可以顯示最終理想效果。
3、細節程式碼實現步驟
第一步: 設定A的屬性
(1):將A標籤為浮動標籤,A標籤的高度為25px.
(2):將A標籤的坐邊距設定為25px,可以容納背景圖的弧度.
(3):將背景圖從左邊定位,上下不做偏移.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梯形導航-第一步</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.header{
width: 80%;
height: 50px;
background-color: #ccc;
overflow:hidden;
margin: 0px auto;
border: 1px solid #ccc;
}
.dhbar{
width: 70%;
margin-top: 25px;
margin-right:25px;
float: right;
background: white;
}
.dhbar a {
float: left;
cursor:pointer;
height: 25px;
padding: 0px 0px 0px 25px;
margin: 0px 10px;
font-size: 13px;
text-decoration: none;
color: black;
background:url(dh.png) no-repeat left 0px;
border: 1px solid red;
}
.dhbar b{
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="header">
<div class="dhbar">
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>多個文字測試</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
</div>
</div>
</body>
</html>
第二步: 設定B的基本屬性
(1):設定B為塊級元素.
(2):設定B元素的高度
(3):設定B元素的文字垂直居中顯示,line-height與高度一樣
(4):設定B元素的右邊距為25px.
.dhbar b{
border: 1px solid blue;
font-weight: normal;
display:inline-block;
height: 25px;
line-height: 25px;
z-index:1;
color: black;
padding: 0px 25px 0px 0px;
}
’
第三步:新增B元素背景圖
.dhbar b{
border: 1px solid blue;
font-weight: normal;
display:inline-block;
height: 25px;
line-height: 25px;
z-index:1;
color: black;
padding: 0px 25px 0px 0px;
background:url(dh.png) no-repeat right 0px;
}
第四步:去掉邊框樣式
原始碼 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梯形導航</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.header{
width: 80%;
height: 50px;
background-color: #ccc;
overflow:hidden;
margin: 0px auto;
border: 1px solid #ccc;
}
.dhbar{
width: 70%;
margin-top: 25px;
margin-right:25px;
float: right;
background: white;
}
.dhbar a {
float: left;
cursor:pointer;
height: 25px;
padding: 0px 0px 0px 25px;
margin: 0px 10px;
font-size: 13px;
text-decoration: none;
color: black;
background:url(dh.png) no-repeat left 0px;
}
.dhbar b{
font-weight: normal;
display:inline-block;
height: 25px;
line-height: 25px;
z-index:1;
color: black;
padding: 0px 25px 0px 0px;
background:url(dh.png) no-repeat right 0px;
}
</style>
</head>
<body>
<div class="header">
<div class="dhbar">
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>多個文字測試</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
</div>
</div>
</body>
</html>
4、新增滑鼠移動後效果
原始碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梯形導航</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.header{
width: 80%;
height: 50px;
background-color: #ccc;
overflow:hidden;
margin: 0px auto;
border: 1px solid #ccc;
}
.dhbar{
width: 70%;
margin-top: 25px;
margin-right:25px;
float: right;
background: white;
}
.dhbar a {
float: left;
cursor:pointer;
height: 25px;
padding: 0px 0px 0px 25px;
margin: 0px 10px;
font-size: 13px;
text-decoration: none;
color: black;
}
.dhbar b{
font-weight: normal;
display:inline-block;
height: 25px;
line-height: 25px;
z-index:1;
color: black;
padding: 0px 25px 0px 0px;
}
.dhbar a:hover{
background:url(dh.png) no-repeat left 0px;
}
.dhbar a:hover b{
color :red;
background:url(dh.png) no-repeat right 0px;
}
</style>
</head>
<body>
<div class="header">
<div class="dhbar">
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>多個文字測試</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
</div>
</div>
</body>
</html>
執行效果:
5、挑戰實現如下效果
(1)可以用本文的思路(瀏覽器支援CSS3後,本文的思路基本淘汰)。
(2) 使用CSS3的新特性實現。
素材圖片
相關文章
- iOS專案開發實戰——自定義設定導航欄和狀態列背景iOS
- BootstrapBlazor實戰 Menu 導航選單使用(1)bootBlazor
- BootstrapBlazor實戰 Menu 導航選單使用(2)bootBlazor
- 滑鼠懸浮背景變色導航選單
- 導航欄背景切換程式碼例項
- CSS-背景顏色|background-colorCSS
- CSS-背景圖片|background-imageCSS
- CSS-實戰-上傳按鈕美化CSS
- CSS-實戰-互動式圖片CSS
- jQuery背景滑動跟隨的導航選單jQuery
- CSS-背景來源|background-originCSS
- CSS-背景位置-x|background-position-xCSS
- js實現點選導航欄使當前背景變色程式碼JS
- 實現左側導航和橫向導航
- 可以任意定製導航欄背景的一個思路
- 第 20 章 專案實戰--響應式導航[1]
- 更改NavMenu 導航選單啟用時的背景顏色
- iOS 導航欄背景顏色完全透明及漸變iOS
- css3滑鼠懸浮背景滑動導航選單CSSS3
- Tablayout實現導航欄TabLayout
- Backbine.js實戰第七章----導航控制器JS
- 滑鼠懸浮具有背景動畫跟隨效果的導航選單動畫
- flutter 自定義tab導航-頂部導航-底部導航Flutter
- web安全實踐系列導航Web
- 高德地圖駕車導航記憶體優化原理與實戰地圖記憶體優化
- 短視訊直播原始碼,實現頂部導航欄背景圖片漸隱漸現效果原始碼
- DukuanCMS_網址導航,導航網站,網址導航原始碼網站原始碼
- 室內導航用什麼來實現?通過什麼可以實現導航功能?
- 如何實現園區路線導航?園區樓宇地圖導航如何實現?地圖
- css實現梯形程式碼例項CSS
- 商場導航怎麼實現?怎樣製作商場導航圖?
- ReactNative實現地圖導航React地圖
- WPF/C#:實現導航功能C#
- 如何在技術上實現室內導航?室內地圖導航怎麼實現?地圖
- 室內地圖導航是怎麼實現的?室內導航好做嗎?地圖
- 導航特效特效
- jquery導航jQuery
- Prism導航