DIV+CSS網(wǎng)站布局-練習_第1頁
DIV+CSS網(wǎng)站布局-練習_第2頁
DIV+CSS網(wǎng)站布局-練習_第3頁
DIV+CSS網(wǎng)站布局-練習_第4頁
DIV+CSS網(wǎng)站布局-練習_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

?????????DIV+CSS網(wǎng)站布局第一步：規(guī)劃網(wǎng)站第二步：創(chuàng)建html模板及文件目錄等第三步：網(wǎng)頁布局與div浮動第四步：網(wǎng)頁主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)第五步：頁面內(nèi)的基本文本的樣式(css)設置第六步：網(wǎng)站頭部圖標與logo部分的設計第七步：頁腳信息的表現(xiàn)設置第八步：導航條的制作解決IE瀏覽器的顯示BUGDIV+CSS網(wǎng)站布局DIV+CSS網(wǎng)站布局?本例中頁面模塊劃分的規(guī)劃–theheader（頁面頂部）–theleft（左側(cè)邊欄）–thecontent（主體內(nèi)容）–thefooter（頁腳）DIV+CSS網(wǎng)站布局?規(guī)劃網(wǎng)站–Header網(wǎng)站頭部圖標，包含網(wǎng)站的logo和站名

?Width:692pxHeight:90px–MainNavigation導航條，具有按鈕特效。

?Width:178pxHeight:Changesdependingoncontent–Content網(wǎng)站的主要內(nèi)容

?Width:514pxHeight:Changesdependingoncontent–Footer網(wǎng)站底欄，包含版權(quán)信息等

?Width:692pxHeight:66pxDIV+CSS網(wǎng)站布局?創(chuàng)建html模板及文件目錄等–blog.html,并創(chuàng)建css文件夾和images文件夾DIV+CSS網(wǎng)站布局?創(chuàng)建html模板<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html><head><metahttp-equiv=“Content-type”content=“text/html;charset=UTF-8”/><title>MyBlog</title><linkrel="stylesheet"href="css/master.css"type="text/css"></head><body></body></html>DIV+CSS網(wǎng)站布局?創(chuàng)建網(wǎng)站的大框–建立一個寬692px的盒子，它將包含網(wǎng)站的所有元素<html><head><linkrel="stylesheet"href="css/master.css"type="text/css"></head><body><divid="container">HelloWorld</div></body></html>DIV+CSS網(wǎng)站布局?控制html的id為container的盒子的寬為692px，背景為紅色?讓盒子居中，寫入margin:0auto#container{margin:0auto;text-align:left;width:692px;background:red;}DIV+CSS網(wǎng)站布局?看到盒子和瀏覽器的頂端有空隙–這是由于瀏覽器的默認的填充和邊界造成的–消除這個空隙body{margin:0;padding:0;}DIV+CSS網(wǎng)站布局?將網(wǎng)站分為四個div<divid="container"><divid="header">Header</div><divid="left">Left</div><divid="content">Content</div><divid="footer">Footer</div></div>height:90px;width:692px;background:red;

DIV+CSS網(wǎng)站布局

#header{?為了將四個部分區(qū)分開來，將這四個部分 用不同的背景顏色標示出來，在css文件寫入}#left{ width:178px; background:darkgreen;}#content{ width:514px; background:orange;}#footer{ width:692px; background:green;}DIV+CSS網(wǎng)站布局?讓邊框浮動到主要內(nèi)容的右邊，用css控制浮動#left{width:178px;background:blue;float:left;}#content{width:514px;background:orange;float:left;}DIV+CSS網(wǎng)站布局?在主要內(nèi)容的盒子中寫入一些文字#footer{clear:both;width:692px;background:green;}

DIV+CSS網(wǎng)站布局?構(gòu)建頂部頁面的內(nèi)容<html><head><linkrel="stylesheet"href="blog.css"type="text/css"></head><body><divid="container"><divid="header"><imgsrc="images/header.jpg"alt="ximicc"width="692"height="90"/></div></div></body></html>DIV+CSS網(wǎng)站布局?頂部版塊的CSS定義#header{text-align:center;}DIV+CSS網(wǎng)站布局?頁腳的實現(xiàn)<divid="footer"><h2>copyright©2010Neusoft–<ahref=""target="_blank">Duoh!®n.v.</a>From<ahref="http://"target="_blank"></a></h2></footer>DIV+CSS網(wǎng)站布局?設置頁腳的樣式#footer{margin:0pxauto;position:relative;background-color:#717F51;border-top:9pxsolid#F7F7F6;width:692px;padding:5px0;clear:both;}text-align:center;用css網(wǎng)站布局#footerh2{margin:0;?頁腳中的文字和鏈接定義樣式font:normal10pxVerdana,Arial,Helvetica,sans-serif;color:#D3D8C4;}#footerh2a:visited,#footerh2a:link{color:#D3D8C4;text-decoration:none;border-bottom:1pxdotted#D3D8C4;}#footerh2a:hover{color:#F7F7F6;text-decoration:none;border-bottom:none;background-color:#A5003B;}DIV+CSS網(wǎng)站布局?側(cè)邊欄導航菜單<divid="left"><divid="navcontainer"><ul><li><ahref="#"id="current">Home</a></li><li><ahref="#">Aboutme</a></li><li><ahref="#">Contactme</a></li><li><ahref="#">Articles</a></li><li><ahref="#">Photoroll</a></li></ul></div></div>DIV+CSS網(wǎng)站布局?首先定義導航外圍容器的樣式#navcontainer{width:178px;}DIV+CSS網(wǎng)站布局?改變列表的外觀#navcontainerul{margin:0;padding:0;list-style-type:none;font:bold12px/22pxVerdana,Arial,Helvetica,sans-serif;text-indent:20px;letter-spacing:1px;border-bottom:1pxsolid#fff;}DIV+CSS網(wǎng)站布局?鏈接外觀的定義#navcontainera{display:block;width:178px;height:22px;}DIV+CSS網(wǎng)站布局?定義鼠標經(jīng)過鏈接時的翻轉(zhuǎn)效果#navcontainera:link,#navcontainera:visited{ background:url(../images/bg_navbutton.gif); color:#5C604D;text-decoration:none;}#navcontainera:hover{background:url(../images/bg_navbutton_over.gif);color:#A5003B;text-decoration:none;}DIV+CSS網(wǎng)站布局?定義了一個額外的樣式#current來表現(xiàn)當前頁面處于導航中的哪個項目#navcontainerlia#current{background:url(../images/bg_navbutton_over.gif);color:#A5003B;text-decoration:none;}DIV+CSS網(wǎng)站布局?正文與圖片的混排<divid="content"><h2>Thisisthetitle</h2><pclass="text"><imgsrc="images/image.jpg"alt="imageofthedessert"width="150"height="139"class="imageright"/>Loremipsumdolorsitamet,consectetueradipiscingelit.Curabiturwisimi,rutrumsitamet,viverravel,sodalesvitae,magna.</p><pclass="text">Aeneanveldui.Utsitametauguesederatconvallisullamcorper.</p><pclass="text">Nullamvitaeloremetleoeuismodconvallis.Nuncauctorelementumlacus.Utsagittisfelis.Donecnonwisi.Inerat.Proinornareenimsednulla.</p></div>

DIV+CSS網(wǎng)站布局?正文的內(nèi)容跟導航菜單貼得很緊，增加一 點間隙

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

<divid="content">

<divclass="padding">………….

</div></div>#padding{ padding:15px;}

DIV+CSS網(wǎng)站布局?針對文章標題的標簽定義CSS樣式#contenth2{font:normal18pxGeorgia,TimesNewRoman,Times,serif;color:#80866A;background:transparenturl(../images/bullet_title.gif)no-repeat;width:454px;padding:00030px;margin:0;}DIV+CSS網(wǎng)站布局?定義正文文字的樣式.text{font:11px/18pxVerdana,Arial,Helvetica,sans-serif;color:

溫馨提示

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

評論

0/150

提交評論