您現在的位置: 网站首頁 / 網站建設 / 正文

一列布局-Web標准(div+css)教程

作者: admin 发布: 2015-1-26 22:41:22 分类: 網站建設 閱讀: 次 查看評論

  今天我們開始學習《十天學會web標准(div+css)》的一列布局,包含以下幾種形式:

  一、 一列固定宽度

  二、一列固定寬度居中

  三、一列自適應寬度

  四、一列自適應寬度居中

  五、一列二至多塊布局

  前一節我們回顧了xhtml基礎和css基礎部分,今天我們正式開始使用網頁制作軟件——adobe公司出品的dreamweaver來開始網頁設計之旅。相信之前您已經用過這個軟件了,具體怎麽使用我就不講了。爲了照顧部分朋友,今天課程的css部分我們是以可視化生成方式,不過建議大家能手寫的盡量還是手寫,這樣有助于提高效率。

  一、一列固定寬度

  我們先看一下一列固定寬度,首先要新建一個頁面:

  

  注意:這裏的文檔類型是過渡型,目前我們采用這種寬松驗證方式。

  接下來在頁面中插入一個div標簽,我們可以點擊工具欄的“插入DIV標簽”按鈕,在打開的對話框中ID項給這個div命一下名,我們給它起個名叫layout(名稱根據自己需要命名)。

  

  插入div後,在右側的css樣式面板中,定義id爲layout的樣式,確定後在打開的css編輯對話框的方框選項中設計寬度500,高度300。爲了看清楚起見,我們把這個div設置個背景色,這樣就能預覽出大小和位置了。

  

  

  這裏選擇高級,然後在選擇器中填寫:#layout,如果是選中div後,再點擊添加,它會自動添加上。因爲是定義ID,所以前面需要加#,後面會有id和class的詳細講解

  

  

  我們預覽一下,看看在IE中的顯示效果,一列固定寬度就這樣做成了,簡單吧!CSS代碼及在IE中顯示如下:

  <style type="text/css">

  #layout { height: 300px; width: 400px; background: #99FFcc; }

  </style>

  

  代碼原文:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  #layout { height: 300px; width: 400px; background: #99FFcc; }

  </style>

  </head>

  <body>

  <div id="layout">此处显示 id "layout" 的内容</div>

  </body>

  </html>

  提示:可以先修改部分代碼後再運行

  二、一列固定寬度居中

  一列固定寬度居中和一列固定寬度相比,我們要解決的問題就是居中。這裏我們用到css的外邊距屬性:margin。在IE6及以上版本和標准的浏覽器當中,當設置一個盒模型的的margin:auto;時,可以讓這個盒模型居中。我們下邊在css樣式表中加上這個屬性看看效果:

  #layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }

  在dreamweaver的設計視圖中我們選中看看,是不是已經居中了,我們再在IE下預覽一下,同樣居中。

  

  

  

  代碼原文:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  #layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }

  </style>

  </head>

  <body>

  <div id="layout">此处显示 id "layout" 的内容</div>

  </body>

  </html>

  三、一列自適應寬度

  自適應寬度是相對于浏覽器而言,盒模型的寬度隨著浏覽器寬度的改變而改變。這時要用到寬度的百分比。當一個盒模型不設置寬度時,它默認是相對于浏覽器顯示的。我們把剛才的固定寬度例子中的寬度去掉看看:

  #layout { height: 300px; background: #99FFcc;}

  

  有些朋友可能要问了,那为什么还有那么宽的白边呢?这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时,body,h1-h6,ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项:body {margin:0;},就可以把body默认的外边距去掉,这时再预览一下,白边就没了。

  body { margin: 0px; }

  #layout { height: 300px; background: #99FFcc;}

  

  这里的选择器类型是新手朋友最容易迷糊的地方,类:是指定义一个class,可以多个对象引用;标签:指对默认的html标签进行重新定义,如可以定义body{margin:0},意思是 将body的外边距设置为0,h2{color:#f00}是将所有h2标签的文字颜色设置为红色;高级它把ID和伪类放到一块了,是一个设置不合理的地方,在cs4版本中已经分开了。ID是以#开始,id只能作用于一个对象,不能作用于多个对象,优先级高于class,这是id和class的区别。伪类会在第九节时详细讲解

  

  

  如果我們需要按浏覽器的80%顯示,那麽設置寬度爲80%,當改變浏覽器窗口大小時,盒模型的寬度也會跟著改變。

  

  

  代碼原文:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  body { margin:0;}

  #layout { height: 300px; width: 80%; background: #99FFcc; }

  </style>

  </head>

  <body>

  <div id="layout">此处显示 id "layout" 的内容</div>

  </body>

  </html>

四、一列自適應寬度居中

  同樣和固定寬度居中一樣,我們只需要設置div的外邊距爲auto即可實現居中了。

  body { margin: 0px; }

  #layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }

  

  

  代碼原文:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  body { margin:0;}

  #layout { height: 300px; width: 80%; background: #99FFcc; margin:auto;}

  </style>

  </head>

  <body>

  <div id="layout">此处显示 id "layout" 的内容</div>

  </body>

  </html>

  五、一列二至多塊布局

  一般的網站整體可以分爲上中下結構,即:頭部、中間主體、底部。那麽我們可以用三個div塊來劃分,分別給它們起名爲:頭部(header)、主體(maincontent)、詢問(footer)。

  采用固定寬度居中的方式,代碼如下:

  body { margin:0; padding:0;}

  #header { margin:5px auto; width:500px; height:80px; background:#9F9;}

  #main { margin:5px auto; width:500px; height:400px; background:#9FF;}

  #footer { margin:5px auto; width:500px; height:80px; background:#9f9;}

  

  爲了便于區分,在背景項裏設置了背景色,這裏不在貼圖。依此類推,把另外兩個div塊給置好,整個效果就出來了。這是一個大多數網站采用的上中下布局結構。

  

  代碼原文:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  <style type="text/css">

  body { margin:0; padding:0;}

  #header { margin:5px auto; width:500px; height:80px; background:#9F9;}

  #main { margin:5px auto; width:500px; height:400px; background:#9FF;}

  #footer { margin:5px auto; width:500px; height:80px; background:#9f9;}

  </style>

  </head>

  <body>

  <div id="header">此处显示 id "header" 的内容</div>

  <div id="main">此处显示 id "main" 的内容</div>

  <div id="footer">此处显示 id "footer" 的内容</div>

  </body>

  </html>

 許多朋友在問:爲什麽兩個相鄰的容器中間的間距不是10px,而是5px呢?按照我們正常的理解,認爲應該是兩個值相加,其實這裏是兩個合並後取最大值。用css手冊中的話說:塊級元素的垂直相鄰外邊距會合並,而行內元素實際上不占上下外邊距。行內元素的的左右外邊距不會合並。同樣地,浮動元素的外邊距也不會合並。允許指定負的外邊距值,不過使用時要小心(有關塊級元素和行內元素的概念在下一節講到)。

  六、小結

  本節課涉及到以下知識點:

  1、CSS可視化生成、格式化

  本教程便于新手學習,采用dw的css可視化生成方式,熟練後的朋友盡量手寫,這樣可以提高工作效率。目前來說,希望常用的大家都能記住。關于css的格式化,指css的排版方式,細心的朋友已發現,我在這裏貼出的css代碼,每個類或ID都是寫在一行的。可能你的還是分成多行,怎麽把它們弄到一行上呢?請看下面的代碼和圖示:

  body {

  margin:0;

  padding:0;

  }

  #header {

  margin:5px auto;

  width:500px;

  height:80px;

  background:#9F9;

  }

  #main {

  margin:5px auto;

  width:500px;

  height:400px;

  background:#9FF;

  }

  #footer {

  margin:5px auto;

  width:500px;

  height:80px;

  background:#9f9;

  }

  

  

  

  經過以上三步之後,看看,你的代碼是不是和我的一樣了。

  2、CSS縮寫

  css的許多屬性是可以簡寫的,這樣便于閱讀和修改,減少代碼量,設置方法如下:

  

  把需要縮寫的項目選中,再生成的css代碼即爲簡寫形式了。這裏所說的是多個屬性合並到一塊的簡寫方式,另外像顔色值了也可以簡寫的。比如顔色值爲#ff6600;可以簡寫爲#f60;兩位兩位一樣的才可以簡寫,像#c2c2c2是不可以簡寫的。

  3、CSS語法

  

  如圖所示,CSS語法由如下三部分構成,選擇器:可以是ID、CLASS或標簽;屬性和值是用來定義這個物件的某一個特性。如一張桌子的長3000px,寬1500px,套用css的格式爲,桌子{長:3000px;寬:1500px;},這樣是不是容易理解。

  4、ID和CLASS選擇器

  id只能在頁面中對應一個元素,就像我們的身份證號一樣,每個人的都不一樣;class爲類,可以對應多個元素,比如說一年級三班的學生,它所對應的可能是10個20個學生。

  id的優先級高于class,比如說今天三班的學生上體育課,小明留下來打掃衛生。那麽三班的學生上體育課這是一個類,而小明打掃衛生這是個id,雖然小明也是三班的學生,但id高于class,所以小明執行打掃衛生的任務。

  文章出处:标准之路 编辑:杨雨晨思

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: DIV  CSS  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表