CSS 制作与操作(4)
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即可设为图像按钮
多行文本框
