最基礎的網頁設計,就是給你一個圖片你做成一個網頁,當然,我的工作是C#,個人網頁的功底不是很高首先先認識一下網頁的一些相關知識: 一般的,現在一個html網頁一般包含html文件,css文件,js文件,img文件這幾個部分css文件,全名叫成疊樣式表稍後會說說,js呢,這個文章暫時先不說現在說說網頁 ...
最基礎的網頁設計,就是給你一個圖片你做成一個網頁,當然,我的工作是C#,個人網頁的功底不是很高
首先先認識一下網頁的一些相關知識:
一般的,現在一個html網頁一般包含html文件,css文件,js文件,img文件這幾個部分
css文件,全名叫成疊樣式表稍後會說說,js呢,這個文章暫時先不說
現在說說網頁
靜態網頁htm,html 最早的靜態網頁文本，目前也常見
非靜態網頁
asp 微軟的動態網頁文件
php php的文檔格式，參看www.php.net，常用，比asp流行
jsp sun公司的動態網頁文本,常用
shtml 動態頁面文件，較少
nsp 較少，使用java，一般是lotus伺服器
等等等等...
這篇文章呢,主要講的是html頁面
在網頁中呢,會有很多圖片,當然,並不是任何圖片都支持
HTML頁面中常用的有：bmp,gif,jpg,png。
BMP是一種與硬體設備無關的圖像文件格式，使用非常廣。它採用位映射存儲格式，除了圖像深度可選以外，不採用其他任何壓縮，因此，BMP文件所占用的空間很大
GIF 意為Graphics Interchange format（圖形交換格式），GIF圖片的擴展名是gif。現在所有的圖形瀏覽器都支持GIF格式，而且GIF格式支持背景透明。
JPEG 代表Joint Photograhic Experts Group（聯合圖像專家組）JPG最主要的優點是能支持上百萬種顏色，從而可以用來表現照片.
PNG 是20世紀90年代中期開始開發的圖像文件存儲格式，其目的是企圖替代GIF和TIFF文件格式
既然有圖片,就會有圖片的處理,下麵講述了一些Photoshop的一些快捷鍵
取消當前命令：Esc； 工具選項板：Enter； 選項板調整：Shift＋Tab； 退出系統：Ctrl＋Q； 獲取幫助：F1； 剪切選擇區：F2 / Ctrl＋X； 拷貝選擇區：F3 / Ctrl＋C； 粘貼選擇區：F4 / Ctrl＋V； 顯示或關閉畫筆選項板：F5； 顯示或關閉顏色選項板：F6； 顯示或關閉圖層選項板：F7； 顯示或關閉信息選項板：F8； 顯示或關閉動作選項板：F9； 顯示或關閉選項板、狀態欄和工具箱：Tab； 全選:Ctrl＋A; 反選:Shift＋Ctrl＋I; 取消選擇區:Ctrl＋D； 選擇區域移動：方向鍵； 將圖層轉換為選擇區：Ctrl＋單擊工作圖層； 選擇區域以10個像素為單位移動：Shift＋方向鍵； 複製選擇區域：Alt＋方向鍵； 填充為前景色：Alt＋Delete； 填充為背景色：Ctrl＋Delete； 調整色階工具：Ctrl＋L； 調整色彩平衡：Ctrl＋B； 調節色調/飽和度：Ctrl＋U； 自由變形：Ctrl＋T； 增大筆頭大小：“中括弧”； 減小筆頭大小：“中括弧”； 選擇最大筆頭：Shift＋“中括弧”； 選擇最小筆頭：Shift＋“中括弧”； 重覆使用濾鏡：Ctrl＋F； 移至上一圖層：Ctrl＋“中括弧”； 排至下一圖層：Ctrl＋“中括弧”； 移至最前圖層：Shift＋Ctrl＋“中括弧”； 移至最底圖層：Shift＋Ctrl＋“中括弧”； 激活上一圖層：Alt＋“中括弧”； 激活下一圖層：Alt＋“中括弧”； 合併可見圖層：Shift＋Ctrl＋E； 放大視窗：Ctrl＋“＋”； 縮小視窗：Ctrl＋“－”； 放大局部：Ctrl＋空格鍵＋滑鼠單擊； 縮小局部：Alt＋空格鍵＋滑鼠單擊； 翻屏查看：PageUp/PageDown； 顯示或隱藏標尺：Ctrl＋R； 顯示或隱藏虛線：Ctrl＋H； 顯示或隱藏網格：Ctrl＋”。 打開文件：Ctrl＋O； 關閉文件：Ctrl＋W； 文件存檔：Ctrl＋S； 列印文件：Ctrl＋P； 恢復到上一步：Ctrl＋Z；由鋼筆圖形轉換成選區： Ctrl＋回車
好了,回到正題;
一.html簡介
HTML——
Hypertext markup language
超文本 標記 語言
文件的擴展名為.html或 .htm
首頁：index.html default.html 預設頁
HTML的基本語法
標記 /標簽(元素)
雙標簽 格式為:<標簽>內容</標簽>
<html></html>網頁 頁面根元素
<head></head> 頭部
<body></body> 主體
<p></p> 段落
<h1></h1> 標題
<table></table>表格。。。
單標簽 格式為:<標簽>
例如：<img> 圖片 <br>換行 <hr>水平線
一個最基本的網頁構造
<html>
<head>
<title>網頁名稱</title>
</head>
<body>
網頁主題
</body>
</html>
保存為html文件就可以以瀏覽器打開網頁了
一個html網頁的結構是html網頁,css層疊樣式表,js代碼,還有圖片
在一個文件夾目錄下創建這四個文件夾就可以說是一個站點
一般的,
<!DOCTYPE>[定義文檔類型]
位於文檔中的最前面的位置，告知瀏覽器文檔使用哪種HTML或XHTML規範
二.標題元素
一般的,在網頁中都會有標題元素 .標題的概念：標明文章、作品等內容的簡短語句.
一下是常用的標題元素
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
從1到6的標題元素出來的效果是從大到小, <h1></h1>是最大，<h6></h6>最小,自帶加粗效果
標題一般是劇中對齊的,對齊是align屬性,值Left,Center,Right(水平對齊方式),比如:<h1 align=“center”></h1>
段落標簽
<p></p> 預設存在段間距 ,一對標簽是一個段落
換行是單標簽<br />,在一些瀏覽器中,<br>也是可以解析的
到了這裡,我突然的想了起來,在網頁中,尖括弧,雙印號啊這些都是關鍵的網頁標記,那麼我們咋樣在網頁上顯示這些符號呢:
空格 半形空格
小於號 < < left
大於號 > > right
雙引號” "
版權符© ©
註冊符® ®
一些常用的標簽:
粗體<b></b>。 bold
在網頁中，比較重要的文本通過粗體方式顯示
傾斜<i></i>。 italic
下劃線<u></u>。 underline
強調<em></em>。
強調顯示文本內容，文字以斜體方式顯示
加強強調<strong></strong>。
強調的程度更強烈一些，加粗的字體
水平線標記<hr>,單標簽
color 顏色，
size 粗細
Width 寬度
align 對齊
圖片標簽:
圖像標記<img>
屬性：
src 圖片路徑
alt 提示文字
title 標題（滑鼠彈出框）
width/ height 寬高
border=“5” 邊框
所有標簽都有title屬性
比如<img src="1.jpg" alt="這是一個圖片">
這裡是一些概念
屬性：用來表示標簽的特征。
屬性值：為屬性賦的值稱為屬性值。
語法為：<標記 屬性="屬性值"> 內容</標記>
在插入圖片的路徑要選擇正確,下麵是路徑的一些知識
路徑分為絕對路徑和相對路徑:
絕對路徑：完整的描述文件位置
比如:C：/image/1.jpg
http://www.baidu.com
相對路徑：就是網頁相對於目標位置
站點內部相對路徑
../ 上一級
../../ 上上級
列表
無序列表ul
語法：
<ul type=“”>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
列表類型type
disc 實心圓
circle 空心圓
square 方塊
有序列表ol
語法：
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
列表類型type
1 1 2 3 4…
a a b c d…
A A B C D…
i i ii iii iv ..小寫羅馬字母
I I II III IV ..大寫羅馬字母
reversed 倒序
自定義列表dl
<dl>
<dt>定義項</dt>
<dd>描述項</dd>
<dd>描述項</dd>
</dl>
三.圖像和超鏈接
超級鏈接是一對一關係
格式:<a href=“url”>文字、圖片</a>
鏈接地址
給文字和圖片添加鏈接
<a href=“index.html”>首頁</a>
<a href=“index.html”><img src=“01.jpg”></a>
鏈接網站
<a href=“http://www.baidu.com”>百度</a
空鏈接：
<a href=“#”>首頁</a> 單擊後仍停留在當前頁
超鏈接地址可以是
網頁、 圖片、文字、壓縮包.rar zip 、應用程式.exe等任意文件
<a href=“鏈接地址url” target=“目標”></a>
target屬性值
_self 原視窗 本視窗 (預設)
_blank 新視窗
_top 頂框架
_parent 父框架
四.表格
格式:
表格table、 tr行、 td 列/單元格 內容
<table>
<tr>
<td>姓名</td>
<td>身高</td>
<td>體重</td>
</tr>
<tr>
<td>張三</td>
<td>175CM</td>
<td>70kg</td>
</tr>
</table>
table的屬性
Width、height 寬高（單位像素或百分比,預設不是100%）
align 對齊
border 外邊框
bgcolor 背景色
background 背景圖片
特有屬性
cellspacing 單元格間距 預設2像素
cellpadding 單元格邊距 （邊框與內容的間距）
設置tr基本屬性
屬性：
align 水平對齊
left/center/ right
valign 垂直對齊
top 頂部
middle 中部
bottom 底部
bgcolor 背景色
設置td的基本屬性
屬性：
Width、height 寬高（單位是像素或%）
align valign 水平對齊、垂直對齊
bgcolor 背景色
background 指定背景圖片
<td colspan=“3” 水平合併 合併列
rowspan=“2” 垂直跨度 合併行
合併必須是相鄰的單元格
水平跨度colspan
<table width="200" border="1" >
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
垂直跨度rowspan
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
表頭th
特殊的單元格，加粗、居中
它的用法是取代<td>的位置即可
<tr>
<th>餐飲類型</th>
<th>主要菜系</th>
<th>價格</th>
</tr>
thead 表格頁眉 一個
tbody 表格主體
tfoot 表格頁腳 一個
對錶格的行進行分組，
註意：thead ，tfoot只有一個 tbody可以有多個
<table>
<thead><tr></tr>….</thead>
<tbody><tr></tr>….</tbody>
<tbody><tr></tr>….</tbody>
....
<tfoot> <tr></tr>…. </tfoot>
</table>
表格屬性:
1px細線表格
表格Table中
border=1
cellspacing=0
Bgcolor=邊框色
單元格td
Bgcolor=白/淺色
五.表單
結構:<form></form>
屬性:
Name 表單名字
action=“url” 提交地址
method 提交方式
get 獲取
Post 傳送
target 新視窗提交
輸入標簽
<input type=“#” name=“”>：
text 文本框
password 密碼框
radio 單選框
checkbox 覆選框
file 文件域
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
image 圖像域按鈕
Hidden 隱藏域
文本框
<input type=“text” value=“請輸入姓名” >
輸入 類型 初始值
placeholder=字體變虛且可直接輸入
密碼框
屬性值：
type 表單對象類型
size 文字的長度
例如：
<input type="password“ />
單選框radio
屬性值：
name 文本欄位的名稱(不可缺少)
Checked 預設選中
<input type="radio“ name=“sex" checked>男
<input type="radio" name=“sex" />女
單選同一組可以設置不同名稱 錯誤
單選同一組不可以設置不同名稱 對
覆選框checkbox
屬性值：
type 表單對象類型
Checked 預設選中
例如：
<input type=“checkbox” checked>上網
<input type=“checkbox ” >學習
<input type=“checkbox ” >旅游
文件域 file
例如：
<input type="file" >
下拉菜單
<select>
<option>請選擇您的學歷</option>
<option selected> 高中</option>
預設選中 不是checked
。。。
</select>
Select標簽的屬性
Multiple 多選
<select multiple>
<option>上網</option>
<option>體育</option>
<option>學習</option>
</select>
文本域 textarea（多行文本框）
屬性值：
cols 列數
rows 行數
例如：
<textarea cols=“40” rows=“5”></textarea>
列數 行數
四種按鈕
提交、重置
<input type="submit" value="提交" />
<input type="reset" value="重置" />
普通按鈕
<input type=“button ” value=“確定" />
<input type=“image” src=“1.jpg” />圖像域
Label標簽
有觸發對應表單控制項功能。如點擊單選按鈕或多選框前文字，對應選項就能被選中
表單控制項id的值與label標簽內的for值相同
性別：
<input type="radio" name="sex" id=“man"/>
<label for=“man">男</label>
<input type="radio" name="sex" id=“women"/>
<label for=“woman">女</label>
六.一些簡單的CSS
結構+表現+行為
Html+ css +js
傳統html的缺點
標記較少，缺少文字間距，段落縮進等標記，美化困難
維護困難，修改過程繁瑣。
網頁代碼過多，影響網頁瀏覽速度
Css作用例子：鏈接樣式表
Css(cascading style sheet)層疊樣式表
用於控制網頁的外觀
CSS優點
使網頁代碼更少，網頁下載更快
實現了內容與樣式的分離
使網站維護更方便、快捷
使網頁與瀏覽器的相容性更好
註釋
html <!-- -->
css /* */
CSS的基本語法
張飛{
身高：185cm；
體重：80kg；
性別：男；
}
css的基本語法:
選擇器{
屬性:屬性值;
…}
三部分組成
css選擇器:也稱為選擇符，用於選擇需要添加樣式的元素。
基本CSS選擇器
全局選擇器(通用)
用*來表示，代表所有標簽
一般用於將所有元素的外邊距和內填充清除。
*{
margin:0; 外邊距
padding:0; 內填充
}
基本CSS選擇器
標簽選擇器(元素選擇器)--通過元素名選擇元素
如：body{}, ul{}, a{}，img{} h2{} p{}等
類別選擇器--通過class屬性選擇元素
先定義樣式 css：
.blue {color:blue;}
然後引用：
<p class=“blue”>文字內容</p>
ID選擇器
先定義樣式：
#ab001{color:#ff0000;}
然後引用：
<p id=“ab001”>文字內容</p>
用法和class類似，但一個ID選擇器只能選定一個元素
偽類選擇器——作用在超鏈接的狀態上
a:link{} 點擊前 預設
a:visited{} 點擊後
a:hover{} 放上去 滑鼠滑過
a:active{} 按下去 點擊瞬間
a:focus{} 獲取焦點
書寫時，要按照以上順序,不可顛倒
行內樣式
寫在標簽里，使用style屬性，優先順序最高
例如：
<p style=“color:#FF0000; font-size:20px;。。”> </p>
css常用的幾種方式
內部樣式（內嵌）
放於<head></head>之間，用<style>和</style>標記進行聲明
<head>
<style>
p{
color:#0000FF;
font-size:25px;
}
</style>
</head>
<body>
<p>這是第1行正文內容……</p>
</body>
鏈接樣式（外部樣式）
html文件和css文件分開，是最實用的方法。
結構 樣式 分離
<head>
<title>頁面標題</title>
<link href="07-07.css" rel="stylesheet” type="text/css" />
關聯 樣式表 類型
</head>
<body>
<h2>CSS標題</h2>
<p>這是正文內容……</p>
</body>
導入樣式
作用和鏈接樣式表基本相同。
Html中和css文件中都可導入樣式表
<head>
<style type="text/css">
<!--
@import url(“cuihua.css”);
-->
</style>
</head>
css權重 優先順序
全局 0
標簽 1
類別 10
id 100
行內 1000
七.CSS設置文本和背景
文字屬性
Color 顏色
font-size:12px; 14px 字型大小
字體
font-family: 楷體，宋體;
多個字體用逗號分隔
優先使用第一個字體 楷體
加粗
font-weight
100-900
bold 、bolder 加粗
normal 正常 去掉標題h1-h6的加粗
傾斜
font-style
italic 斜體
normal 正常 <i></i> <em></em>
段落屬性
text-decoration 文字裝飾
Overline 上劃線
Line-through 刪除線
Underline 下劃線
none 無 去掉超鏈接下劃線
text-align 水平對齊
Left center right
text-indent 首行縮進
像素： 24px
百分比 50%
2個字 2em
負值 -100px
Line-height 行高 行距
行高=高度 可以讓文字垂直居中
數值 ：24px
百分比：200%
背景
Background-color:#f00; 背景顏色
Background-image:url(01.jpg) 背景圖片
Background-repeat 背景重覆
Repeat(預設) 平鋪
no-repeat 不重覆
repeat-x 橫向重覆
repeat-y 豎向重覆
背景位置
Background-position
關鍵字
水平：left center right
垂直：top center bottom
background-position:right top;
數字 background-position:200px 100px;
水平 垂直
可混用
background-position: 50px top;
一個值，第二個預設center
background-position: left （center）;
背景附件
background-attachment:fixed 固定
不隨滾動條移動
背景複合屬性
background:#ccc url(1.gif) no-repeat 100px 200px ；
顏色 圖片地址 重覆 位置
列表樣式
list-style-type：disc; 實心圓
circle 空心圓
square 方塊
decimal 數字
none 無
想要樣式表現出來，必須將margin：0；padding：；刪除
列表圖片
list-style-image:url(1.jpg)；
列表位置
list-style-position：inside/outside；
內部 外部
列表複合
list-style：none或circle url(1.jpg) inside
八.盒模型
<div></div> division
相當於一個容器可以容納：
段落、標題、表格、圖片等
盒模型-頁面所有元素都能看成盒子
一個盒子實際占據的寬度和高度由內容+填充+邊框+邊距組成
即 content+padding+border+margin
內容+ 填充+ 邊框+ 邊距
尺寸屬性——盒子模型中指內容的大小
Width 寬
Height 高
backgiound 背景
內填充padding
padding-top:30px;
padding-bottom:60px;
padding-left:40px;
padding-right:20px;
padding:30px 20px 60px 40px;
上 右 下 左
簡寫：
Padding：10px; 四邊相同10px
Padding：0 10px; 上下 左右
Padding:10px 20px 30px; 上 左右 下
Padding:10px 20px 30px 40px; 上 右 下 左
邊框border
Border-width:10px ; 邊框寬度
Border-color:#f00; 邊框顏色
Border-style: 邊框樣式
solid 實線
dashed 虛線
dotted 點線
複合屬性—不可三缺一
四邊：border:10px #f00 solid;
底邊 border-bottom:1px green dashed;
border-left:none;去掉
填充Padding 邊框與內容的距離
邊距margin 內容與內容的距離
margin -top
margin -right
margin -bottom
margin-left:10px; 當前元素向右移動
簡寫：
margin：10px;
margin ：0 10px; 上下 左右
margin :10px 20px 30px; 上 左右 下
margin :10px 20px 30px 40px; 上 右 下 左
一個盒子實際占據的寬度和高度由內容+內邊距+邊框+外邊距組成
div{width:200px; padding:0 20px;} 200+20*2=240
一個盒子的 margin 為 22px，border 為 1px，padding 為 12px，content 的寬為 220px、高為 50px，如果用標準 W3C 盒子模型解釋，這個盒子的寬？？？
282px 錯誤：
佈局屬性
float浮動-- 橫向排列
none 預設
Left 左
Right 右
clear清除浮動--元素浮動之後，需要清除浮動
None
Left
Right
both 全部
塊級元素 獨占一行 自動換行
div h1—h6 p ul/li form。。
行內元素（內聯） 不獨占一行 不自動換行
a span img b i font input ..
塊級元素:自動換行，
有寬度和高
能嵌套行內元素
<div><a></a></div> <li><a></a></li> <p><span></span></p>
預設的顯示是display:block;
行內元素:不自動換行，
沒有寬和高 a span
不能嵌套塊級元素 <a><span></span></a>
預設的顯示是display:inline;
display 顯示屬性：
block 塊狀顯示
inline 行內顯示
inline-block 行內塊
none 不顯示
九.CSS新屬性:
盒子陰影
box-shadow: 2px 2px 5px 2px #f00 inset;
h-shadow 水平偏移，可為負值
v-shadow 垂直偏移 可為負值
blur 模糊值
陰影外延值 可為負值
color 顏色值
inset： 內陰影。預設外陰影
添加多個陰影逗號分隔
文字陰影
text-shadow: 2px 2px 5px #f00;
水平 垂直 模糊 顏色
如顏色省略，陰影顏色為文字顏色
文字溢出
text-overflow: ;
clip :裁切，預設值
ellipsis 省略號(...)
white-space:nowrap;(強制不換行)
overflow:hidden;（溢出隱藏）
text-overflow:ellipsis;
邊框圓角
border-radius: ;
1個值 5px 四個角相同
2個值 5px 10px
左上與右下 右上與左下
3個值 5px 10px 15px
左上 右上與左下 右下
4個值 5px 10px 15px 20px
左上 右上 右下 左下
單獨一個角 左上 border-top-left-radius:30px;
盒模型模式
box-sizing: ;
指定盒子寬度高度是否包含元素的padding和border
content-box 不包括padding，寬高是內容大小。
border-box 包括padding 寬高是實際大小
漸變背景
Background:-webkit-linear-gradient(top, orange, black);
線性漸變 方向 起點色 終點色
方向可為top 、bottom 、 left、 right
相容firefox
-moz-linear-gradient(top , red, yellow);
相容chrome
-webkit-linear-gradient(top , red, yellow);
放射性漸變
radial-gradient(起點色,終點色);
十.H5
新增的主體結構元素
新增元素 元素說明
article 文章
section 區塊 對於網站的內容進行分塊。通常由內容及標題組成
nav 導航 一個頁面可有多個nav元素，作為頁面整體或不同部分的導航
aside 側欄 頁面的附屬信息部分，最典型的是側邊欄，內容可是友情鏈接，其他文章列表，廣告單元等
time 時間 time為行內元素
hgroup元素 標題組
用於對網頁的標題進行編組：
<hgroup>
<h1>百度網</h1>
<h2>全球最大中文搜索引擎</h2>
。。。
</hgroup>
新增的非主體結構元素
新增元素 說明
header 頭部 一個網頁可擁有多個header元素，可為每個內容 區塊加一個header
main 主體(唯一) <main> 元素中的內容對於文檔來說應當是唯一的。<main> 元素不能是以下元素的後代：<article>、<aside>、<footer>、<header> 或 <nav>。
footer 頁腳
address 文檔或作者的信息 用來在文檔中呈現聯繫信息，包括文檔作者，電話等。預設傾斜，塊元素
audio音頻
<audio src=”someaudio.wav”>audio元素</audio>
video視頻
<video src=”movie.ogg” controls=”controls”>
VIDEO元素
</video>
embed 多媒體
插入各種多媒體，格式可以是圖片，音頻，視頻，插件等
<embed src=”horse.wav”><embed>
十一.定位
定位position
static 靜態定位 預設
relative 相對定位
absolute 絕對定位
fixed 固定定位（不隨滾動條移動）
inherit 繼承
相對定位relative
相對於自己原來位置偏移
指定偏移量：
水平left right
垂直top bottom
絕對定位absolute
相對於父元素位置偏移
指定偏移量：left right top bottom，負值
子絕父相
<div id=“father”>
<div id=“son”></div>
</div>
#father{
position:relative;相對
}
#son{
position:absolute; 絕對
right:100px;
top:100px;}
#father{
width:300px;
height:300px;
background:#FF0000;
}
#son{
width:200px;
height:200px;
background:#99FF00;
position:absolute;
right:100px;
top:100px;
}
z-index
用於設置絕對定位元素，層疊順序
z-index
用於設置絕對定位元素，層疊順序
可以為正值 或 負值, 預設值auto，預設層0層
100 -5
十二.瀏覽器表現標準規範及CSS優先順序
瀏覽器
Internet Explorer 7 8 9 10,
Mozilla Firefox 火狐 FF
chrome 谷歌等
瀏覽器相容性問題：
各大主流瀏覽器由於廠家不同，所以核心構架和代碼也不同
瀏覽器對CSS的解析不一樣，需要針對不同瀏覽器寫不同的CSS，能夠同時相容不同的瀏覽器
（2）IE和FF瀏覽器的預設值差別：
頁邊距 IE為10px FF為8px
Body預設文字大小：IE為14px FF為16px
列表 左縮進40px
解決辦法：*{ margin:0; padding:0;}
瀏覽器預設段間距：FF預設為1.12em IE為10px
在很多情況下，需要專門針對IE不同版本寫css樣式，IE的css hack，
所有瀏覽器通用：
火狐 height:200px;
IE6專用：_height:100px;
IE7專用：*height:100px;
IE7+的瀏覽器標準規範
\9----------IE 6 7 8 9 10生效
\0----------IE 8 9 10生效
Height:100px\9;
css優先順序
!important
行內 1000
Id 100
類 10
標簽 1
通用 0
派生選擇器
.header img
p strong
.nav li
群組選擇器
H1 , h2, h3, h4{}
Ul , ol , li{}
IE6.0瀏覽器問題
IE6下圖片有空隙,怎麼解決
img{display:block;}
div{font-size:0;}
img{margin-bottom:-5px;}
IE6雙倍浮動邊距,怎麼解決
display:inline;
margin-left:100px; _margin-left:50px;減半
IE6 下1px高度容器
overflow:hidden;
line-height:1px; zoom:0.08; 縮放
讓div在頁面居中
div{position:absolute;
left:50%;
margin-left:-寬度一半；
top:50%;
margin-top:-高度一半；}
如：Div{
width:500px;
height:400px;
left:50%;
margin-left:-250px；
top:50%;
margin-top:-200px；
}
十三.CSS3新增選擇器
偽類選擇器
:first-child 第一個子元素
li:first-child{}
:last-child 最後一個子元素
dl:last-child {margin-right:0;}
nth-child(n) 指定序號的子元素
li:nth-child(2) {}
偽類選擇器
:nth-child(3n) 索引是3的倍數的元素
:nth-child(even) 索引是偶數的元素
:nth-child(odd) 索引是奇數的元素
tr:nth-child(odd) {background:#eaeaea;}
:checked 選中狀態
指定表單中radio單選框或checkbox覆選框被選中時的樣式。
<input type="radio" checked>男
<input type="checkbox" checked>上網
input[type="radio"]:checked
{outline:2px red solid;}
input[type="checkbox"]:checked
{outline:2px blue solid;}
::selection 元素被選中時的狀態
p::selection{color:#f00;}
可以設置color 、 background-color 、text-shadow
不可設置border
:disabled 元素處於不可用狀態時的樣式
:enabled 元素處於可用狀態時的樣式
<input type="text" value="可用狀態" >
<input type="text" value="禁用狀態" disabled >
input[type="text"]:enabled{background:#fff;color:#000;}
input[type="text"]:disabled{background:#eee;color:#ccc;}
屬性選擇器
E[att="val"] 選擇具有att屬性且屬性值等於val的元素
元素[屬性=“屬性值”]
Input[type=“text”] {}
input[type="text"]{width:210px;height:24px;float:left;}
E[att*="val"]
具有att屬性且屬性值val包含字元串的E元素
<li class="abc">列表項目</li>
<li class="acb">列表項目</li>
<li class="bc">列表項目</li>
<li class="bca">列表項目</li>
li[class*=“a”]{color:#f00;} 包含
E[att^="val"]
具有att屬性且屬性值為以val開頭的字元串的E元素
<li class="abc">列表項目</li>
<li class="acb">列表項目</li>
<li class="bac">列表項目</li>
<li class="bca">列表項目</li>
<li class="cab">列表項目</li>
<li class="cba">列表項目</li>
li[class^=“a”]{color:#f00;} 開頭
E[att$="val"]
具有att屬性且屬性值為以val結尾的字元串的E元素
<li class="abc">列表項目</li>
<li class="acb">列表項目</li>
<li class="bac">列表項目</li>
<li class="bca">列表項目</li>
<li class="cab">列表項目</li>
<li class="cba">列表項目</li>
li[class$=“a”]{color:#f00;} 結尾
E[att~="val"]
具有att屬性且屬性值為用空格分隔，其中一個等於val的元素
<li class="txt red">列表項目</li>
<li class="txt">列表項目</li>
<li class="txt blue">列表項目</li>
<li class="txt red">列表項目</li>
li[class~="red"]{color:#f00;}
十四.彈性盒模型
1.viewport 設置網頁代碼適應設備寬度
在頭部添加如下代碼：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
display:box; 盒佈局 為父元素設置
flex 盒佈局 新版本
display:-webkit-box;谷歌瀏覽器
display:-moz-box; 火狐瀏覽器
display:-ms-box; ie瀏覽器
display:box;
-webkit-box-orient 子元素排列方式 為父元素設置
horizontal：水平排列 預設
vertical： 縱向排列
-webkit-box-flex 為子元素設置
子元素如何分配其父元素剩餘空間的比例
.one{box-flex:2;}
.two{box-flex:1;}
.three{box-flex:1;}
box-ordinal-group
設置彈性盒模型對象的子元素的顯示順序。
數值較低的元素顯示在數值較高的元素前面；
相同數值的元素，它們的顯示順序取決於它們的代碼順序
對齊方式box-pack
start： 從開始位置對齊
center：居中對齊
end： 從結束位置對齊
對齊方式box-align
start： 從開始位置對齊
center：居中對齊
end： 從結束位置對齊
對齊
水平排列
box-pack 水平
box-align 垂直
垂直排列
box-pack 垂直
box-align 水平
