从制造到创造
软件工程师成长之路
posts - 292,  comments - 96,  trackbacks - 0
   3.4、边框属性
   3.5、鼠标光标属性
   3.6、定位属性
   3.7、区块属性
   3.8、列表属性

3.3.4、边框属性
        
        不同方向的边框属性如表所示:
边框属性 描述
border 边框
border-top 上边框
border-left 左边框
border-right 右边框
border-bottom 下边框

        对于边框的样式,可以按照下表中所示进行设置:
边框样式属性值 描述
none 无边框
dotted 边框由点组成
dash 边框由短线组成
solid 边框是实线
double 边框是双实线
groove 边框带有立体感的沟槽
ridge 边框成脊型
inset 边框内嵌一个立体边框
outset 边框外嵌一个立体边框

范例文件:13-18.htm
 1 <!-- ------------------------------ -->
 2 <!--       文件范例:13-18.htm      -->
 3 <!--        文件说明:CSS边框       -->
 4 <!-- ------------------------------ -->
 5 <HTML>
 6     <HEAD>
 7         <TITLE>CSS背景图像位置</TITLE>
 8         <Style Type="text/css">
 9         <!--
10             P{ 
11                 border-top: 2px solid #990000;
12                 border-right: 2px solid #3399FF;
13                 border-bottom: 2px solid #00FF33;
14                 border-left: 2px solid #CC33FF;
15             }
16         -->
17         </Style>
18     </HEAD>
19     <BODY>
20         <H1>主流的网页设计软件</H1>
21         <p>目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
22     </BODY>
23 </HTML>


文件说明:
第10~15行分别设定了上、右、下、左4个边框的宽度、边框样式和颜色。

显示结果:


3.4.5、鼠标光标属性

鼠标光标属性值 描述
hand
crosshair 交叉十字
text 文本选择符号
wait Windows 的沙漏形状
default 默认的鼠标形状
help 带问号的鼠标
e-resize 向东的箭头
ne-resize 指向东北方的箭头
n-resize 向北的箭头
nw-resize 指向西北方的箭头
w-resize 向西的箭头
sw-resize 指向西南方的箭头
s-resize 向南的箭头
se-resize 指向东南方的箭头

范例文件:13-19.htm

<!-- ------------------------------ -->
<!--       文件范例:13-19.htm      -->
<!--   文件说明:CSS鼠标光标属性    -->
<!-- ------------------------------ -->
<HTML>
    
<HEAD>
        
<TITLE>CSS鼠标光标属性</TITLE>
        
<Style Type="text/css">
        <!--
            Body
{ 
                CURSOR
:CROSSHAIR
            
}
            IMG
{ 
                Cursor
:help
            
}
        -->
        
</Style>
    
</HEAD>
    
<BODY>
        
<H1>主流的网页设计软件</H1>
        
<img src=13-19.jpg align=left>
        
<P>目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</P>
    
</BODY>
</HTML>


显示结果:





3.4.6、定位属性

定位属性 描述
position “absolute”(绝对定位)、“relative”(相对定位)
top 层距离顶点纵坐标的距离
left 层距离顶点横坐标的距离
width 层的宽度
height 层的高度
z-index 决定层的先后顺序和覆盖关系,值高的元素会覆盖值比较低的元素
clip 限定只显示裁切出来的区域,裁切出的区域为矩形。只要设定两个点即可,一个是矩形左上角的顶点,由top和right两项的设置完成,另一个是右下角的顶点,由bottom和 right 两项设置完成
overflow

当层内的内容超出层所能容纳的范围时:
visible:层的大小、内容都会显示出来
hidden:会隐藏超出层大小的内容
scrol:不管内容是否超出层的范围,选中此项都会为层添加滚动条
auto:只在内容超出层的范围时才显示滚动条

visibility

这一项是针对嵌套层的设置,嵌套层是插入在其他层中的层,分为嵌套的层(子层)和被嵌套的层(父层)
inherit:子层继承父层的可见性,父层可见,子层也可见;父层不可见,子层也不可见
visible:无论父层可见与否,子层都可见
hidden:无论父层可见与否,子层都隐藏


范例文件:13-20.htm

<!-- ------------------------------ -->
<!--       文件范例:13-20.htm      -->
<!--      文件说明:CSS定位属性     -->
<!-- ------------------------------ -->
<HTML>
    
<HEAD>
        
<TITLE>CSS定位属性</TITLE>
        
<Style Type="text/css">
        <!--
            .self
{
                position
:absolute;
                top
:80px;
                left
:50px;
                width
:300px;
                height
:100px;
                overflow
:auto;
                background-color
:#336699;
                color
:#FFFFFF;
                z-index
:1;
                visibility
:visible;
            
}
        -->
        
</Style>
    
</HEAD>
    
<BODY>
        
<H1>主流的网页设计软件</H1>
        
<div class="self">目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</div>
    
</BODY>
</HTML>


显示结果:



3.4.7、区块属性
区块属性 描述
width 设定对象的宽度
height 设定对象的高度
float 让文字环绕在一个元素的四周
clear 指定在某一个元素的某一边是否允许有环绕的文字或对象
padding 决定了究竟在边框与内容之间应该插入多少空间距离,它有4个属性,分别是:top、bottom、left、right,分别用于设定上下左右的填充距离
margin 设置一个元素在4个方向上与浏览器窗口边界或上一级元素的边界的距离。与“padding”类似,它也有上下左右4个属性,分别控制4个方向

范例文件:13-21.htm

<!-- ------------------------------ -->
<!--       文件范例:13-21.htm      -->
<!--      文件说明:CSS区块属性     -->
<!-- ------------------------------ -->
<HTML>
    
<HEAD>
        
<TITLE>CSS区块属性</TITLE>
        
<Style Type="text/css">
        <!--
            .self
{
                width
:300px;
                height
:100px;
                MARGIN-TOP
: 20PX; 
                MARGIN-RIGHT
: 30PX; 
                MARGIN-BOTTOM
: 20PX; 
                MARGIN-LEFT
: 30PX
            
}
        -->
        
</Style>
    
</HEAD>
    
<BODY>
        
<H1>主流的网页设计软件</H1>
        
<div class=self>目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本MX继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。</div>
    
</BODY>
</HTML>


显示结果:


3.4.8、列表属性
列表属性 描述
list-style-type 设定引导列表选项的符号类型
bullet 选择图像作为项目的引导符号
position 决定列表项目缩进的程度,outside:列表贴近左侧边框;inside:列表缩进

列表符号类型属性值 描述
disc 在文本行前面加“”实心园
circle 在文本行前面加“”空心园
square 在文本行前面加“”实心方块
decimal 在文本行前面加普通的阿拉伯数字
lower-roman 在文本行前面加小写罗马数字
upper-roman 在文本行前面加大写罗马数字
lower-alpha 在文本行前面加小写英文字母
upper-alpha 在文本行前面加大写英文字母
none 不显示任何项目符号或编号


范例文件:13-22.htm
<!-- ------------------------------ -->
<!--       文件范例:13-22.htm      -->
<!--      文件说明:CSS列表属性     -->
<!-- ------------------------------ -->
<HTML>
    
<HEAD>
        
<TITLE>CSS列表属性</TITLE>
        
<Style Type="text/css">
        <!--
            li
{
                list-style-type
:upper-roman;
            
}
        -->
        
</Style>
    
</HEAD>
    
<BODY>
        
<H2>图像设计软件</H2>
        
<OL>
            
<LI>Photoshop</LI>
            
<LI>Illustrator</LI>
            
<LI>Freehand</LI>
            
<LI>CorelDraw</LI>
        
</OL>
    
</BODY>
</HTML>

显示结果:
posted on 2007-10-08 17:18 CoderDream 阅读(4193) 评论(2)  编辑  收藏 所属分类: CSS

FeedBack:
# 列表属性
2008-04-06 20:17 | mengxianglong
讲的不全面 不够仔细 不够深刻 让别人无法理解  回复  更多评论
  
# 列表属性
2008-04-06 20:53 | mengxianglong
详细点吧
哭哭哭哭哭哭哭哭哭  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

<2007年10月>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

常用链接

留言簿(9)

我参与的团队

随笔分类(245)

随笔档案(239)

文章分类(3)

文章档案(3)

收藏夹(576)

友情链接

搜索

  •  

积分与排名

  • 积分 - 454162
  • 排名 - 115

最新评论

阅读排行榜

评论排行榜