一、标准的清理浮动的方法
.clear: after{
display: block;
height: 0 ;
content: "." ;
visibility: hidden;
clear: both;
}
.clear{
zoom: 1 ;
}
二、文本属性
color
描述: 设置文本颜色
语法:color :value ;
font-size
描述: 设置字号
语法:font-size :value ;
说明:
标题: 16 px~24 px
正文: 12 px~16 px
font-family
描述: 设置字体
语法:font-family :value ,value,...;
font-style
描述: 文本倾斜
语法:font-style :italic|normal ;
font-weight
描述: 文本加粗
语法:font-weight :bold|normal ;
text-align
描述: 设置文本水平对齐方式
语法:text-align :left|center|right ;
text-decoration
描述: 设置修饰线
语法:text-decoration :none|underline|line-through|overline ;
text-indent
描述: 首行缩进
语法:text-indent :value ;
line-height
描述: 设置行高
语法:line-height :value ;
说明: 行高一般设置为1.5 em~2 em
cursor
描述: 设置鼠标指针类型
语法:cursor :pointer (手形)|help(帮助)|text(文本)|crosshair(十字光标);
三、显示方式
display
描述: 设置对象的显示方式
语法:display :none|block|inline ;
哪些对象为块级对象?
A .默认情况下,div,p,h1~h6,ul,li,ol等;
B .内联对象使用display: block;属性后;
C .对象使用float属性后;
四、表格属性
vertical-align
描述: 设置垂直对齐方式
语法:vertical-align :top|middle|bottom ;
border-spacing
描述: 单元格的外边距
语法:border-spacing :value ;
border-collapse
描述: 设置单元格框线是否合并
语法:border-collapse :separate (分隔)|collapse(合并);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns ="http://www.w3.org/1999/xhml" >
<head >
<title > 页面布局</title >
<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />
<style type ="text/css" >
body ,div ,p ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,ul ,ol ,li {
margin :0 ;
padding :0 ;
}
body {
font-size :14 px ;
font-family :宋体 ;
}
ul ,ol {
list-style :none ;
}
img {
border :none ;
}
.clear :after {
display :block ;
height :0 ;
content :"." ;
visibility :hidden ;
clear :both ;
}
.clear {
zoom :1 ;
}
#container {
width :960 px ;
margin :0 auto ;
}
#logo {
height :84 px ;
}
#navi {
height :32 px ;
background :#FF7E00 ;
}
#navi li {
float :left ;
line-height :32 px ;
}
#navi a {
color :#fff ;
display :block ;
width :100 px ;
height :32 px ;
text-align :center ;
text-decoration :none ;
margin-right :2 px ;
background :url(images/navi_bg.png) ;
}
#main {
}
#left ,#center ,#right {
float :left ;
width :300 px ;
}
#left {
}
#center {
margin :0 30 px ;
background :#0f0 ;
}
#right {
background :#00f ;
}
.list li {
padding-left :12 px ;
line-height :1.7 em ;
background :url(images/dot.jpg) no-repeat left center ;
}
.list a {
color :#000 ;
text-decoration :none ;
}
.list a :hover {
color :#f00 ;
text-decoration :underline ;
}
.subject {
font-size :18 px ;
font-family :微软雅黑 ;
}
</style >
</head >
<body >
<div id ="container" >
<div id ="logo" > <a href ="#" > <img src ="images/logo.jpg" alt ="" /> </a > </div >
<div id ="navi" >
<ul class ="clear" >
<li > <a href ="#" > 首页</a > </li >
<li > <a href ="#" > 新闻</a > </li >
<li > <a href ="#" > 财经</a > </li >
<li > <a href ="#" > 金融</a > </li >
<li > <a href ="#" > 社会</a > </li >
</ul >
</div >
<div id ="main" class ="clear" >
<div id ="left" >
<h2 class ="subject" > 国内要闻</h2 >
<ul class ="list" >
<li > <a href ="#" > 国内新闻标题1</a > </li >
<li > <a href ="#" > 国内新闻标题1</a > </li >
<li > <a href ="#" > 国内新闻标题1</a > </li >
<li > <a href ="#" > 国内新闻标题1</a > </li >
<li > <a href ="#" > 国内新闻标题1</a > </li >
<li > <a href ="#" > 国内新闻标题1</a > </li >
<li > <a href ="#" > 国内新闻标题1</a > </li >
</ul >
</div >
<div id ="center" > B</div >
<div id ="right" > C</div >
</div >
</div >
</body >
</html >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns ="http://www.w3.org/1999/xhml" >
<head >
<title > 文本属性</title >
<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />
<style type ="text/css" >
p {
font-size :20 px ;
font-family :隶书 ;
font-style :italic ;
font-weight :bold ;
text-align :left ;
text-indent :2 em ;
line-height :1.5 em ;
}
</style >
</head >
<body >
<p > 文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式</p >
<p > 文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式</p >
<p > 文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式文本样式</p >
<p style ="text-decoration:underline;" > 我是通过CSS设置的下划线</p >
<p style ="text-decoration:line-through;" > 我是通过CSS设置的删除线</p >
<p style ="text-decoration:overline;" > 我是通过CSS设置的上划线</p >
<p style ="text-decoration:underline overline line-through" > 我什么线都有</p >
</body >
</html >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns ="http://www.w3.org/1999/xhml" >
<head >
<title > 鼠标指针</title >
<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />
</head >
<body >
<p style ="cursor:pointer;" > 我是手形的鼠标</p >
<p style ="cursor:help;" > 我是帮助的鼠标</p >
<p style ="cursor:text;" > 我是文本的鼠标</p >
<p style ="cursor:crosshair;" > 我是十字光标的鼠标</p >
<p style ="cursor:wait;" > 我是等待的鼠标</p >
</body >
</html >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns ="http://www.w3.org/1999/xhml" >
<head >
<title > 页面布局</title >
<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />
<style type ="text/css" >
.a1 {
width :500 px ;
border :2 px solid #f00 ;
border-spacing :0 px ;
border-collapse :collapse ;
}
.a1 td {
padding :10 px ;
border :2 px solid #f00 ;
}
</style >
</head >
<body >
<table class ="a1" >
<tr >
<td > 1111</td >
<td > 1111</td >
</tr >
<tr >
<td > 1111</td >
<td > 1111</td >
</tr >
</table >
</body >
</html >
一、标准的清理浮动的方法
.clear: after{
display: block;
height: 0 ;
content: "." ;
visibility: hidden;
clear: both;
}
.clear{
zoom: 1 ;
}
二、文本属性
color
描述: 设置文本颜色
语法:color :value ;
font-size
描述: 设置字号
语法:font-size :value ;
说明:
标题: 16 px~24 px
正文: 12 px~16 px
font-family
描述: 设置字体
语法:font-family :value ,value,...;
font-style
描述: 文本倾斜
语法:font-style :italic|normal ;
font-weight
描述: 文本加粗
语法:font-weight :bold|normal ;
text-align
描述: 设置文本水平对齐方式
语法:text-align :left|center|right ;
text-decoration
描述: 设置修饰线
语法:text-decoration :none|underline|line-through|overline ;
text-indent
描述: 首行缩进
语法:text-indent :value ;
line-height
描述: 设置行高
语法:line-height :value ;
说明: 行高一般设置为1.5 em~2 em
cursor
描述: 设置鼠标指针类型
语法:cursor :pointer (手形)|help(帮助)|text(文本)|crosshair(十字光标);
三、显示方式
display
描述: 设置对象的显示方式
语法:display :none|block|inline ;
哪些对象为块级对象?
A .默认情况下,div,p,h1~h6,ul,li,ol等;
B .内联对象使用display: block;属性后;
C .对象使用float属性后;
四、表格属性
vertical-align
描述: 设置垂直对齐方式
语法:vertical-align :top|middle|bottom ;
border-spacing
描述: 单元格的外边距
语法:border-spacing :value ;
border-collapse
描述: 设置单元格框线是否合并
语法:border-collapse :separate (分隔)|collapse(合并);
五、定位属性
position
描述: 设置定位类型
语法:position :static|fixed (固定)|absolute(绝对)|relative(相对);
fixed,脱离正常文档流,其位置在页面是固定的,并且可以通过top、right、bottom、left进行控制。
absolute,脱离正常文档流,其位置可以通过top、right、bottom、left进行控制。
relative,没有脱离文档流,在通过top、right、bottom、left进行位置控制时,其实只是在原始出现位置上发生偏移。
z-index
描述: 设置Z 轴叠放顺序
语法:z-index :value ;
六、透明度(补P121 )
Chrome 、 Firefox 等
opacity: value(0 ~1 );
IE
filter: alpha(opacity=value[0 ~100 ]);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns ="http://www.w3.org/1999/xhml" >
<head >
<title > 定位属性</title >
<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />
<style type ="text/css" >
#topNav {
position :fixed ;
top :0 ;
left :0 ;
right :50 px ;
height :50 px ;
background :red ;
}
body {
padding-top :50 px ;
}
</style >
</head >
<body >
<div id ="topNav" > 111</div >
<p > heheh</p >
<p > 科技</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
</body >
</html >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns ="http://www.w3.org/1999/xhml" >
<head >
<title > 定位属性</title >
<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />
<style type ="text/css" >
#mask {
position :absolute ;
width :400 px ;
height :250 px ;
background :#000 ;
top :0 px ;
left :0 px ;
opacity :.1 ;
filter :alpha(opacity=30 ) ;
}
</style >
</head >
<body >
<div id ="mask" > </div >
<p > hehe </p >
<p > 科技</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
<p > 文本样式</p >
</body >
</html >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns ="http://www.w3.org/1999/xhml" >
<head >
<title > 定位属性</title >
<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />
<style type ="text/css" >
#parent {
border :5 px solid #f00 ;
}
#son {
position :relative ;
top :15 px ;
left :20 px ;
width :150 px ;
height :100 px ;
border :5 px solid #0f0 ;
}
</style >
</head >
<body >
<div id ="parent" >
<div id ="son" > </div >
</div >
</body >
</html >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns ="http://www.w3.org/1999/xhml" >
<head >
<title > 定位属性</title >
<meta http-equiv ="content-type" content ="text/html; charset=UTF-8" />
<style type ="text/css" >
#d1 {
position :absolute ;
width :250 px ;
height :250 px ;
background :#f00 ;
z-index :56 ;
}
#d2 {
position :absolute ;
width :300 px ;
height :300 px ;
background :#000 ;
z-index :55 ;
}
</style >
</head >
<body >
<div id ="d1" > </div >
<div id ="d2" > </div >
</body >
</html >