妙知谷css+div網頁佈局使用教程
- 互聯網
- 關注：2.04W次
CSS(層疊式樣式表)是用來進行網頁樣式設計的標識語言，與HTML一樣屬於解釋性語言。如設計鏈接文本初始顯示為藍色，當光標移過時字體變成紅色且顯示下劃線，這就是一種樣式。通過設計樣式表，可以統一控制HTML中各個標籤的顯示屬性。CSS樣式表可以使用户更有效地控制網頁外觀，精確指定網頁元素位置，創建以及觀察特殊效果。使用CSS，可以將網頁結構和內容與表現形式分離開來，網頁結構和內容被存放在HTML文檔中，而用於定義表現形式的CSS規則被存放在另一個CSS樣式表文件中。
文檔結構基本構成元素是div元素。很多讀者誤以為div元素是沒有語義的，但實際上，div代表區塊，它提供了將文檔分割為有意義的區域的方法。通過將主要內容區域包圍在div中並分配ID名，就可以在文檔中添加結構和意義。
網站重構概念的出現，也使div結構佈局開始流行，因此出現了div+css這樣一個對網站佈局的叫法。單從div+css的叫法來分析，可以瞭解CSS的作用已經被大家認識並用在頁面佈局上了。但一個頁面不是隻要控制了div就控制了全部，HTML的標籤有很多，曾經用過table佈局的頁面一樣可以用CSS來控制。
操作方法
（01）CSS代碼被分割為一個個樣式，它就是CSS代碼的最小單元。每一個CSS樣式（也有人稱為規則）都必須有兩部分組成:選擇器（selector）和聲明（declaration）。例如body{padding: 0px};一個樣式不是僅可以包含一個聲明，而是可以包含無限個聲明，例如：body{font-size:14px; color:#000}
（02）1.用記事本新鍵一個網頁
（03）2.然後在<style type="text/css">標籤中輸入下面的樣式代碼。定義div元素顯示為方形盒子，顯示藍色邊框，且並列顯示在一行，同時增加4px的邊界。
（04）然後保存為網頁文檔，在文檔中定義兩個div元素，並分別設置它們的class屬性值為green和red。
（05）總的代碼為：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">div { /*定義div元素為方形顯示*/ width:200px; height:200px; border:solid 2px blue; float:left; margin:4px;}n{background-color:green;}/*設置背景色為綠色*/{background-color:red;} /*設置背景色為紅色*/</style><title>上機練習</title></head><body><div class="red"></div><div class="green"></div></body></html>
特別提示
這裏使用內嵌式方式插入css樣式表
- 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/sm/hulianwang/r83vqz.html
