品優購首頁佈局
命名集合：
| 名稱 | 說明 |
| 快捷導航欄 | shortcut |
| 頭部 | header |
| 標誌 | logo |
| 購物車 | shopcar |
| 搜索 | search |
| 熱點詞 | horwrods |
| 導航 | nav |
| 導航左側 | dorpdown 包含 .dd .dt |
| 導航右側 | navitems |
1. shortcut製作
1.通欄的盒子 命名爲shortcut快捷導航的意思，注意，這裏給行高，可以繼承給裏面的子盒子。
2. 裏面包含版心的盒子。
3. 版心盒子裏麪包含1號左側盒子左浮動。
4. 版心盒子裏麪包含2號右側盒子右浮動。
2. header製作
1. header盒子必須要有高度
2. 1號盒子是logo標誌 定位
3. 2號盒子是search 搜索模塊 定位
4. 3號盒子是hotwrods 熱詞模塊 定位
5. 4號盒子是shopcar 購車車模塊
3. nav製作
1. nav 盒子通欄有高度 而且有個下邊框
2. 1號盒子左側浮動 dorpdown 下拉導航 裏面包含 dt dd
3. 2號盒子右側浮動 navitems 導航欄組
案例命令（1）：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<meta name="description" content="品優購JD.COM- 專業的綜合網上購物商城，銷售家，數碼通訊
，電腦，家居百貨，服裝服飾，母嬰，圖書，食品等數萬個品牌優質商品，
便捷、誠信的服務，爲您提供愉悅的網上購物體驗！"/>
<!-- 引入facicon.ico網頁圖標 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!-- 引入css初始化的css 文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共樣式的css 文件 -->
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<!-- 頂部快捷導航start -->
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品優購歡迎您！</li>
<li>
<a href="#"> 請登錄 </a>
<a href="#" class="style-red"> 免費註冊 </a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的訂單</li>
<li class="spacer"></li>
<li>我的品優購
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li>品優購會員</li>
<li class="spacer"></li>
<li>企業採購</li>
<li class="spacer"></li>
<li>關注品優購
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li>客戶服務
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li>網站導航
<i class="icomoon"></i>
</li>
</ul>
</div>
</div>
</div>
<!-- 定部快捷導航end-->
<!-- header製作 -->
<div class="header w">
<!-- <div class="logo">
<h1>
<a href="index.html">品優購</a>
</h1>
</div> -->
</div>
<!-- header 結束 -->
</body>
</html>
（2）
/*公共樣式*/
.fl {
float: left;
}
.fr {
float: right;
}
@font-face{
font-family:'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkc2') format('truetype'),
url('../fonts/icomoon.woff?7kkc2') format('woff'),
url('../fonts/icomoon.svg?7kkc2#icomoon') format('svg');
font-weight:normal;
font-style :normal;
}
.icomoon{
font-family: 'icomoon';
font-size: 15px;
line-height: 25px;
}
/*版心*/
.w {
width: 1200px;
margin: 0 auto;
}
.style-red{
color: #c81623;
}
.spacer{
width:1px;
height: 12px;
background-color: #666;
margin: 9px 12px 0;
}
/*頂部快捷導航*/
.shortcut{
height: 31px;
background-color: #f1f1f1;
line-height: 31px;
}
.shortcut li{
float: left;
}
/*header區域*/
.header{
position: relative;
height: 105px;
background-color: aquamarine;
}
網頁顯示圖：
logo優化
1.logo裏面首先放一個 h1 標籤， 目的是爲了提權，告訴搜索引擎，這個地方很重要
2. h1 裏面再放一個連接，可以返回首頁的， 給連接一個大小和 logo 的背景圖片
3. 連接裏面要放文字，但是文字不要顯示出來，要用text-indent 移到盒子外面 （text-indent：-9999px）
然後overflow：hidden
4. 最後給連接一個 title 這樣鼠標放到logo上， 就可以看到提示文字了。
網頁實例命令：
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<meta name="description" content="品優購JD.COM- 專業的綜合網上購物商城，銷售家，數碼通訊
，電腦，家居百貨，服裝服飾，母嬰，圖書，食品等數萬個品牌優質商品，
便捷、誠信的服務，爲您提供愉悅的網上購物體驗！"/>
<!-- 引入facicon.ico網頁圖標 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!-- 引入css初始化的css 文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共樣式的css 文件 -->
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<!-- 頂部快捷導航start -->
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品優購歡迎您！</li>
<li>
<a href="#"> 請登錄 </a>
<a href="#" class="style-red"> 免費註冊 </a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的訂單</li>
<li class="spacer"></li>
<li>我的品優購
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li>品優購會員</li>
<li class="spacer"></li>
<li>企業採購</li>
<li class="spacer"></li>
<li>關注品優購
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li>客戶服務
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li>網站導航
<i class="icomoon"></i>
</li>
</ul>
</div>
</div>
</div>
<!-- 定部快捷導航end-->
<!-- header製作 -->
<div class="header w">
<div class="logo">
<h1>
<a href="index.html">品優購</a>
</h1>
</div>
</div>
<!-- header 結束 -->
</body>
</html>
（2）
/*公共樣式*/
.fl {
float: left;
}
.fr {
float: right;
}
@font-face{
font-family:'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkc2') format('truetype'),
url('../fonts/icomoon.woff?7kkc2') format('woff'),
url('../fonts/icomoon.svg?7kkc2#icomoon') format('svg');
font-weight:normal;
font-style :normal;
}
.icomoon{
font-family: 'icomoon';
font-size: 15px;
line-height: 25px;
}
/*版心*/
.w {
width: 1200px;
margin: 0 auto;
}
.style-red{
color: #c81623;
}
.spacer{
width:1px;
height: 12px;
background-color: #666;
margin: 9px 12px 0;
}
/*頂部快捷導航*/
.shortcut{
height: 31px;
background-color: #f1f1f1;
line-height: 31px;
}
.shortcut li{
float: left;
}
/*header區域*/
.header{
position: relative;
height: 105px;
background-color: aquamarine;
}
.logo{
position: absolute;
top: 25px;
left: 0;
width: 175px;
height: 56px;
background-color: purple;
}
.logo{
display: block;
overflow: hidden;
width: 175px;
height: 56px;
background: url(../img/logo.png) no-repeat;
text-indent: -888px;
}
網頁顯示圖：
