xx闪购——顶部的菜单栏
生活随笔
收集整理的這篇文章主要介紹了
xx闪购——顶部的菜单栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一.做小米商城的菜單欄：
1.頁面結構：
1.1.在html的body里面有一個 div 包裹著所有 內容 與 控制背景和高度；
1.2.在用1個 div 標簽 限制寬度和整體居中；
1.3.在用1個 div 標簽 讓文字靠最左側 ——>用另1個 div 標簽 讓文字靠最右側；
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>小米閃購 - 小米商城</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把圖片放到cc文件夾下，直接引入圖片--><link rel="stylesheet" href="style.css"><!--引入CSS的樣式--> </head> <body><div><div><div>小米商城|MIUI|IOT|云服務|金融|有品|小愛開放平臺|企業服務|Select Region</div><div>登錄|注冊|消息通知 </div><div>購物車（0）</div></div></div> </body> </html>在瀏覽器中顯示的效果！
?
2.給div加樣式：
2.1.給每個div起名字；
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>小米閃購 - 小米商城</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把圖片放到cc文件夾下，直接引入圖片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的樣式--> </head> <body><div class="topbar"><div class="container"><div class="topbar-nav">小米商城|MIUI|IOT|云服務|金融|有品|小愛開放平臺|企業服務|Select Region</div><div class="topbar-info">登錄|注冊|消息通知 </div><div class="topbar-cart">購物車（0）</div></div></div> </body> </html>2.2.給每個div加樣式：
2.2.1.
body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } .topbar {background-color: #333;height: 40px; }?
在瀏覽器中顯示的效果！
?2.2.2
body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } .topbar {/*加邊框*/border: 1px solid black;/*為了調試方便去掉 背景色*//*background-color: #333;*/height: 40px; }在瀏覽器中顯示的效果！?
?2.2.3 居中效果
body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } .topbar {/*加邊框*/border: 1px solid black;/*background-color: #333;*/height: 40px; } .container {border: 1px solid black;/*居中*/margin: 0 auto;width: 1226px; }在瀏覽器中顯示的效果！?
?
2.2.4.把居中的內容，放到對應位置上：
?
body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } .topbar {/*加邊框*/border: 1px solid black;/*background-color: #333;*/height: 40px; } .container {border: 1px solid black;/*居中*/margin: 0 auto;width: 1226px; } .topbar-nav {/*浮動*/float: left; } .topbar-info,.topbar-cart {float:right; }在瀏覽器中顯示的效果！
2.3.解決浮動所帶來的邊界塌陷
2.3.1. div邊框把具體內容 包裹住：
?
body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } .topbar {/*加邊框*/border: 1px solid black;/*background-color: #333;*/height: 40px; } .container {border: 1px solid black;/*居中*/margin: 0 auto;width: 1226px; } /*偽元素 清浮動*/ .container::before,.container::after {content: "";/*把行元素變成塊元素 table 固定的給上面加內容*/display: table; } .container::after {/*清浮動*/clear: both; } .topbar-nav {/*浮動*/float: left; } .topbar-info,.topbar-cart {float:right; }在瀏覽器中顯示的效果！
3.給頁面添加效果：
3.1.給文字添加鏈接：
***快捷加 a 標簽的方式——>把要加 a 標簽的內容 選好——>編輯(E)——>選擇 最下面的"Emmet"——>選擇" 輸入縮寫包圍個別行"——>輸入 a* 回車；
<div class="topbar-nav"><a href="">小米商城</a><a href="">MIUI</a><a href="">IOT</a><a href="">云服務</a><a href="">金融</a><a href="">有品</a><a href="">小愛開放平臺</a><a href="">企業服務</a><a href="">Select Region</a></div> <!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>小米閃購 - 小米商城</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把圖片放到cc文件夾下，直接引入圖片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的樣式--> </head> <body><div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a><a href="">MIUI</a><a href="">IOT</a><a href="">云服務</a><a href="">金融</a><a href="">有品</a><a href="">小愛開放平臺</a><a href="">企業服務</a><a href="">Select Region</a></div><div class="topbar-info"><a href="">登錄</a><a href="">注冊</a><a href="">消息通知</a></div><div class="topbar-cart"><a href="">購物車（0）</a></div></div></div> </body> </html>在瀏覽器中顯示的效果！
3.2.初始化a——>文字下面的線就沒了;
body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } a {text-decoration: none; }在瀏覽器中顯示的效果！?
?3.3
body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } a {text-decoration: none; } .topbar {/*加邊框*//*border: 1px solid black;*/background-color: #333;height: 40px; } .container {/*border: 1px solid black;*//*居中*/margin: 0 auto;width: 1226px; } /*偽元素 清浮動*/ .container::before,.container::after {content: "";/*把行元素變成塊元素 table 固定的給上面加內容*/display: table; } .container::after {/*清浮動*/clear: both; }/*在a標簽加顏色 大小*/ .topbar a {color: #b0b0b0;font-size: 12px; } /*鼠標點擊 a 效果*/ .topbar a:hover {color: #fff; }.topbar-nav {/*浮動*/float: left; } .topbar-info,.topbar-cart {float:right; }在瀏覽器中顯示的效果！
3.4.連接的居中
3.4.1. 添加居中效果
.topbar-nav {/*浮動*/float: left;/* 添加居中效果 */height: 40px;line-height: 40px; } .topbar-info,.topbar-cart {float:right; }在瀏覽器中顯示的效果！
?
?
3.5.修改body 里面的字體：
body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } /*修改字體 */ body {font: 14px/1.5 "Helvetica Nene",Helvetica,Arial,"Microsoft Yahei","Hiragino SansGB","Heiti SC","WenQuanYi Micro Hei",sans-serif; }a {text-decoration: none; }在瀏覽器中顯示的效果！?
3.6.字與字之間的距離調整：
3.6.1.
<div class="topbar-nav"><a href="">小米商城</a><span>|</span><!--spen標簽 "|"給加回來--><a href="">MIUI</a><span>|</span><a href="">IOT</a><span>|</span><a href="">云服務</a><span>|</span><a href="">金融</a><span>|</span><a href="">有品</a><span>|</span><a href="">小愛開放平臺</a><span>|</span><a href="">企業服務</a><span>|</span><a href="">Select Region</a><span>|</span></div>在瀏覽器中顯示的效果！?
3.6.字與字之間的距離調整：
3.6.2.
.topbar-nav {/*浮動*/float: left;/* 添加居中效果 */height: 40px;line-height: 40px;/*設計字體大小 空格就消失了*/font-size: 0; }在瀏覽器中顯示的效果！?
3.6.2.1.
.topbar-nav span{/* 字體大小 顏色 樣式 距離*/font-size: 12px;color:#424242;font-family: sans-serif;margin: 0.5em; }.topbar-info,.topbar-cart {float:right; }在瀏覽器中顯示的效果！?
3.7.加上滾動條：
body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } /*修改字體 */ body {font: 14px/1.5 "Helvetica Nene",Helvetica,Arial,"Microsoft Yahei","Hiragino SansGB","Heiti SC","WenQuanYi Micro Hei",sans-serif;/* 高度 滾動條就有了*/height: 2500px; }在瀏覽器中顯示的效果！?
4.做topbar-cart的樣式：
4.1.
.topbar-info,.topbar-cart {float:right; } /* 購物車的 a標簽*/ .topbar-cart a {/*改屬性變成 塊元素*/display: block;height: 40px;/* 字體高度 文本居中*/line-height: 40px;text-align: center; }在瀏覽器中顯示的效果！
?
4.2.
/* 購物車的 a標簽*/ .topbar-cart a {/*改屬性變成 塊元素*/display: block;height: 40px;/* 字體高度 文本居中*/line-height: 40px;text-align: center;/* 加寬高和背景*/width: 120px;background-color: #424242; }在瀏覽器中顯示的效果！?
4.3.更正購物車的位置：
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>小米閃購 - 小米商城</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把圖片放到cc文件夾下，直接引入圖片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的樣式--> </head> <body><div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a><span>|</span><!--spen標簽 "|"給加回來--><a href="">MIUI</a><span>|</span><a href="">IOT</a><span>|</span><a href="">云服務</a><span>|</span><a href="">金融</a><span>|</span><a href="">有品</a><span>|</span><a href="">小愛開放平臺</a><span>|</span><a href="">企業服務</a><span>|</span><a href="">Select Region</a><span>|</span></div><div class="topbar-cart"><a href="">購物車<span>（0）</span></a></div><div class="topbar-info"><a href="">登錄</a><a href="">注冊</a><a href="">消息通知</a></div></div></div> </body> </html> body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } /*修改字體 */ body {font: 14px/1.5 "Helvetica Nene",Helvetica,Arial,"Microsoft Yahei","Hiragino SansGB","Heiti SC","WenQuanYi Micro Hei",sans-serif;height: 2500px; } a {text-decoration: none; } .topbar {/*加邊框*//*border: 1px solid black;*/background-color: #333;height: 40px; } .container {/*border: 1px solid black;*//*居中*/margin: 0 auto;width: 1226px; } /*偽元素 清浮動*/ .container::before,.container::after {content: "";/*把行元素變成塊元素 table 固定的給上面加內容*/display: table; } .container::after {/*清浮動*/clear: both; }/*在a標簽加顏色 大小*/ .topbar a {color: #b0b0b0;font-size: 12px; } /*鼠標點擊 a 效果*/ .topbar a:hover {color: #fff; }.topbar-nav {/*浮動*/float: left;/* 添加居中效果 */height: 40px;line-height: 40px;/*設計字體大小 空格就消失了*/font-size: 0; } .topbar-nav span{/* 字體大小 顏色 樣式 距離*/font-size: 12px;color:#424242;font-family: sans-serif;margin: 0.5em; }.topbar-info,.topbar-cart {float:right; } /* 購物車的 a標簽*/ .topbar-cart a {/*改屬性變成 塊元素*/display: block;height: 40px;line-height: 40px;text-align: center;width: 120px;background-color: #424242; }/* 通過span給topbar-cart添加樣式*/ .topbar-cart span {/* 往左移 */margin-left: -4px;font-size: 12px; }在瀏覽器中顯示的效果！
?4.4.1.
/* 鼠標點擊的效果*/ .topbar-cart a:hover {background-color: #fff;color: #ff6700; } /* 通過span給topbar-cart添加樣式*/ .topbar-cart span {/* 往左移 */margin-left: -4px;font-size: 12px; }在瀏覽器中顯示的效果！?
?
5.做tapbar-info效果：
<div class="topbar-cart"><a href="">購物車<span>（0）</span></a></div><div class="topbar-info"><a href="">登錄</a><span>|</span><a href="">注冊</a><span>|</span><a href="" class="sep">消息通知</a></div> .topbar-info span {float: left;/* 字體 */font-family: sans-serif;font-size: 12px;color:#424242;line-height: 40px;height: 40px; } /*重新設置 消息通知 效果*/ .topbar-info .sep {padding: 0 10px; }?
在瀏覽器中顯示的效果！
5.1.完整代碼：
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>小米閃購 - 小米商城</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把圖片放到cc文件夾下，直接引入圖片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的樣式--> </head> <body><div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a><span>|</span><!--spen標簽 "|"給加回來--><a href="">MIUI</a><span>|</span><a href="">IOT</a><span>|</span><a href="">云服務</a><span>|</span><a href="">金融</a><span>|</span><a href="">有品</a><span>|</span><a href="">小愛開放平臺</a><span>|</span><a href="">企業服務</a><span>|</span><a href="">Select Region</a><span>|</span></div><div class="topbar-cart"><a href="">購物車<span>（0）</span></a></div><div class="topbar-info"><a href="">登錄</a><span>|</span><a href="">注冊</a><span>|</span><a href="" class="sep">消息通知</a></div></div></div> </body> </html> body {/*去掉 body里面的默認屬性*/margin:0;padding: 0; } /*修改字體 */ body {font: 14px/1.5 "Helvetica Nene",Helvetica,Arial,"Microsoft Yahei","Hiragino SansGB","Heiti SC","WenQuanYi Micro Hei",sans-serif;height: 2500px; } a {text-decoration: none; } .topbar {/*加邊框*//*border: 1px solid black;*/background-color: #333;height: 40px; } .container {/*border: 1px solid black;*//*居中*/margin: 0 auto;width: 1226px; } /*偽元素 清浮動*/ .container::before,.container::after {content: "";/*把行元素變成塊元素 table 固定的給上面加內容*/display: table; } .container::after {/*清浮動*/clear: both; } /*在a標簽加顏色 大小*/ .topbar a {color: #b0b0b0;font-size: 12px; } /*鼠標點擊 a 效果*/ .topbar a:hover {color: #fff; } .topbar-nav {/*浮動*/float: left;/* 添加居中效果 */height: 40px;line-height: 40px;/*設計字體大小 空格就消失了*/font-size: 0; } .topbar-nav span{/* 字體大小 顏色 樣式 距離*/font-size: 12px;color:#424242;font-family: sans-serif;margin: 0.5em; }.topbar-info,.topbar-cart {float:right; } /* 購物車的 a標簽*/ .topbar-cart a {/*改屬性變成 塊元素*/display: block;height: 40px;line-height: 40px;text-align: center;width: 120px;background-color: #424242; } /* 鼠標點擊的效果*/ .topbar-cart a:hover {background-color: #fff;color: #ff6700; } .topbar-info {margin-right: 15px; } /* 通過span給topbar-cart添加樣式*/ .topbar-cart span {/* 往左移 */margin-left: -4px;font-size: 12px; } .topbar-info a {float: left;/* 上下不動 左右是 */padding: 0 5px;/* 居中 */line-height: 40px;height: 40px; } .topbar-info span {float: left;/* 字體 */font-family: sans-serif;font-size: 12px;color:#424242;line-height: 40px;height: 40px; } /*重新設置 消息通知 效果*/ .topbar-info .sep {padding: 0 10px; }在瀏覽器中顯示的效果！
?
?
總結
以上是生活随笔為你收集整理的xx闪购——顶部的菜单栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle索引使用例子,Oracle中
- 下一篇： 认知http响应头