教学文库网 - 权威文档分享云平台
您的当前位置:首页 > 精品文档 > 资格考试 >

CSS 制作与操作(4)

来源:网络收集 时间:2025-11-14
导读: a:hover{color:#821818; padding:5px 8px 3px 12px ; background-color:#ccc; border-top:1px solid #717171; border-left:1px solid #717171; border-botton:1px solid #eeee; border-right:1px solid #eeee;} cur

a:hover{color:#821818; padding:5px 8px 3px 12px ; background-color:#ccc;

border-top:1px solid #717171; border-left:1px solid #717171; border-botton:1px solid #eeee; border-right:1px solid #eeee;}

cursor可以控制鼠标指针的形状 设置项目列表样式超链接

Home Contact Web dev Map

图片符号

如果希望项目符号采用图片的方式,则建议将list-style-typc属性的值设为none,然后修改标记的背景属性background来实现

Home Contact Web dev Map

创建简单的导航菜单 简单的竖直菜单

当项目列表的list-style-typc属性值设为:none时,制作各式各样瓣菜单和导航条便成了项目列表的最大用处之一。

body{background-color:#deeoff; }

##navigation{width:150px; font-family:Arial; font-size:14px; text-align:right; }

#navigation ul{ list-style-type:none; margin:0px; padding:0px; }

#navigation li{

border-bottom:1px solid #9f9fed; }

#navigation li a{ display:block; height:1em;

paddinh:5px 5px 5px 0.5m; text-decoration:none;

border-left:12px solid #151571; border-right:1px solid #151571;}

display:block;语句,通过该语句超链接被设置成了块元素,当鼠标指针进入该块的任何部分时都会被激活,而不是仅在文字上方时才被激活。 #navigation li a:link, #navigation li a:visited{ background-color:#1136c1; color:#fffff;

}#navigation li a:hover{ background-color:#002099; color:#ffff00;

border-left:12px solid yellow; }

横竖自由转换菜单

两处改动1,把width:120这条规则从#navigation移动到#navigation li a中。这样,这个列表就没有宽度限制了,同时可保证每个列表项的宽度都是120像素。

2,在#navigation li的样式 中增加一条float:left也就是使各个列表项变为向左浮动。这样就会依次排列。直至浏览器窗口容纳不下。再折行排列。

鼠标经过时给图片增加边框

img{

padding:5px;

border:1px white solid; }

img:hover{

border:1px green solie; }

对于IE6浏览器不支持img 的元素的:hover伪类。只有对标记支持:hover伪类。因此必须在图像的外面套上个标记

padding:5px;

}a:link img, a:visited img{ border:1px white solid; }

a:hover img, a;active img{ border:1px green solid;

注意把img 写在a:hover的后面,就表示在a元素处于鼠标指针经过状态时,里面的图像被选 中。

用CSS建立表单 表单输入类型

文本输入框

每个表单元素之所以会有不同的类型,原因就在于type属性的值设定的不同,当type=\时,显示的就是文本输入框。name名称 设定此一栏的名称,程式中会用到 size 设定此一栏显现的宽度vaue 预设内容align 对齐方式maxlength可设定输入的最大长度。

单选按钮 type属性为radio

checked当需要将某个单选按钮设置为被选中状态时,就要为该单选按钮设置checked=\

name需要将一组供选择的单选按钮设置为相同的名称,以保证在这一组中只能有一个

单选按钮被 选中。复选按钮

兴趣

可同时设置多个checked=\密码输入框

当 type属性设置为password时就会产生一个密码输入框。它和文本输入框几乎完全相同。但是密码输入框在输入时会以圆点来取代输入的文字 。

姓名:

按钮

将type属性设置为submit即为提交按钮type属性设置为reset即为重置按钮

如果将type属性设置为button即可设为普通按钮 将type设置为 image即可设为图像按钮

多行文本框