十步學(xué)會用css+div建站

上傳人：s*** IP屬地：山西上傳時間：2022-11-10 格式：PPT 頁數(shù)：54 大?。?.43MB 積分：40 舉報 版權(quán)申訴

已閱讀5頁，還剩49頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第一步：規(guī)劃網(wǎng)站，本教程將以圖示為例構(gòu)建網(wǎng)站；第二步：創(chuàng)建html模板及文件目錄等；第六步：頁面內(nèi)的基本文本的樣式(css)設(shè)置；第七步：網(wǎng)站頭部圖標與logo部分的設(shè)計；第八步：頁腳信息(版權(quán)等)的表現(xiàn)設(shè)置；第十步：解決IE瀏覽器的顯示BUG；1第一步：規(guī)劃網(wǎng)站，本教程將以圖示為例構(gòu)建網(wǎng)站

1.規(guī)劃網(wǎng)站，本教程將以下圖為例構(gòu)建網(wǎng)站。

2其基本布局見下圖

3規(guī)劃網(wǎng)主要由五個部分構(gòu)成

1.MainNavigation導(dǎo)航條，具有按鈕特效。Width:760pxHeight:50px2.Header網(wǎng)站頭部圖標，包含網(wǎng)站的logo和站名。Width:760pxHeight:150px3.Content網(wǎng)站的主要內(nèi)容。Width:480pxHeight:Changesdependingoncontent4.Sidebar邊框，一些附加信息。Width:280pxHeight:Changesdependingoncontent5.Footer網(wǎng)站底欄，包含版權(quán)信息等。Width:760pxHeight:66px。4第二步：創(chuàng)建html模板及文件目錄等

1.創(chuàng)建html模板代碼如下

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"">

<html>

<head>

<metahttp-equiv="Content-type"content="text/html;charset=UTF-8"/>

<title>CompanyName-PageName</title>

<metahttp-equiv="Content-Language"content="en-us"/>

<metahttp-equiv="imagetoolbar"content="no"/>

<metaname="MSSmartTagsPreventParsing"content="true"/>

<metaname="description"content="Description"/>

<metaname="keywords"content="Keywords"/>

<metaname="author"content="EnlightenDesigns"/>

<styletype="text/css"media="all">@import"css/master.css";</style>

</head>

<body>

</body>

</html>5將其保存為index.html,并創(chuàng)建文件夾css，images，網(wǎng)站結(jié)構(gòu)如下62.創(chuàng)建網(wǎng)站的大框，即建立一個寬760px的盒子，它將包含網(wǎng)站的所有元素。在html文件的<body>和</body>之間寫入

<divid="container">

Helloworld.

</div>創(chuàng)建css文件，命名為master.css,保存在/css/文件夾下。寫入：

#container{

width:760px;

background:red;

}7控制html的id為container的盒子的寬為760px，背景為紅色。表現(xiàn)如下現(xiàn)在為了讓盒子居中，寫入margin:auto;，使css文件為：

#container{

width:760px;

margin:auto;

background:red;

}現(xiàn)在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由于瀏覽器的默認的填充和邊界造成的。消除這個空隙，就需要在css文件中寫入：

html,body{

margin:0;

padding:0;

}8第三步：將網(wǎng)站分為五個div，網(wǎng)頁基本布局的基礎(chǔ)

1.將“第一步”提到的五個部分都放入盒子中，在html文件中寫入：

<divid="container">

<divid="main-nav">MainNav</div>

<divid="header">Header</div>

<divid="sidebar-a">SidebarA</div>

<divid="content">Content</div>

<divid="footer">Footer</div>

</div>表現(xiàn)如下：

92.為了將五個部分區(qū)分開來，我們將這五個部分用不同的背景顏色標示出來，在css文件寫入#main-nav{

background:red;

height:50px;

}

#header{

background:blue;

height:150px;

}

#sidebar-a{

background:darkgreen;

}

#content{

background:green;

}

#footer{

background:orange;

height:66px;

}10表現(xiàn)如下

11第四步：網(wǎng)頁布局與div浮動等

1.浮動，首先讓邊框浮動到主要內(nèi)容的右邊。用css控制浮動

#sidebar-a{

float:right;

width:280px;

background:darkgreen;

}表現(xiàn)如下

122.往主要內(nèi)容的盒子中寫入一些文字。在html文件中寫入<divid="content">

Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.

Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.

Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus

euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.

Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,

purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.

</div>13表現(xiàn)如下

但是你可以看到主要內(nèi)容的盒子占據(jù)了整個container的寬度，我們需要將#content的右邊界設(shè)為280px。以使其不和邊框發(fā)生沖突。

css代碼如下：#content{

margin-right:280px;

background:green;

}14同時往邊框里寫入一些文字。在html文件中寫入：

<divid="sidebar-a">

Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.

Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.

Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus

euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.

Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,

purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.

</div>15表現(xiàn)如下

16這也不是我們想要的，網(wǎng)站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動，由于是浮動，所以可以理解為它位于整個盒子之上的另一層。因此，底框和內(nèi)容盒子對齊了。

因此我們往css中寫入：

#footer{

clear:both;

background:orange;

height:66px;

}17表現(xiàn)如下18第五步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)

第五步主要介紹除網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的表現(xiàn)(Layout),包括以下內(nèi)容:1.主導(dǎo)航條；

2.標題(heading),包括網(wǎng)站名和內(nèi)容標題；

3.內(nèi)容；

4.頁腳信息,包括版權(quán),認證,副導(dǎo)航條(可選)。加入這些結(jié)構(gòu)時，為了不破壞原有框架，我們需要在css文件"body"標簽(TAG)下加入:

.hidden{

display:none;

}".hidden"即我們加入的類(class),這個類可以使頁面上任意屬于hidden類的元素(element)不顯示。這些會在稍后使用，現(xiàn)在請暫時忘記它。19現(xiàn)在我們加入標題(heading)

先回到HTML的代碼，<h1>到<h6>是我們常用的html標題代碼。比如我們一般用<h1>網(wǎng)站名</h1>，<h2>網(wǎng)站副標題</h2>,<h3>內(nèi)容主標題</h3>等。我們往html文件的Header層(Div)加入:<divid="header">

<h1>EnlightenDesigns</h1>

</div>

刷新一下頁面，你就可以看到巨大的標題，和標題周圍的空白，這是因為<h1>>標簽的默認大小和邊距(margin)造成的，先要消除這些空白,需要加入：h1{

margin:0;

padding:0;

}20接下來是導(dǎo)航條

控制導(dǎo)航條表現(xiàn)的css代碼相對比較復(fù)雜，我們將在第九步或是第十步中詳細介紹?，F(xiàn)在html文件加入導(dǎo)航代碼:

<divid="main-nav">

<ul>

<liid="about"><ahref="">About</a></li>

<liid="services"><ahref="">Services</a></li>

<liid="portfolio"><ahref="">Portfolio</a></li>

<liid="contact"><ahref="">ContactUs</a></li>

</ul>

</div>21目前導(dǎo)航條的表現(xiàn)比較糟糕，但是要在以后的教程中介紹其特殊表現(xiàn)，故需要暫時隱藏導(dǎo)航條,于是加入：<divid="main-nav">

<dlclass="hidden">

<dtid="about"><ahref="">About</a></dt>

<dtid="services"><ahref="">Services</a></dt>

<dtid="portfolio"><ahref="">Portfolio</a></dt>

<dtid="contact"><ahref="">ContactUs</a></dt>

</dl>

</div>22我們跳一步，先到頁腳：

頁腳包括兩部分：左邊的版權(quán),認證和右邊的副導(dǎo)航條。

我們先要讓副導(dǎo)航條向右浮動，就像之前處理Sidebar和Content關(guān)系的一樣，需要加入一個新的層(div):<divid="footer">

<divid="altnav">

<ahref="">About</a>-

<ahref="">Services</a>-

<ahref="">Portfolio</a>-

<ahref="">ContactUs</a>-

<ahref="">TermsofTrade</a>

</div>

</div>23理論上，我們可以控制源文件上的任意元素的浮動，但由于IE瀏覽器的BUG，被浮動層需要首先出現(xiàn)在源文件上，也就是說我們把副標題放在版權(quán)和認證的前面：

<divid="footer">

<divid="altnav">

<ahref="">About</a>-

<ahref="">Services</a>-

<ahref="">Portfolio</a>-

<ahref="">ContactUs</a>-

<ahref="">TermsofTrade</a>

</div>

Poweredby<ahref="">EnlightenHosting</a>and

<ahref="">Vadmin3.0CMS</a></div>24刷新你的頁面，你將看到如下所示25最后我們回到內(nèi)容部分：用<h2<>表現(xiàn)內(nèi)容標題–"About","Contactus"；用<p>表現(xiàn)段落；用</br>斷行。<divid="content">

<h2>About</h2>

<p><strong>EnlightenDesigns</strong>isanInternetsolutionsproviderthatspecialisesin

frontandbackenddevelopment.Toviewsomeofthewebsiteswehavecreatedviewour

portfolio.</p>

<p>Wearecurrentlyundergoinga'facelift',soifyouhaveanyquestionsorwould

likemoreinformationabouttheservicesweprovidepleasefeelfreetocontactus.</p>

<h2>ContactUs</h2>

<p>Phone:(07)8536060<br/>

Fax:(07)8536060<br/>

Email:<ahref="mailto:"></a><br/>

P.OBox:14159,Hamilton,NewZealand</p>

<p><ahref="">Morecontactinformation…</a></p>

</div>26刷新頁面可以看到在Content層中又出現(xiàn)一些空白，這是由于<h2><p>標簽的默認邊距(margin)造成的，我們必須消除這些惱人的空白，當(dāng)又不想把網(wǎng)頁中所有的<h2><p>標簽地邊距都設(shè)為0，這就需要使用css的子選擇器("childcssselector"),在html的文件結(jié)構(gòu)中，我們想控制的<h2><p>標簽(child)是屬于#content層(parent)的,因此在css文件中寫入：

#contenth2{

margin:0;

padding:0;

}

#contentp{

margin:0;

padding:0;

}

這樣我們就告訴瀏覽器，僅僅是隸屬于content層的<h2><p>標簽的margin和padding的值為0！27第六步：頁面內(nèi)的基本文本的樣式(css)設(shè)置

你是不是厭倦了那些大紅大綠的背景，現(xiàn)在是去掉它們的時候了，只保留導(dǎo)航條的紅色背景。很好，再過幾步，你就能很好了解css控制整個網(wǎng)頁版面(Layout)的能力。

先設(shè)置全局的文本樣式：

body{

font-family:Arial,Helvetica,Verdana,Sans-serif;

font-size:12px;

color:#666666;

background:#ffffff;

}

一般我們把body標簽放在css文件的頂端，當(dāng)然你要是執(zhí)意要把它放在尾部，瀏覽器不會和你計較。font-family內(nèi)的順序決定字體顯示優(yōu)先級，比方如果所在計算機沒有Arial字體，瀏覽器就會指向Helvetica字體，依次類推；color指字體顏色；background指背景顏色。

28如果你都是按本教程的操作，應(yīng)該能看到下圖

29你可以看到內(nèi)容(content)的各塊(block)之間的間隙太小了，而基于最初的設(shè)計，內(nèi)容標題(即<h2>)和正文之間的間隙大概是15px，每個段落的間距也大概是15px，所以在css中寫入：#contenth2{

margin:0;

padding:0;

padding-bottom:15px;

}

#contentp{

margin:0;

padding:0;

padding-bottom:15px;

}30然后需要讓content層的四周都空出25px的間隙，這本來是件很簡單的事，理論上我們只需在#content的css文件中加入padding:25px;就行了，但是IE給我們上了“一課”,它的固有BUG根本不能按我們的想象表現(xiàn)。解決這個問題有兩種辦法。第一種辦法是區(qū)別瀏覽器寫入兩種代碼(HACKIE),但因為間隙(padding,在Dreamweaver中又叫填充)使用很頻繁，所以我們用另一種辦法。

我們往需要填充的層中加入padding層，它的功能僅限于顯示間隙：

<divid="sidebar-a">

<divclass="padding">

Loremipsumdolorsitamet,consectetueradipiscingelit.Nullamgravidaenimutrisus.

Praesentsapienpurus,ultricesa,variusac,suscipitut,enim.Maecenasinlectus.

Donecinsapieninnibhrutrumgravida.Sedutmauris.Fuscemalesuadaenimvitaelacus

euismodvulputate.Nullamrhoncusmaurisacmetus.Maecenasvulputatealiquamodio.

Duisscelerisquejustoapede.Namauguelorem,semperat,portaeget,placerateget,

purus.Suspendissemattisnuncvestibulumligula.Inhachabitasseplateadictumst.

</div>

</div>31同樣的，再往html文件的content層中加入padding層。

由于padding層的功能僅是制造空隙，所以不要設(shè)置它的寬度，只需在css中添加:#sidebar-a{

float:right;

width:280px;

}

#sidebar-a.padding{

padding:25px;

}

#content{

margin-right:280px;

}

#content.padding{

padding:25px;

}32

就像我們之前用的方法一樣，我們只選擇了類(class)為padding，且父類(parent)為#content或#sidebar-a的元素(element)。

接下來設(shè)置行距，content和sidebar-a的行距需要加寬，但在css中是沒有行距(leading)這種屬性(attribute)的，但是有行高(line-height)屬性，因此往css中寫入：#sidebar-a{

float:right;

width:280px;

line-height:18px;

}

#content{

margin-right:280px;

line-height:18px;

}33

現(xiàn)在可以看到標題"about"和"contactus"顯得相當(dāng)突兀，這是因為我們使用的字體并不是一種網(wǎng)頁字體，我們需要將其替換為圖片，并將其存放于/images/headings/文件夾中：替換方法為，在html文件的<h2>標簽中寫入：

<h2><imgsrc="images/headings/contact.gif"width="98"height="14"alt="ContactUs"/></h2>34于是得到下圖35第七步：網(wǎng)站頭部圖標與logo部分的設(shè)計為實現(xiàn)設(shè)計時的網(wǎng)頁頭部效果，我們需要以下兩幅圖：

/images/headers/about.jpg

/images/general/logo_enlighten.gif36首先我們給#header層添加背景圖案#header{

height:150px;

background:#db6d16

url(../images/headers/about.jpg);

}我們使用的背景屬性為一些簡寫的屬性名，用其能規(guī)定背景的顏色，圖案，圖案的位置，是否重復(fù)以及如何重復(fù)。之所以把背景色設(shè)為桔黃色，是因為當(dāng)用戶使瀏覽器屏蔽圖片時，網(wǎng)站的頭部不會變的一片空白。應(yīng)該注意到圖片的路徑是相對于css的存放位置而言的，而不是html文件，因此有"../"。37接著替換掉<h1></h1>標簽里的"EnlightenDesigns"<divid="header">

<h1><imgsrc="images/general/logo_enlighten.gif"

width="236"height="36"alt="EnlightenDesigns"border="0"/></h1>

</div>logo_enlighten圖片浮在頭部的左上方，我們需要設(shè)置<h1>的屬性值為h1{

margin:0;

padding:0;

float:right;

margin-top:57px;

padding-right:31px;

}

38這樣我們使存在于<h1>層的圖片向右浮動，并且上邊距(margin-top)為57px，右間隙(padding-right)為31px，如下圖所示注意：細心的你可能會發(fā)現(xiàn)我們使用了padding-right而不是margin-right，這是因為IE的怪毛病不少，它會在不定的地方無法正確顯示margin-right/left屬性，所以使用了padding(間隙,Dreamweaver中又被稱為填充)屬性。

希望大家在以后的css編寫過程中，盡量使用padding屬性，以免造成瀏覽器調(diào)試麻煩。

39第八步：頁腳信息(版權(quán)等)的表現(xiàn)設(shè)置首先需要控制頁腳的文本顯示：#footer{

clear:both;

height:66px;

font-family:Tahoma,Arial,Helvetica,Sans-serif;

font-size:10px;

color:#c9c9c9;

}接著我們需要設(shè)置存在鏈接的文本的顯示，在這我們沒有改變文本的顏色(仍然為#c9c9c9)，而只是讓下劃線消失:#footera{

color:#c9c9c9;

text-decoration:none;

}40但是我們想讓那些存在鏈接的文本，在鼠標懸停在其上方時變色為#db6d16：#footera:hover{

color:#db6d16;

}然后我們想給頁腳加上灰色的上邊框，在footer層的四周設(shè)置一些間隙，并加大文本的行距：#footer{

clear:both;

height:66px;

font-family:Tahoma,Arial,Helvetica,Sans-serif;

font-size:10px;

color:#c9c9c9;

border-top:1pxsolid#efefef;

padding:13px25px;

line-height:18px;

}

41最后我們需要做的就是讓副導(dǎo)航層(#altnav)向右浮動，需要指出的是，浮動層是必須設(shè)置寬度(width)才能正常浮動的，所以我們把#altnav的寬度設(shè)置為350px，略寬于文本的長度(為了讓副標題的文字顯示完全)，然后讓文本向右對齊：#footer#altnav{

width:350px;

float:right;

text-align:right;

}如果你按照以上方法，將得到如下圖所示的頁腳樣式42第九步：導(dǎo)航條的制作(較難)注:導(dǎo)航條之所以放在第九步講，是因為導(dǎo)航條制作是本教程中最難的部分，自然也是技術(shù)含量最高的地方.導(dǎo)航條的制作可易可難，但這里介紹的相對較難，您能堅持到這一步已經(jīng)很不易，如果你只是有個導(dǎo)航條就滿足的話，請參考第八步的制作。先去掉導(dǎo)航條的紅色背景，還有就是移除html文件中main-nav層的"class="hidden"",使導(dǎo)航條的內(nèi)容顯示出來。我們實現(xiàn)導(dǎo)航條圖片的變換的方法是純css代碼的，不包含任何js或是flash，因此我們所用的圖片是4幅分別由三個小圖組合而成的圖片，如下所示，并將這4幅圖保存于/images/nav/文件夾中43我們實現(xiàn)導(dǎo)航條的動態(tài)效果如下圖所示在網(wǎng)頁顯示的只是圖中紅框標出的部分，如果把每幅圖分為上，中，下三部分的話，未發(fā)生動作時顯示上部，當(dāng)光標懸停時，顯示的是中部，被選擇時則顯示下部。44接下來進入css代碼部分，先往css文件中寫入/*MainNavigation*/

#main-nav{height:50px;}

#main-navul{margin:0;padding:0;}注意：/*MainNavigation*/為增加css文件可讀性的說明，不會影響表現(xiàn)。

#main-nav的height屬性定義了main-nav層的高度；"#main-navul"則定義main-nav層中列表的屬性，在這里先定義其margin和padding為0。

根據(jù)先前的設(shè)計，導(dǎo)航條應(yīng)該和左邊有一定的距離，這就需要設(shè)置main-nav層的左邊距(padding-left)為11px,但由于IE5和Mac瀏覽器的BUG，需要加入以下代碼：/*IE5MacHack\*/

#main-nav{padding-left:11px;}

/*/

#main-nav{padding-left:11px;overflow:hidden;}

/*EndHack*/45現(xiàn)在你可以看到導(dǎo)航列表距左邊有11px的距離，但是列表項目是豎排的，將<li>，即列表項目向左對齊就能使其從左到右橫向排列#main-navli{float:left;}為了使列表項目的尺寸和容納它的層保持一致，并利用浮動屬性使列表項目的文本隱藏，寫入：#main-navlia{

display:block;

height:0px!important;

height/**/:50px;/*IE5/Winhack*/

padding:50px000;

overflow:hidden;

background-repeat:no-repeat;

}46接著，要實現(xiàn)當(dāng)光標懸停于列表項目上時，顯示背景圖片的中部，因此需要將背景圖片向上移動50px，寫入：#main-navlia:hover{

background-position:0-50px;

}給各個列表項目設(shè)置寬度和背景圖片的路徑：#main-navli#about,

#main-navli#abouta{width:71px;background-image:url(../images/nav/about.gif);}

#main-navli#services,

#main-navli#servicesa{width:84px;background-image:url(../images/nav/services.gif);}

#main-navli#portfolio,

#main-navli#portfolioa{width:95px;background-image:url(../images/nav/portfolio.gif);}

#main-navli#contact,

#main-navli#contacta{width:106px;background-image:url(../images/nav/contact.gif);}47最后我們要做的就是，當(dāng)列表項目被選時，顯示背景圖片的下部。為此我們需要增加一些css代碼對原有的css表現(xiàn)作一些修改：body.aboutli#about,

body.aboutli#abouta,

body.servicesli#services,

body.servicesli#servicesa,

body.portfolioli#portfolio,

body.portfolioli#portfolioa,

body.contactli#contact,

body.contactli#contacta{

background-position:0-100px;

}48以上看似龐大的css選擇器可以識別body標簽的類(class)，如html中為：

<bodyclass="about">

以上css選擇器就讓li#about,li#abouta,的背景向上移動100px，使其顯示背景圖片的下部。如果我們希望網(wǎng)站頭部背景圖片也根據(jù)body標簽的類進行變換，就需修改css的#header為：body.about

#header{

height:150px;

background:#db6d16

url(../images/headers/about.jpg);

}49至此就完成了"About"網(wǎng)頁

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

十步學(xué)會用css+div建站

文檔簡介

溫馨提示

最新文檔

評論

十步學(xué)會用css+div建站

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔