css学习之梅花浏览器

最新推荐文章于 2022-10-10 15:04:57 发布

zhangzhifei1991

最新推荐文章于 2022-10-10 15:04:57 发布

阅读量832

点赞数

分类专栏： Web前端--CSS

本文链接：https://blog.csdn.net/zhangzhifei1991/article/details/40722571

版权

Web前端--CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

路径三种格式：

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;
}