學(xué)習(xí)html和css以來恳谎，一直都只是寫的小demo,從沒有寫過一個(gè)完整的網(wǎng)頁,這兩次模仿的騰訊云和簡書頁面就有很大的感觸敦锌。
一允青、寫一個(gè)頁面的過程
1例嘱、布局與規(guī)劃
因?yàn)閷懙氖庆o態(tài)頁面就用的是div+css布局，這種布局就要一開始對自己的頁面的布局和規(guī)劃進(jìn)行構(gòu)思由境，將整個(gè)頁面分為幾個(gè)大的div,并設(shè)置高和寬（注意外面最大盒子不應(yīng)限制高度和寬度棚亩，它應(yīng)該是被很多div撐起來的，如果設(shè)置了大小布局就顯得比較死板）以及div之間的排列方式虏杰，eg:我的簡書布局：
2.寫html文檔和css樣式
給每個(gè)div寫html文檔蔑舞，寫文檔時(shí)理清思路，知道每塊內(nèi)容應(yīng)該使用的標(biāo)簽類型eg:對導(dǎo)航欄的每項(xiàng)內(nèi)容用列表將其排列嘹屯，如果有需要跳轉(zhuǎn)到其他頁面的將鏈接寫在<li></li>標(biāo)簽內(nèi)等攻询。HTML完之后需要對每個(gè)內(nèi)容添加樣式。
3.對細(xì)節(jié)部分進(jìn)行設(shè)計(jì)
對于頁面導(dǎo)航欄置頂州弟、一鍵置頂钧栖、懸停的功能，可以在整個(gè)頁面大體樣式出來之后進(jìn)行單獨(dú)的設(shè)計(jì)婆翔。
二拯杠、印象深刻的問題
- 對于css繼承性問題,子元素會(huì)繼承父元素的屬性。
- 字體類型啃奴，css的font-family屬性中依次添加多個(gè)字體的名稱潭陪，顯示的優(yōu)先級是按先后順序排列的，依次識別。
- 相對大小的設(shè)定
px是相對長度單位依溯，是相對于屏幕分辨率的相對單位老厌，em是根據(jù)繼承關(guān)系的相對單位會(huì)受父元素影響。 - 內(nèi)聯(lián)元素與塊級元素的相互轉(zhuǎn)換
熟練使用display屬性可以實(shí)現(xiàn)塊級元素與內(nèi)聯(lián)元素之間的轉(zhuǎn)換黎炉。
常用display屬性：
none此元素不會(huì)被顯示并且不占用空間枝秤；
block此元素顯示為塊級元素，此元素前后會(huì)帶有換行符慷嗜；
inline默認(rèn)淀弹，此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符庆械；
inline-block行內(nèi)塊元素薇溃，前后無換行符；既具有block的寬高特性又具有inline的同行元素特性缭乘。
- 定位
a> 相對定位：position：relative 不脫離文檔流沐序，參考自身靜態(tài)位置通過定位。但是定位之后它原來位置還在那忿峻。
b> 絕對定位：position:absolute 脫離文檔流，當(dāng)父元素有相對定位時(shí)（一般選取最近的父元素）辕羽，其可通過 top,bottom,left,right 進(jìn)行相對父元素位置的定位逛尚。定位后原來的位置不在。eg:隱藏的下拉菜單刁愿。
c> 固定定位：fixed 固定定位绰寞，所固定的對像是可視窗口而并非是body或是父級元素。eg:導(dǎo)航欄置頂
- 浮動(dòng)造成的BFC問題
很多時(shí)候我們會(huì)用到浮動(dòng)铣口，但是浮動(dòng)會(huì)使該盒子脫離了文檔流滤钱，造成父盒子的塌陷，一般需要給父盒子加入overflew:both或者其他清除浮動(dòng)的方法脑题。 - css偽類hover的使用
要實(shí)現(xiàn)當(dāng)鼠標(biāo)未點(diǎn)擊時(shí)不出現(xiàn)件缸，鼠標(biāo)點(diǎn)擊時(shí)才出現(xiàn)時(shí)可以用到css的偽類hover這個(gè)屬性，如圖可以使鼠標(biāo)點(diǎn)擊id為message1時(shí)message出現(xiàn)叔遂，未點(diǎn)擊時(shí)不出現(xiàn)他炊。
以上只是個(gè)人對制作靜態(tài)網(wǎng)頁小小的總結(jié)，如有錯(cuò)誤已艰，請大佬指點(diǎn)痊末。
