web前端Html+css課程筆記，HTML5從入門到精通-布局方案與整頁(yè)制作

時(shí)間：2023-07-26 14:36:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-26 14:36:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

web前端Html+css課程筆記，HTML5從入門到精通-布局方案與整頁(yè)制作：白嫖上岸的我，分享一下web前端Html和css課程學(xué)習(xí)時(shí)的筆記， 如果你需要這門課的所有資料，我也是有的，如果需要可以評(píng)論區(qū)留言或者私信我，看到就發(fā)你們，免費(fèi)。整理分享不容易，關(guān)注我啊～首先，來(lái)一張學(xué)習(xí)HTML5從入門到精通-布局方案與整頁(yè)制作內(nèi)容的學(xué)習(xí)路線圖




CSS布局

閱讀刊物時(shí)可以發(fā)現(xiàn)，雖然刊物中的內(nèi)容很多，但經(jīng)過(guò)合理的排版，版面將會(huì)變得清晰、易讀。同理在制作網(wǎng)頁(yè)時(shí)，如果想要使網(wǎng)頁(yè)結(jié)構(gòu)清晰，也需要通過(guò)CSS布局對(duì)網(wǎng)頁(yè)進(jìn)行整理。本節(jié)將對(duì)常用的幾種CSS布局進(jìn)行詳細(xì)講解。

固定布局

固定布局是利用容器寬為固定值的方式來(lái)實(shí)現(xiàn)。固定布局是最簡(jiǎn)單的布局方案，可以分為一列布局、二列布局、三列或多列布局等。

1. 固定一列布局

固定一列布局，即一行只顯示一列的布局方式，容器寬度值為固定值。

2. 固定二列布局

固定二列布局，即一行顯示兩列的布局方式，兩列容器寬度值都為固定值，左右排列需要設(shè)置浮動(dòng)屬性。

3. 固定三列布局

固定三列布局，即一行顯示三列的布局方式，三列寬度值都為固定值，左、中、右排列需要設(shè)置浮動(dòng)屬性。

自適應(yīng)布局

自適應(yīng)布局是利用容器寬為百分比或auto的方式來(lái)實(shí)現(xiàn)，是網(wǎng)頁(yè)中比較常見(jiàn)的布局方式。也可以分為一列布局、二列布局、三列或多列布局等。

1. 自適應(yīng)一列布局

自適應(yīng)一列布局通過(guò)給容器元素設(shè)置寬度值為百分比或auto的方式來(lái)實(shí)現(xiàn)。

2. 自適應(yīng)二列布局

自適應(yīng)二列布局可以通過(guò)兩列都自適應(yīng)和一列自適應(yīng)一列固定兩種布局方式實(shí)現(xiàn)，接下來(lái)分別介紹這兩種實(shí)現(xiàn)自適應(yīng)兩列布局的方式。

（1）首先介紹二列都自適應(yīng)的布局方式。

（2）下面介紹一列固定一列自適應(yīng)的布局方式。

通過(guò)給固定列進(jìn)行浮動(dòng)處理，使固定列脫離文檔流，自適應(yīng)列位于固定列的右方。然后給自適應(yīng)列設(shè)置margin-left值為固定列的寬度值，這樣就可以達(dá)到一列固定一列自適應(yīng)且左右排列展示的布局效果。

除了通過(guò)浮動(dòng)的方式可以脫離文檔流外，還可以利用絕對(duì)定位的方式來(lái)實(shí)現(xiàn)同樣的布局方式，修改上例代碼即可，示例代碼如下。

3. 自適應(yīng)三列布局

自適應(yīng)三列布局方案與兩個(gè)布局方案類似，但要注意讓固定的列一定要書寫在HTML結(jié)構(gòu)的最后，這樣才能利用脫離文檔流的形式來(lái)實(shí)現(xiàn)。

混合布局

混合布局是把不同的布局方案結(jié)合到一起，來(lái)適應(yīng)復(fù)雜的布局需求。具體分為如下兩類。

1. 固定與自適應(yīng)混合

固定與自適應(yīng)混合布局是很常見(jiàn)的組合方式，如千鋒官網(wǎng)的頭部效果，如圖所示。

圖中可以看到內(nèi)容區(qū)域是固定展示的，而周圍的背景色是自適應(yīng)展示，這種方式就是固定與自適應(yīng)混合的布局方式。

例中通過(guò)嵌套標(biāo)簽的方式來(lái)實(shí)現(xiàn)固定與自適應(yīng)布局混合，父容器采用自適應(yīng)布局，子容器采用固定布局，即可達(dá)到混合的目的。

2. 不同列混合

不同列混合指的是在多行展示中，每一行所展現(xiàn)的列數(shù)可能是不相同的，如優(yōu)酷官網(wǎng)的主體效果，如圖所示。

圖優(yōu)酷官網(wǎng)主體效果

可以看到圖中，每一行的列數(shù)都不相同，且排列也沒(méi)太多規(guī)則，這里需要對(duì)每一行進(jìn)行單獨(dú)的布局設(shè)置。

混合布局

整頁(yè)制作

學(xué)習(xí)了常見(jiàn)的布局方案，將講解開(kāi)發(fā)一個(gè)整頁(yè)的布局，從規(guī)劃到制作的整頁(yè)制作設(shè)計(jì)圖。如圖所示。

結(jié)構(gòu)劃分與公共樣式

首先確定整頁(yè)的結(jié)構(gòu)該如何劃分，這樣有利于后期分段進(jìn)行處理，大概可劃分為頭部、導(dǎo)航、廣告、列表、信息、尾部等模塊。

然后提取整頁(yè)中公共部分的樣式，這樣做的好處是可以復(fù)用樣式代碼，節(jié)省代碼量，提高性能。如網(wǎng)頁(yè)中清除浮動(dòng)的.clear樣式就是公共樣式，同樣CSS reset部分也是屬于公共部分的樣式。

結(jié)構(gòu)劃分和公共樣式都確定好后，可以先通過(guò)注釋的方式，把區(qū)域確定出來(lái)，方便后續(xù)操作。示例代碼如下。

網(wǎng)頁(yè)模塊命名規(guī)范

網(wǎng)頁(yè)模塊的命名，如果沒(méi)有統(tǒng)一的命名規(guī)范對(duì)其進(jìn)行必要的約束（自由地命名），會(huì)使后續(xù)工作難以進(jìn)行。因此，命名規(guī)范很重要，讀者應(yīng)予以重視。通常網(wǎng)頁(yè)模塊的命名需要遵循以下三個(gè)原則：

l 命名避免使用中文字符（如id=”內(nèi)容”）。

l 命名不能以數(shù)字開(kāi)頭（如id=”1header”）。

l 命名不能使用關(guān)鍵字（如id=”div”）。

命名應(yīng)盡量用最少的字母表達(dá)含義，使之簡(jiǎn)明、易懂。

在網(wǎng)頁(yè)開(kāi)發(fā)中，常用駝峰式命名和帕斯卡命名兩種命名方式。其具體解釋如下所述。

l 駝峰式命名：除第一個(gè)單詞后面的單詞首字母都要大寫，其余小寫，如navOne。

l 帕斯卡命名：每個(gè)單詞之間用“_”連接，如nav_one。

下面列舉網(wǎng)頁(yè)中常用的一些命名。具體如表所示。

表 常用命名

模塊	命名	模塊	命名
頭部	header	標(biāo)簽頁(yè)	tab
內(nèi)容	content/container	文章列表	list
尾部	footer	提示信息	msg
導(dǎo)航	nav	小技巧	tips
子導(dǎo)航	subnav	欄目標(biāo)題	title
側(cè)欄	sidebar	加入	joinus
欄目	column	指南	guild
左右中	left right center	服務(wù)	service
登錄條	loginbar	注冊(cè)	regsiter
標(biāo)志	logo	狀態(tài)	status
廣告	banner	投票	vote
頁(yè)面主體	main	合作伙伴	partner
熱點(diǎn)	hot	CSS文件	命名
新聞	news	主要的	master.css
下載	download	模塊	module.css
菜單	menu	基本共用	base.css
子菜單	submenu	布局，版面	layout.css
搜索	search	主題	themes.css
友情鏈接	frIEndlink	專欄	columns.css
頁(yè)眉	header	文字	font.css
頁(yè)腳	footer	表單	forms.css
版權(quán)	copyright	補(bǔ)丁	mend.css
滾動(dòng)	scroll	打印	print.css

頭部制作

頭部采用固定布局方案，通過(guò)Photoshop工具可測(cè)量出容器大小為950px。頭部包含logo和菜單兩部分，其HTML結(jié)構(gòu)實(shí)現(xiàn)，示例代碼如下。

logo的位置可以通過(guò)盒子模型的margin值來(lái)控制。菜單的父容器采用右浮動(dòng)，菜單子項(xiàng)采用左浮動(dòng)，這樣菜單可以采用整體靠右的形式進(jìn)行排序。菜單項(xiàng)的文字與圖標(biāo)之間的空隙可以通過(guò)盒子模型的padding屬性來(lái)調(diào)整。

導(dǎo)航制作

導(dǎo)航部分采用混合布局方式，里面的內(nèi)容是固定布局，父容器是自適應(yīng)布局。導(dǎo)航分為左邊的主導(dǎo)航、右側(cè)的分享導(dǎo)航和下方的子導(dǎo)航。其實(shí)現(xiàn)HTML結(jié)構(gòu)。

主導(dǎo)航整體左浮動(dòng)，分享導(dǎo)航整體右浮動(dòng)。這里要注意，主導(dǎo)航有個(gè)選中的狀態(tài)，需要添加一個(gè)單獨(dú)的樣式，即active樣式。具體代碼如下。

整頁(yè)制作

廣告制作

廣告主要以圖片展示為主，HTML+CSS結(jié)構(gòu)都比較簡(jiǎn)單，屬于一列布局方式，具體代碼如下。

展示效果如圖所示。

列表制作

列表屬于三列固定布局，采用浮動(dòng)+固定寬的方式來(lái)實(shí)現(xiàn)。根據(jù)不同的展現(xiàn)內(nèi)容，采用合理的語(yǔ)義化標(biāo)簽展示。其實(shí)現(xiàn)HTML結(jié)構(gòu)，代碼示例如下。

代碼中用到一個(gè)CSS3中操作子項(xiàng)的方法，即nth-of-type，這個(gè)可以針對(duì)一組元素進(jìn)行不同樣式的操作，此操作會(huì)在CSS3章節(jié)中進(jìn)行詳細(xì)講解，這里暫時(shí)先使用一下。

信息制作

消息區(qū)域采用兩列固定布局來(lái)實(shí)現(xiàn)。一列靠左，一列靠右，這里HTML+CSS比較簡(jiǎn)單。

尾部制作

尾部部分與導(dǎo)航部分類似，同樣采用混合布局方式，即內(nèi)容區(qū)域采用固定布局，父容器采用自適應(yīng)布局。

瀏覽器兼容性

由于某些因素，不同的瀏覽器不能完全地采用統(tǒng)一的Web標(biāo)準(zhǔn)，或者說(shuō)不同的瀏覽器對(duì)于同一個(gè)網(wǎng)頁(yè)有不同的解析。因此會(huì)導(dǎo)致同一個(gè)網(wǎng)頁(yè)在不同的瀏覽器下顯示效果可能不同。為了保證頁(yè)面的統(tǒng)一，往往需要對(duì)網(wǎng)頁(yè)進(jìn)行瀏覽器兼容問(wèn)題的調(diào)試。本節(jié)將以谷歌、IE兩個(gè)瀏覽器為例，對(duì)瀏覽器兼容性問(wèn)題的調(diào)試方法進(jìn)行詳細(xì)講解。

CSS Hack

解決瀏覽器的兼容性問(wèn)題，通常需要通過(guò)CSS樣式來(lái)調(diào)試，最常用的是CSS Hack。CSS Hack是為不同版本的瀏覽器定制編寫不同的CSS效果，使用每個(gè)瀏覽器單獨(dú)識(shí)別的樣式代碼，控制瀏覽器的顯示樣式。CSS Hack主要分為CSS選擇器Hack和CSS屬性Hack兩類，下面將詳細(xì)介紹這兩類CSS Hack。

1. CSS選擇器Hack

CSS選擇器Hack是通過(guò)在CSS選擇器前，加上只有特定瀏覽器才能識(shí)別的Hack前綴，從而控制不同的CSS樣式。針對(duì)不同版本的瀏覽器，選擇器Hack分為以下兩類：

（1）IE6及IE6以下版本的瀏覽器可以識(shí)別的選擇器Hack

編寫CSS樣式代碼時(shí)，如果想要此樣式只是針對(duì)IE6及IE6以下版本的瀏覽器生效，可以使用IE6及以下版本的選擇器Hack，其語(yǔ)法格式如下。

*html 選擇器{樣式代碼}

在Chrome和IE6瀏覽器中的運(yùn)行結(jié)果分別如圖所示。

（2）只有IE7瀏覽器可以識(shí)別的選擇器Hack

編寫CSS樣式代碼時(shí)，如果此樣式只是針對(duì)IE7瀏覽器生效，可以使用只有IE7識(shí)別的選擇器Hack，其語(yǔ)法格式如下。

*+html 選擇器{樣式代碼}

2. CSS屬性Hack

CSS屬性Hack是通過(guò)在CSS屬性名前加上只有特定瀏覽器才能識(shí)別的Hack前綴，如“_size：300px”中的Hack前綴“_”只對(duì)IE6瀏覽器生效。下面介紹針對(duì)不同版本的瀏覽器，CSS屬性Hack中的兩類：

（1）IE6及IE6以下版本的瀏覽器可以識(shí)別的屬性Hack

編寫CSS樣式代碼時(shí)，如果想要此樣式只對(duì)IE6及IE6以下版本的瀏覽器生效，可以使用IE6及IE6以下版本的CSS屬性Hack，其語(yǔ)法格式如下：

_屬性：樣式代碼;

（2） IE7及IE7以下版本的瀏覽器可以識(shí)別的屬性Hack

編寫CSS樣式代碼時(shí)，如果想要此樣式只對(duì)IE7及IE7以下版本的瀏覽器生效，可以使用IE7及IE7以下版本的CSS屬性Hack，其語(yǔ)法格式如下。

+或*屬性：樣式代碼;

注意：

CSS Hack能夠針對(duì)不同的瀏覽器編寫不同的CSS樣式代碼，從而實(shí)現(xiàn)兼容最大化。但當(dāng)多次重復(fù)定義CSS樣式時(shí)，瀏覽器會(huì)默認(rèn)執(zhí)行最后定義的樣式，因此，在使用CSS Hack時(shí)，一定要按照瀏覽器版本從高到低的順序編寫樣式。

下面列舉一些CSS Hack，如表10.2和表10.3所示。以方便讀者查看。

表10.2 選擇器Hack

選擇器Hack寫法	針對(duì)的瀏覽器
@media screen/9{body{樣式代碼}}	只對(duì)IE6/IE7有效
@media /0screen{body{樣式代碼}}	只對(duì)IE8有效
@media /0screen/,screen/9{body{樣式代碼}}	只對(duì)IE6/IE7/IE8有效
@media screen/0{body{樣式代碼}}	只對(duì)IE8/IE9/IE10有效
@media csreen and (-ms-high-contrast:active), (-ms-high-contrast:name){body{樣式代碼}}	只對(duì)IE10有效

表10.3 屬性Hack

CSS屬性Hack(前綴)	針對(duì)的瀏覽器
_color:red;	IE6及其以下的版本
*color:red;或+color:red;	IE7及其以下的版本
color:red/9	IE6/IE7/IE8/IE9/IE10版本
color:red/0	IE8/IE9/IE10版本
color:red/0/9	IE9/IE10
color:red!important	IE7/IE8/IE9/IE10及其他非IE瀏覽器

IE條件注釋語(yǔ)句

在開(kāi)發(fā)中，IE瀏覽器的兼容性問(wèn)題比較多，經(jīng)常需要對(duì)其兼容性進(jìn)行調(diào)試，因此，微軟官方專門提供了“IE條件注釋語(yǔ)句”。“IE條件注釋語(yǔ)句”是專門針對(duì)IE瀏覽器的Hack，對(duì)于不同版本的IE瀏覽器，編寫方法也不同。其主要包括判斷瀏覽器類型的條件注釋語(yǔ)句和判斷IE版本的條件注釋語(yǔ)句。其具體介紹如下。

1. 判斷瀏覽器類型的條件注釋語(yǔ)句

判斷瀏覽器類型的條件注釋語(yǔ)句用于判斷瀏覽器類型是否為IE瀏覽器，其基本語(yǔ)法格式如下。

其中，第一行中的IE代表瀏覽器的類型，表示該條件注釋語(yǔ)句只能被IE瀏覽器識(shí)別。

2. 判斷IE版本的條件注釋語(yǔ)句

判斷IE版本的條件注釋語(yǔ)句用于判斷IE瀏覽器的版本，其基本語(yǔ)法格式如下。

其中，第一行的IE7代表IE瀏覽器的版本號(hào)，表示該注釋語(yǔ)句只能被當(dāng)前IE版本瀏覽器識(shí)別。

下面列舉一些常用的IE條件注釋語(yǔ)句，如表所示。

表 IE條件注釋語(yǔ)句

IE條件注釋語(yǔ)句	針對(duì)的瀏覽器版本
<!—[if lt IE7]>內(nèi)容<![endif]-->	IE7以下的版本
<!—[if lte IE7]>內(nèi)容<![endif]-->	IE7及其以下的版本
<!—[if gt IE7]>內(nèi)容<![endif]-->	IE7以上版本
<!—[if gte IE7]>內(nèi)容<![endif]-->	IE7及其以上版本
<!—[if !IE7]>內(nèi)容<![end if]-->	非IE7版本
<!—[if !IE]><!-->內(nèi)容<!--<![endif]-->	非IE瀏覽器

表中出現(xiàn)了lt、lte、gt、gte和！等字母符號(hào)。

l gt(greater than)：選擇條件版本以上版本，不包含條件版本；

l lt(less than)：選擇條件版本以下版本，不包含條件版本；

l gte(greater than or equal)：選擇條件版本以上版本，包含條件版本；

l lte(less than or equal)：選擇條件版本以下版本，包含條件版本；

l !：選擇條件版本以外的所有版本，無(wú)論高低；

常見(jiàn)IE6瀏覽器的兼容性問(wèn)題

在實(shí)際開(kāi)發(fā)工作中，出現(xiàn)瀏覽器兼容性問(wèn)題比較多的瀏覽器是IE6瀏覽器，舉一些常見(jiàn)的IE6瀏覽器兼容性問(wèn)題及其解決方法。

1. IE6顯示多余字符問(wèn)題

在IE6瀏覽器中，當(dāng)兩個(gè)浮動(dòng)元素之間加入HTML注釋時(shí)，會(huì)產(chǎn)生多余字符。

解決IE6瀏覽器的兼容問(wèn)題，有三個(gè)解決方法，具體如下：

l 刪除HTML注釋；

l 在產(chǎn)生多余字符的標(biāo)簽的CSS樣式中添加“position:relative”樣式；

l 不設(shè)置浮動(dòng)div的寬度；

2. IE6瀏覽器中元素最小高度的問(wèn)題

IE6瀏覽器有默認(rèn)的最小像素高度19px，因此它無(wú)法識(shí)別19px以下的高度值。

解決這個(gè)問(wèn)題有兩種方法，具體如下。

l 為元素定義“overflow:hidden”樣式，通過(guò)這個(gè)樣式，將超出的部分隱藏；

l 為元素定義“font-size:0”樣式；

兩種方法都可以解決IE6瀏覽器不能識(shí)別低于19px高度的問(wèn)題，但第二種方法會(huì)妨礙字體大小的設(shè)置，因此建議使用第一種方法。

3. IE6瀏覽器中浮動(dòng)元素的雙倍外邊距問(wèn)題

在制作網(wǎng)頁(yè)時(shí)，經(jīng)常出現(xiàn)IE6瀏覽器浮動(dòng)的雙倍外邊距問(wèn)題，即設(shè)置浮動(dòng)元素的左外邊距或右外邊距時(shí)，在IE6瀏覽器中運(yùn)行，元素對(duì)應(yīng)的左外邊距或右外邊距是所設(shè)置值的兩倍。

IE6瀏覽器中元素的左外邊距是在Chrome瀏覽器中左外邊距的兩倍。IE6瀏覽器中的雙倍外邊距問(wèn)題可以通過(guò)為元素定義“display：inline”CSS演示解決。例中在box2的CSS樣式中添加代碼如下。

_display:inline;

可以看到，在上述代碼中加了只針對(duì)IE6瀏覽器的CSS屬性Hack前綴“_”，這是因?yàn)橹挥蠭E6瀏覽器有這個(gè)兼容問(wèn)題。

4. IE6中3px間距問(wèn)題

當(dāng)非浮動(dòng)元素或者文本在一個(gè)浮動(dòng)元素之后，運(yùn)行在IE6瀏覽器中時(shí)，非浮動(dòng)元素或文本與浮動(dòng)元素之間會(huì)有3px的間距，這就是典型的IE6的3px間距問(wèn)題。

在Chrome瀏覽器中正常顯示，在IE6瀏覽器中，文本和浮動(dòng)盒子之間會(huì)有3px間距。可以通過(guò)為浮動(dòng)元素設(shè)置負(fù)外邊距的方法解決IE6瀏覽器中的這個(gè)問(wèn)題。在例10-17的CSS樣式中提添加代碼，具體代碼如下。

_margin-right:-3px; /*這里要使用只有IE6識(shí)別的屬性Hack*/

5. IE6中圖片底部的像素間隙問(wèn)題

一張圖片插入到與其大小相同的元素中，當(dāng)在IE6瀏覽器中顯示時(shí)，圖片底部會(huì)有3px的間隙。

解決這種IE6瀏覽器的兼容性問(wèn)題有以下兩種解決方法。

（1）<img>標(biāo)簽與<div>標(biāo)簽放在同一行，如例中，將第11行和第12行代碼合成一行，具體示例如下。

（2）為<img>定義“display：block”樣式，具體示例如下。

為了便于閱讀，在實(shí)際開(kāi)發(fā)中常建議使用第二種方法。




布局方案與整頁(yè)制作小結(jié)

通過(guò)學(xué)習(xí)掌握常見(jiàn)的布局方案，以及實(shí)現(xiàn)一個(gè)整頁(yè)開(kāi)發(fā)，通過(guò)整頁(yè)開(kāi)發(fā)學(xué)習(xí)到如何規(guī)劃結(jié)構(gòu)和規(guī)劃樣式。根據(jù)整頁(yè)的制作流程，舉一反三制作其他頁(yè)面效果。