css学习之梅花浏览器

路径三种格式：

1、同一个目录下，只需直接输入文件名。

2、同层次文件夹下的文件，如images/xx

3、上一层目录文件夹下的文件，../第七章/7-3.html

4、根路径，以\开始，然后为根目录下的目录名

超链接属性分别为： a:link 未访问过的链接，a:active 光标单击过得链接，a:hover光标经过的链接，a:visited已经访问过的链接。（注意css属性设置时，a与a:link的区别在于，只有含有href的链接，才能适用于a:link属性，a设置的属性，上述几种状态普遍适用

链接打开方式，_blank,_new在新的窗口打开链接页面，_parent在父框架打开，_self，在当前网页所在窗口打开，_top在完整的浏览器中打开

实际测试情况（360浏览器）为，除了_top在当前页面打开，其他都是在新的窗口打开

按钮式超链接的实现方法（主要体现在border上）

    首页
        博客空间
        资源图库
        设计名站
        设计欣赏
   

a{
width:131px;
height:26px;
float:left;
text-align:center;
color:#fff;
font-size:15px;
border:#fff solid 1px;
padding:10px 0px 0px 0px;
}
a:link,a:visited{

background-color:#666;
text-decoration:none;
}
a:hover{
 
background-color:#75b040;
text-decoration:none;
}

实现浮雕是超链接：

超链接除了设置背景颜色意外，还可以设置背景图片放在超链接的伪属性中，从而制作出更多绚丽效果，实现代码如下：

a{
width:131px;
height:26px;
float:left;
text-align:center;
color:#fff;
font-size:15px;


}
a:link,a:visited{
padding:10px 0px 0px 0px;
background-image:url(images/9203.gif);
background-repeat:no-repeat;
background-color:#666;
text-decoration:none;
}
a:hover{
padding:10px 0px 0px 0px;
background-image:url(images/9204.gif);
background-reppeat:no-repeat;
background-color:#75b040;
text-decoration:none;
color:#ff0;
}

鼠标特性cursor：move，crosshair，help等

实现在鼠标经过某超链接时，鼠标变为箭头加问号的效果

 设计欣赏

.after{
cursor:help;
}

用户界面新增属性介绍：

box-sizing：content-box|border-box|inherit

resize：none|both|horizontal|vertical|inherit

outline:outline-color,outline-style,outline-width,outline-offset

nav-index属性为键盘操作时获得焦点的顺序。