CSS-實戰-梯形背景導航
1、實現效果
梯形背景圖導航,如下圖。由於導航條文字多少不固定,因此面臨的挑戰是,當文字內容增加時,中間的背景寬度自動拉伸。CSS3的出現實現這樣的效果相對變的容易,本文使用背景圖定位的知識,加上CSS其他知識。介紹CSS2實現這樣效果的一種思路。
梯形背景導航
2、總體實現思路
(1)準備背景圖
注意圖片,一定是透明背景格式的,可以另存為下圖。
透明背景圖
(2)建立A標籤巢狀B標籤的導航選單
<a href="javascript:void(0);" class="menu">
<b>測試</b>
</a>
(3)設定A標籤的左邊距,背景圖從左向右顯示。
A標籤紅色區域的背景顯示出來,其他區域背景讓B標籤的背景將其覆蓋。
A標籤顯示區域
(4)設定B標籤的右邊距,背景圖從右向左顯示。
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>
設定A元素後的樣式
第二步: 設定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元素後的樣式
’
第三步:新增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;
}
B元素新增背景圖
第四步:去掉邊框樣式
最終效果
原始碼 :
<!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>
執行效果:
image.png
5、挑戰實現如下效果
(1)可以用本文的思路(瀏覽器支援CSS3後,本文的思路基本淘汰)。
(2) 使用CSS3的新特性實現。
image.png
image.png
image.png
素材圖片
dh.png
相關文章
- HarmonyOS Next 入門實戰 - 導航框架:頁面路由、元件導航(Navigation)框架路由元件Navigation
- CSS-背景圖片|background-imageCSS
- CSS-背景來源|background-originCSS
- CSS-背景顏色|background-colorCSS
- HarmonyOS Next 入門實戰 - 導航框架:HMRouter框架
- BootstrapBlazor實戰 Menu 導航選單使用(2)bootBlazor
- BootstrapBlazor實戰 Menu 導航選單使用(1)bootBlazor
- CSS-背景位置-x|background-position-xCSS
- 點選導航欄切換背景色效果
- 滑鼠懸浮背景上下翻滾切換導航
- 滑鼠懸浮導航欄背景和字型變色效果
- 可以任意定製導航欄背景的一個思路
- 點選導航欄使當前欄目背景變色
- 更改NavMenu 導航選單啟用時的背景顏色
- 【導航】讀書導航
- flutter 自定義tab導航-頂部導航-底部導航Flutter
- ReactNative實現地圖導航React地圖
- 短視訊直播原始碼,實現頂部導航欄背景圖片漸隱漸現效果原始碼
- 如何實現園區路線導航?園區樓宇地圖導航如何實現?地圖
- 室內導航用什麼來實現?通過什麼可以實現導航功能?
- DukuanCMS_網址導航,導航網站,網址導航原始碼網站原始碼
- 商場導航怎麼實現?怎樣製作商場導航圖?
- IntersectionObserver + scrollIntoView 實現電梯導航ServerView
- WPF/C#:實現導航功能C#
- 如何在技術上實現室內導航?室內地圖導航怎麼實現?地圖
- 高德地圖駕車導航記憶體優化原理與實戰地圖記憶體優化
- 室內地圖導航是怎麼實現的?室內導航好做嗎?地圖
- 扇形導航
- 導航特效特效
- 路由導航路由
- Prism導航
- 北斗導航
- 地下停車場怎麼導航,停車場導航技術怎麼實現
- 【部落格導航】Nico部落格導航彙總
- Android 使用BottomNavigationView實現底部導航欄AndroidNavigationView
- AR 導航的幾種實現思路
- 智慧園區地圖導航解決方案,智慧工業園區導航如何實現?地圖
- PbootCMS導航選單-導航選單的使用教程boot
- 分類導航