項(xiàng)目文件夾的建立
1.首先在工作區(qū)建立新的文件夾newfolder
2.在newfolder文件夾下新建upload文件夾，images文件夾，css文件夾，所需要的字體圖標(biāo)的fonts文件夾也移動(dòng)到newfolder文件夾下。完成后在vscode編程軟件中在根目錄下創(chuàng)建第一個(gè)html頁面：index.html。
3.在css文件夾下，創(chuàng)建base.css基本初始化樣式和common.css公共樣式。此次base.css使用了某東的初始化樣式表，用于清除原有的內(nèi)外邊距、文字效果、列表樣式、圖片空白縫隙等問題。
4.在index.html中引入這兩個(gè)css樣式表
<!-- 引入初始化樣式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公眾樣式 -->
<link rel="stylesheet" href="css/common.css">
ico圖標(biāo)
如圖所示，網(wǎng)站標(biāo)題前面的小圖標(biāo)就是ico圖標(biāo)。
使用ico圖標(biāo)分為三個(gè)步驟：
- 制作ico圖標(biāo)。通常是美工人員制作，前端人員拿來用。
- 把制作的png圖標(biāo)拿到專業(yè)轉(zhuǎn)換圖片格式的網(wǎng)站去調(diào)整為ico格式的圖標(biāo)。例如：http://www.ico51.cn/
-
最后把制作好的ico圖標(biāo)（命名為favicon.ico)放在該項(xiàng)目文件夾的根目錄下，如圖。同時(shí)引入首頁中(引入代碼基本固定）。
image.png
<!-- 引入ico圖標(biāo) -->
<link rel="shortcut icon" href="favicon.ico">
網(wǎng)站TDK的三大標(biāo)簽SEO優(yōu)化
在實(shí)際開發(fā)中經(jīng)常使用，給網(wǎng)站提權(quán)，使其在搜索引擎中排名更靠前。
TDK三大標(biāo)簽分別是：title、description和keywords。
三者填寫的內(nèi)容由SEO人員編寫，前端人員可以直接拿來使用，并引入首頁中。
<title>拼拼購商城-綜合網(wǎng)購首選-正品低價(jià)、品質(zhì)保障、愉快購物！</title>
<!-- 網(wǎng)站說明 -->
<meta name="description" content="拼拼購商城-專業(yè)的綜合網(wǎng)上購物商城，集銷售家電，數(shù)碼通訊，母嬰，圖書等數(shù)萬個(gè)品牌優(yōu)質(zhì)商品，為您提供愉悅的網(wǎng)上購物體驗(yàn)">
<!-- 關(guān)鍵詞 -->
<meta name="keywords" content="智能手機(jī),xx電腦,冰箱,品牌女裝">
查看布局，設(shè)置版心
電商網(wǎng)頁大多數(shù)主體部分都在版心位置，因此在common.css中設(shè)置版心（類名為w）的寬度且居中。
浮動(dòng)必不可少，鑒于整體布局中有左浮動(dòng)和有浮動(dòng)。在common.css中寫左浮樣式和右浮樣式。此次網(wǎng)頁設(shè)計(jì)有大量同樣的紅色元素一同寫入。
/* 版心設(shè)置 */
.w {
width: 1200px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.style_red {
color: #c81623;
}
快捷導(dǎo)航shortcut
思路：
1.快捷導(dǎo)航欄類名為shortcut，其中在版心區(qū)域包括兩個(gè)盒子，一個(gè)左浮動(dòng)，一個(gè)右浮動(dòng)。
2.左浮動(dòng)盒子中包括兩部分，可以用ul+li來做。第一部分是歡迎語，第二部分是登錄與注冊。
3.右浮動(dòng)盒子里也使用ul+li標(biāo)簽，把小標(biāo)題和小豎線都作為一個(gè)小盒子，然后用左右margin值撐開距離。
4.某些小標(biāo)題后的向下的箭頭使用i/em標(biāo)簽把箭頭放入，或者利用after偽元素。此處應(yīng)用了字體圖標(biāo)（先聲明，后引用）。
項(xiàng)目頭部
頭部：四部分，用定位
logo
搜索框（search）（input，button）
兩個(gè)行內(nèi)塊會有空隙但使用浮動(dòng)會清除掉。
行內(nèi)元素?zé)o法設(shè)置margin的上下值，但可以設(shè)置左右值。
placeholder屬性設(shè)置搜索框中默認(rèn)顯示的文字。
使用定位即可。
熱詞（hotwords）
a標(biāo)簽
- 定位，子絕父相。
- margin值撐開左右邊距
購物車模塊（shopcar）
<!-- 購物車模塊 -->
<div class="shopcar">
我的購物車
<i class="icon">8</i>
</div>
- 首先設(shè)置購物車這個(gè)大盒子的寬高，定位數(shù)值，邊框設(shè)置。盒子內(nèi)部文字大小顏色，背景色，文字垂直居中。
- 使用before、after偽元素添加字體圖標(biāo)，再使用margin調(diào)整位置距離。
.shopcar::before {
content: '\e93a';
font-family: icomoon;
margin-right: 6px;
}
.shopcar::after {
content: '\e920';
font-family: icomoon;
margin-left: 6px;
}
- 購物車的右上角數(shù)字信息使用i標(biāo)簽書寫，因?yàn)椴淮_定數(shù)字大小位數(shù)所以不設(shè)寬度，只設(shè)置高度，填充，字體顏色背景色等，由于繼承了父元素的行高影響，在此元素的樣式設(shè)置中還要再設(shè)置行高，并且定位到準(zhǔn)確位置。注意：最好使用left，使其數(shù)字變多后盒子向右撐開符合大眾要求。
nav導(dǎo)航欄
