何爲DIV+CSS?爲啥要使用？
DIV+CSS是當前流行的WEB標準，採用DIV+CSS的方式實現網頁定位。至於爲啥要使用：方便進行數據和樣式的分離，方便開發和維護，DIV負責存放內容(可以是文字、圖片、元素等)，相當於一個容器。CSS負責表現DIV中內容的定位和外觀樣式。瞭解這麼多就OK了。下面看一個頁面的乾貨：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入外部css樣式：可以引入多個 -->
<link rel="stylesheet" type="text/css" href="cssname.css"/>
<!-- 內聯CSS：樣式放在head標籤中 -->
<style type="text/css">
/*常見css選擇器*/
/*通配符選擇器*/
*{
/*屬性名:屬性值;*/
}
/*ID擇器*/
#css1{
}
/*HTML元素選擇器*/
input{
}
/*CLASS選擇器*/
.css2{
}
/*選擇器優先級：ID>CLASS>HTML>通配符*/
/* 父子選擇器
父子選擇器可以有多級，但最好不要超過3層
*/
#css1 input{
}
/*一個元素最多有一個ID選擇器，但可以有多個類選擇器。
當css3,css4有衝突時樣式表現爲：以位置靠後的css文件樣式表現。*/
#css4{
}
.css3{
/*表現的樣式*/
/*常見屬性*/
display:block; /*轉換爲塊元素*/
display:inline; /*轉換爲行內元素*/
background-color:silver;
border:1px solid red;/*1px 邊框寬度 solid 實線 red 顏色*/
width:100px;
height:100px;
color:green; /*color: #ff0000;*/
font-size:10px;
font-style:italic;
margin:0 auto;/*第一個用於上下，第二個用於左右。 auto 表示自動居中*/
padding-top:20px;
padding-left:20px;
}
/*超鏈接*/
a:link {
text-decoration: none;/*取消鏈接下劃線*/
}
a:hover {
color:green;
text-decoration:underline;
}
a:visited {
color:red;
}
/*浮動塊*/
#2{
float: right;/*right:右浮動；left:左浮動*/
}
/*平面定位
1.static：默認,值始終保持不變
2.inherit：繼承,其值在運行過程中,可以改變
3.relative：相對定位
4.absolute:絕對定位(如果沒有父元素，則相對body左上角定位; 有父元素，父元素未脫離標準流)
5.fixed：定位於相對於瀏覽器窗口的指定座標。此元素的位置可通過 “left”、”top”、”right” 以及”bottom” 屬性來規定。不論窗口滾動與否，元素都會留在那個位置。
*/
#1{
position: relative;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div id="css1">
<input type="text" name="username"/>
</div>
<div class="css2"></div>
<div class="css3" id="css4"></div>
<a href="">link</a>
<div id="1"></div>
<div id="2"></div>
</body>
</html><body>標籤的屬性：
text：指定html文件中文字的色彩屬性
link：指定html文件中超鏈接色彩屬性
alink：指定html文件中連接點擊時對象色彩屬性
vlink：指定html文件中點擊過鏈接的對象的色彩屬性
bgcolor：指定html文件中背景色彩屬性
background：指定html文件中背景圖形
leftmargin：指定html文件中顯示畫面左方邊沿空間，單位爲像素
topmargin：指定html文件中顯示畫面上方邊沿空間，單位爲像素
bgproperties：指定背景圖形是否具有捲動屬性
bgproperties="fixed"表示固定背景紙，當捲動文字時紙不會跟着捲動
使用@IMPORT 導入樣式表信息
使用@import 命令用以把外部樣式表信息導入頁面中，它是存在於在 <STYLE>和
</STYLE>標記中的。例如：
<STYLE TYPE="text/css">
@import"example.css";
@import"style/other.css";
</STYLE>
文本屬性
文本屬性設置文本的一些顯示特性，例如文本對齊、文本縮進、行間距、字間距等。
1.文本對齊 text-align
屬性值：left（左）,right（右）,center（居中）,justify（兩端對齊）。
例：h1{text-align:center}
2.文本縮進 text-indent
該屬性有效的控制了文本段落第一行的縮進，其值可以指定，是長度或段落寬度的百
分比。例：
p{text-indent:1.0in}
3.行高 line-height
該屬性設置行與行之間的間距，其值可以爲數值、長度或百分比，百分比以行高爲基
礎。例：
body{line-height:120%}
4.字間距 letter-spacing
字間距設置字與字之間的距離，同樣可以用數值、長度或百分比來指定，百分比以字
37
符大小爲基礎。例：
body{letter-spacing:0.5em}
順便提一下，文本屬性中還有一個單詞間距（word-spacing），設置每個單詞之間的距
離，對於中文頁面來講，可能很少用到。
5.文本裝飾 text-decoration
屬性值：underline（下劃線）,overline（底線）,line-through（線穿過）,blink（ 閃 爍 ）。
例：
h3{text-decoration:underline}
6.垂直對齊 vertical-align
屬性值：baseline（基準線）,super（上標）,sub（下標）,top（頂部）,text-top（文本頂
部）,middle（中）,bottom（底部）,text-bottom（文本底部）和百分比。
通過不同的值設某對象相對其他文本的位置，特別有用的是，上標、下標成爲可能。
例：
<p>平方值：3<font style="vertical-align:super">2</font></p>
7.文本變換 text-transform
屬性值： capitalize（首字母大寫）,uppercase （大寫）,lowercase （小寫）和 none（無）。
缺省值爲 none。例：
p{text-transform:capitalize}
顏色屬性：color
背景屬性
background-color
定義頁面或指定對象的背景顏色，屬性值和顏色屬性相同。
background-image
屬性值：none,url（address），包括相對路徑和絕對路徑，指定對象的背景圖像。
background-repeat
屬性值：no-repeat（無重複）,repeat（重複）,repeat-x（x 方向重複）,repeat-y（y 方向
重複），缺省值爲 repeat，指定背景圖像的顯示方式。該屬性需與 background-image 和
background-position 組合使用。
background-attachment
屬性值：scroll（隨對象一起滾動）,fixed（固定），缺省值爲 scroll。該屬性指定對象
的背景圖像是否與對象一起滾動，或是固定在頁面上的某一個位置。該屬性與 backgroundimage 組合使用。
background-position
屬性值：垂直位置 vertical，指定 top,center,bottom 和具體數值、百分比；水平位置
horizontal，指定 left,center,right 和具體數值、百分比。定義背景圖像的絕對或相對位置顯
示。
background
這是一個簡寫屬性，可以把上述所有背景屬性歸納到一行代碼中定義。下面是一個比
較完整的例子：
body{
background-image:url(images/001.jpg);
background-repeat:no-repeat;
background-position:20px 50px;
background-attachment:fixed
}
用 background 屬性簡寫爲：
body{background:url(images/001.jpg) no-repeat 20px 50px fixed}
至於css盒子方面，在這裏不作解析。另外JavaScript也不做討論。
分享幾個常用的JS框架：
