網頁設計基礎介紹

時間 2019-11-30

標籤網頁設計基礎介紹简体版

原文原文鏈接

最基礎的網頁設計,就是給你一個圖片你作成一個網頁,我的網頁的功底不是很高，偏向於後臺邏輯處理，偶爾會看些前端構造
首先先認識一下網頁的一些相關知識:php

通常的,如今一個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＋回車css

好了,回到正題;
一.html簡介
HTML——
Hypertext markup language
超文本標記語言html

文件的擴展名爲.html或 .htm前端

首頁：index.html default.html 默認頁

HTML的基本語法
標記 /標籤(元素)
雙標籤格式爲:<標籤>內容</標籤>
<html></html>網頁頁面根元素
<head></head> 頭部
<body></body> 主體
<p></p> 段落
<h1></h1> 標題
<table></table>表格。。。java

單標籤格式爲:<標籤>
例如：<img> 圖片 <br>換行 <hr>水平線
一個最基本的網頁構造
<html>
<head>
<title>網頁名稱</title>
</head>
<body>
網頁主題
</body>
</html>
保存爲html文件就能夠以瀏覽器打開網頁了web

一個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
大於號 > > rightchrome

雙引號」 "
版權符© ©
註冊符® ® 瀏覽器

一些經常使用的標籤:
粗體<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等任意文件

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">

</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-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 多媒體

插入各類多媒體，格式能夠是圖片，音頻，視頻，插件等

十一.定位

定位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^=「a」]{color:#f00;} 開頭

E[att$="val"]
具備att屬性且屬性值爲以val結尾的字符串的E元素

li[class$=「a」]{color:#f00;} 結尾

E[att~="val"]
具備att屬性且屬性值爲用空格分隔，其中一個等於val的元素

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：從結束位置對齊