Web基本筆記~14.購物車案例(導航欄)
阿新 • • 發佈：2021-01-23
Web基本筆記~14.購物車案例(導航欄)
上一期
樣式初始化
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;}
body{text-align: center;font-size:14px;}
a{text-decoration: none;}
li{list-style: none;}
頭部導航欄初始
<!-- 導航開始 -->
<html>
<head>
<meta charset="utf-8" .nav{
/*設定導航欄的高度 為 30px*/
height: 30px;
/*導航欄顏色*/
background-color: #f1f1f1;
}
.warp{
/*寬度設定1000px*/
width: 1000px;
/*設定內容居中*/
margin: 0px auto;
}
當前樣式
此時此刻肯定不是我們想要的效果,良好的效果應該是讓他們平行。為了讓文字之間留有間隙,可以適當的新增& nbsp;在需要空的地方,或者使用margin-right輕微調整間距。
設定平行和行高
.nav_ul{
/*設定左浮動*/
float: left;
}
/*設定 nav_ul下面的li標籤樣式*/
.nav_ul li{
float: left;
/*設定行高*/
line-height: 30px;
/*輕微調整間距*/
margin-right: 10px;
}
/*設定 nav_ul 下面的a標籤樣式*/
.nav_ul a{
/*設定字型樣式*/
font-size: 12px;
color: #808080;
}
當前樣式
右邊導航欄
除了左邊的導航欄以外,還要再設定右邊的導航欄。此時的操作和前面差不多,僅僅只是把ul的左浮改成了右浮而已。
/*
設定第二個ul
*/
.nav_ul1{
/*設定右浮*/
float: right;
}
.nav_ul1 li{
/*設定 ul下面的li左浮*/
float: left;
/*設定行高*/
height: 30px;
/*微微調整間距*/
margin-left: 10px;
}
.nav_ul1 a{
/*設定字型樣式*/
font-size: 12px;
color: #808080;
}
<ul class="nav_ul1">
<li><a href="">嵌入式</a></li>
<li><a href="">硬體</a></li>
<li><a href="">電腦科學</a></li>
<li><a href="">WEB</a></li>
<li><a href="">伺服器</a></li>
<li><a href="">人工智慧</a></li>
<li><a href="">大資料</a></li>
<li><a href="">分散式</a></li>
</ul>
當前樣式
合併
為了避免程式碼過度的重複,因此,適當的對CSS一些樣式進行合併,可以達到簡寫的一個目的,對日後的修改和維護幫助會很大。
/*同時設定 nav_ul和nav_ul1下面的li標籤樣式*/
.nav_ul li,.nav_ul1 li{
float: left;
/*設定行高*/
line-height: 30px;
/*輕微調整間距*/
margin-right: 10px;
}
/*同時設定 nav_ul和nav_ul1 下面的a標籤樣式*/
.nav_ul a,.nav_ul1 a{
/*設定字型樣式*/
font-size: 12px;
color: #808080;
}
最後程式碼
樣式初始化
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;}
body{text-align: center;font-size:14px;}
a{text-decoration: none;}
li{list-style: none;}
樣式設定
.nav{
height: 30px;
background-color: #f1f1f1;
}
.warp{
width: 1000px;
margin: 0px auto;
}
.nav_ul{
/*設定左浮動*/
float: left;
}
/*同時設定 nav_ul和nav_ul1下面的li標籤樣式*/
.nav_ul li,.nav_ul1 li{
float: left;
/*設定行高*/
line-height: 30px;
/*輕微調整間距*/
margin-right: 10px;
}
/*同時設定 nav_ul和nav_ul1 下面的a標籤樣式*/
.nav_ul a,.nav_ul1 a{
/*設定字型樣式*/
font-size: 12px;
color: #808080;
}
/*
設定第二個ul
*/
.nav_ul1{
/*設定右浮*/
float: right;
}
.nav_ul1 li{
/*設定行高*/
height: 30px;
/*微微調整間距*/
margin-left: 10px;
}
頁面佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<!-- 樣式初始化 -->
<link href="./css/reset.css" type="text/css" rel="stylesheet"/>
<!-- 主要CSS -->
<link href="./css/demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!-- 導航開始 -->
<div class="nav">
<div class="warp">
<!-- ul標籤比較適合做導航欄 -->
<ul class="nav_ul">
<li><a href="">商城首頁</a></li>
<li><a href="">配送至: 北京</a></li>
</ul>
<ul class="nav_ul1">
<li><a href="">嵌入式</a></li>
<li><a href="">硬體</a></li>
<li><a href="">電腦科學</a></li>
<li><a href="">WEB</a></li>
<li><a href="">伺服器</a></li>
<li><a href="">人工智慧</a></li>
<li><a href="">大資料</a></li>
<li><a href="">分散式</a></li>
</ul>
</div>
</div>
</body>
</html>
就這樣,購物車的導航欄製作完畢~