何为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框架：
2697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
