今天在學(xué)習(xí)How2j上的項(xiàng)目仿寫天貓前端時(shí)，遇到的一些問(wèn)題特此記錄下來(lái)。
今天主要學(xué)習(xí)了如何寫上圖的置頂欄，用css和html寫的。天貓首頁(yè)和購(gòu)物車前面圖標(biāo)用的是以及最右邊 的用的是BootStrap框架。因?yàn)橛眠@個(gè)框架圖標(biāo)豐富，不用自己去找。
開(kāi)始沒(méi)看答案時(shí)，把購(gòu)物車移到最右邊，我想的是用css的 text-align:rigth; .但不成功，想了很久都 不知道錯(cuò)在哪。后來(lái)用了浮動(dòng)樣式
float: right !impotyant
移動(dòng)弄成功，但去掉！import就失敗，這句代碼的意思是優(yōu)先級(jí)最高。
后來(lái)我想，都是移動(dòng)的代碼。為什么上面不行，下面就行呢。 text-align:right; 只對(duì)塊級(jí)元素起作用，對(duì)內(nèi)聯(lián)元素不支持。
這是實(shí)驗(yàn)出來(lái)的，不太嚴(yán)謹(jǐn)。
還可以用BootStrap框架，用class = "pull-rigth" 達(dá)到一樣的效果。
用一個(gè)nav列表包裹這些鏈接.我還不知道nav標(biāo)簽。百度后，就是鏈接總標(biāo)簽。單鏈接很多時(shí)，就可以用這個(gè)標(biāo)簽，告訴瀏覽器這個(gè)標(biāo)簽的具體意義。
5 27日更新
做一個(gè)簡(jiǎn)單的搜索框，如下圖
這個(gè)搜索欄實(shí)現(xiàn)思路如下：
天貓圖片設(shè)置為絕對(duì)定位，放到最左邊。輸入搜索欄和下面的文字用div包裹,下面的文字又用一小div包裹。
首先把一個(gè)大div背景色填充為天貓紅，顏色十六進(jìn)制為#40000。
再分別設(shè)置輸入框和按鈕框樣式。首先把他們邊框設(shè)置為透明，再用
outline:none; 設(shè)置邊框輪廓為隱藏，不用這句代碼，當(dāng)鼠標(biāo)點(diǎn)擊輸入框時(shí)會(huì)有別的顏色和紅色重合。
再把按鈕背景色改為天貓紅，顏色改為白色。字體加粗，增大為20px.
在設(shè)置下面小div上面外邊距為5px,左邊外邊距為-20px。設(shè)左外邊距是等會(huì)下面的文字設(shè)外邊距時(shí)能讓
首文字鏈接和輸入框左邊框?qū)ζ洹Ｔ谠O(shè)置每個(gè)鏈接左右外邊距為20px.
然后把整個(gè)div使用 margin: 50px auto 居中，并且上外邊距為50px, auto數(shù)據(jù)中的意思.只有圖片設(shè)置了絕對(duì)定位，才會(huì)生效。
23:20更新 頁(yè)腳上半部
思路還是上面圖片套div，下面每個(gè)購(gòu)物指南，天貓保障等分別套div。再用div把這兩個(gè)套進(jìn)去。
主要對(duì)購(gòu)物指南，天貓保障平衡排列以及和他們下面文字排列卡著了。
把他們每個(gè)都用浮動(dòng) float: left 就能實(shí)現(xiàn)平衡排列了，因?yàn)槭褂酶?dòng)會(huì)先把他們轉(zhuǎn)換為
display: inline-block 內(nèi)聯(lián)元素，內(nèi)聯(lián)元素是不換行的，在之后使 line boxes高度坍塌，也就是沒(méi)有高度，就實(shí)現(xiàn)水平排列了。
下面的文字鏈接使用的是<a>標(biāo)簽，是內(nèi)聯(lián)元素，不換行。就需要用 display: block 轉(zhuǎn)換為塊級(jí)元素可。
5.28 11:38更新
頁(yè)腳下半部
這個(gè)制作沒(méi)什么難度，但還是被我大意單詞寫錯(cuò)一些小毛病。找了半天才找出來(lái)，以后要注意了！
不過(guò)還是對(duì)margin 和padding 內(nèi)邊距和外邊距理解加深樂(lè)意一些。外邊距下面是對(duì)他底下的元素而言，而內(nèi)邊距下面是對(duì)自己而言
