课程主题使用表格列表及定位属性美化网页网页客户端技术.pptx

;使用表格、列表及定位属性美化网页;分类属性;float属性

float属性定义元素在哪个方向浮动。以往这个属性一般都应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而且不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度，否则，它们会尽可能地窄。

基本语法：float：left|right|none

语法说明：

left，表示浮动元素在左边，是左对齐的。

right，表示浮动元素在右边，是右对齐的。

none，表示不浮动，默认值。;float属性

例如，以下代码设置图像右边浮动，居右对齐：

img{float:right};clear属性

clear清除属性定义了是否允许在某元素的哪边出现浮动元素。它和浮动属性是一对相对立的属性，浮动属性用来设置某个元素的浮动位置，而清除属性则是要去掉某个位置的浮动元素。

基本语法：clear：left|right|both|none

语法说明：

left、right：不允许在某元素左或右边有浮动元素；

both：不允许在某元素左、右两边有浮动元素；

none：允许在某元素左、右两边有浮动元素。

例如，以下代码规定了图像的左侧和右侧均不允许出现浮动元素：

img{float:left;clear:both;};visibility属性

visibility属性用来设置层和其他元素的可见性。

基本语法：visibility：visible|hidden|collapse|inherit

语法说明：

visible，默认值。元素是可见的。

hidden，元素是不可见的。

collapse，当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为hidden。

inherit，规定应该从父元素继承visibility属性的值。

;visibility属性

例如，以下代码第1行定义了类名为visible的h1标题，是可见的，第2行定义了类名为invisible的h1标题，是不可见的。

h1.visible{visibility:visible}

h1.invisible{visibility:hidden};display属性

display属性用于定义建立布局时元素生成的显示框类型。

基本语法：

display：属性值

语法说明：

display属性可能取的值及取值说明见下页中表所示。例如，以下代码第1行设置了段落被显示为内联元素，元素前后没有换行符，第2行设置了不显示div层。

p{display:inline}

div{display:none};序号;cursor属性

cursor属性用于设置鼠标指针的不同形状。

基本语法：

cursor：属性值

语法说明：

cursor属性可能取的值及取值说明见表所示。

例如，以下代码设置了类名为s1的span层的鼠标指针为帮助指针：

span.s1{cursor:help;};序号;五;序号;例2-11CSS的分类属性示例。

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd

htmlxmlns=/1999/xhtml

head

metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/

titleCSS的分类属性示例/title

styletype=text/css

ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}

a{

float:left;

width:7em;

text-decoration:none;

color:white;

background-color:purple;

padding:0.2em0.6em;

border-right:1pxsolidwhite;;a:hover{background-color:#ff3300}

li{display:inline}

/style

/head

body

ul

liahref=#Linkone/a/li

liahref=#Linktwo/a/li

liahref=#Linkthree/a/li

liahref=#Linkfour/a/li

/ul

p

在上面的例子中，我们把ul元素和a元素向左浮动。li元素显示为行内元素（元