在頁面設(shè)計時，我們都需要用到css樣式表。我們在設(shè)計頁面時，都需要一定的美學(xué)在里面。符合市場的需求和用戶的習(xí)慣?，F(xiàn)在的頁面的設(shè)計是越來越講究簡潔，優(yōu)雅，而富有動感。更加體貼用戶的操作和上網(wǎng)操作。這是我們的設(shè)計理念。

在一個完整的網(wǎng)頁設(shè)計中，我們需要先架設(shè)網(wǎng)頁的結(jié)構(gòu)。這是非常基礎(chǔ)的。網(wǎng)頁的結(jié)構(gòu)是考驗我們對盒模型的理解和掌握。還有對標(biāo)簽的語義化的理解。因為在html5中，我們的規(guī)范是我們的標(biāo)簽的使用和語義化。要符合標(biāo)簽的特性。這是，我們要注意的。一些標(biāo)簽的分類是很重要的，行內(nèi)元素，塊元素，行內(nèi)塊的元素。是我們元素的基本屬性。我們要第一要明白的元素的特性。比如，mata標(biāo)簽是提示頁面的關(guān)鍵信息和內(nèi)容。a標(biāo)簽是導(dǎo)航的信息標(biāo)簽。b ，i標(biāo)簽是強(qiáng)調(diào)的信息等等。我們要語義化的使用標(biāo)簽。p標(biāo)簽是表示段落的標(biāo)簽。br標(biāo)簽是換行的作用。還有分組的行的標(biāo)簽。ul ol tr td ?li ? div dl dt dd ?這些標(biāo)簽是表示分組的功能。可以模擬塊狀的概念，說明列表的 無序列表（ul） 有序列表（ol）（dl）表示定義一系列的術(shù)語和說明的列表。在分組的標(biāo)簽中，我們還是比較常見的。hr標(biāo)簽是表示段落的主題轉(zhuǎn)換。div是盒模型，是我們頁面結(jié)構(gòu)的最基礎(chǔ)的元素。

在劃分內(nèi)容方面，我們可以使用article元素，footer元素 header元素，nav元素，section元素，aside元素。這是我們在頁面結(jié)構(gòu)中，必須要用的元素。都是塊級元素。結(jié)合我們其他的元素（表示文本的元素，表示分組的元素，表示制表的元素，表示創(chuàng)建表單的元素，盒模型的元素。）結(jié)合使用就可以我們的結(jié)構(gòu)更加合理一些。我們可以考慮表格的用法。

在調(diào)試復(fù)雜的每個元素的距離時，我們可以多用盒模型來容納起來，可以整體的來調(diào)試樣式。通過盒模型的屬性來進(jìn)行設(shè)置每個元素的距離。還有注意的是權(quán)重的限制。在多嵌套的時候，我們要盡量寫完整選擇器，才能有效的避免權(quán)重的限制。在使用元素進(jìn)行布局時，我們要注意是，元素的類型和特點。行內(nèi)元素的 塊狀元素，行內(nèi)塊的元素的特點。是否獨占一行，能不能和其他元素共享一行等。這是基礎(chǔ)的東西。我們在設(shè)置元素結(jié)構(gòu)的樣式時，我們需要從外到內(nèi)來進(jìn)行一級一級的設(shè)置。不要東設(shè)西設(shè)，最忌諱這樣設(shè)置css樣式。我們在設(shè)置浮動的時候，我們要注意是浮動的特性。hover的特性。

在css中，我們學(xué)習(xí)的比較重要的是，定位。在今天的學(xué)習(xí)中，我們學(xué)習(xí)的是改變元素在容器塊中的定位方式。position使用的是這個屬性。在定位的方式是三個方面屬性。position relative 相對定位 position absolute 是絕對對位。position fixed 是固定定位。還有設(shè)置定位元素相對于容器的邊界的偏移量的屬性。top left bottom right 屬性。設(shè)置元素的層疊順序。z-index 屬性。可以設(shè)置定位的權(quán)限。防止定位的覆蓋。如果發(fā)生定位的覆蓋的話，我們可以在權(quán)限上去調(diào)式。用z-index去調(diào)。z-index屬性是劃分層疊的關(guān)系。是上下文的層疊關(guān)系。只限于定位元素。層疊的關(guān)系是內(nèi)容，定位 浮動 ?block盒子 負(fù)z-index屬性 層疊上下文。在嵌套多層定位時，我們要注意的是子集和父集之間的關(guān)系。position absolute的絕對定位的特性。是以離它最近的父集定位元素為基準(zhǔn)。所以，我們要調(diào)好定位元素的父子集的關(guān)系?？梢砸来吻短锥ㄎ弧Ｒ部梢栽O(shè)置定位元素的重合。來進(jìn)行滑動切換。通過顯示和隱藏來進(jìn)行滑動的切換。這是定位的妙用。因為定位的元素的位置是隨機(jī)的，我們可以先將定位的元素的偏移量（top,left）為零。再來進(jìn)行設(shè)置具體的偏移量。

需要注意的是：如果<span> <a>元素，絕對定位后，會改變<span><a>標(biāo)簽的display類型。成為塊級元素。這個我們需要注意的是span標(biāo)簽和a標(biāo)簽絕對定位的時候，元素類型的改變。還有，在重置樣式表中，@charset "utf-8"; 這個分號一定要加上。不然，下面的重置樣式是無效的。

<button></button> 標(biāo)簽，我們會經(jīng)常遇到<button>標(biāo)簽與input標(biāo)簽的對齊來進(jìn)行制作搜索框的實例。我們通過圓角的變化來進(jìn)行設(shè)計搜索框的樣式。一個完整的網(wǎng)站的需要不同的搜索框，來搜索內(nèi)容。提交數(shù)據(jù)。在樣式的變化上，我們一般會用到的input標(biāo)簽和form表單一起連用。數(shù)據(jù)的提交一般離不開不了form表單。向后臺提交數(shù)據(jù)。在input和submit或者是button按鈕的對齊方式上。我們經(jīng)常會發(fā)現(xiàn)對不齊的現(xiàn)象。因為在行內(nèi)塊的元素的需要用到vertial-align的屬性的。這個屬性，可以用到行內(nèi)塊的元素的對齊方式的。比如像圖片 input標(biāo)簽等等，我們都需要用到的屬性的。在搜索框的對齊方式上，我們用到的是vertiacl-align:middle;這個方式來進(jìn)行對齊input和submit的對齊方式的，在高度的上的對齊，button按鈕，submit和input的高度是不一樣的，因為兩種方式是在所按的標(biāo)準(zhǔn)的不一樣，也就是說，button和submit按鈕是按照的是高度包含邊框，而input標(biāo)簽是不包含這邊框的。所以，我們要考慮的是邊框的寬度。這是我們要經(jīng)常用到的。還有各種豎杠，也是通過span標(biāo)簽來進(jìn)行操作。通過高度，寬度，邊框的寬度來進(jìn)行操作的。我們可以通過各種方式來進(jìn)行。注意：在行內(nèi)塊的元素是有3像素的間隔的。我們可以通過浮動來進(jìn)行解決的。

在css樣式中，我們要避免設(shè)置的是id樣式。權(quán)重高，會對后面的元素造成影響的。這個是經(jīng)驗的。樣式的設(shè)置要分析好結(jié)構(gòu)的，通過類選擇器的作用，我們可以一樣的樣式統(tǒng)一設(shè)置的。這樣可以減少我們的工作量。