开发工具与关键技术:DW 前端开发
作者:陈芝番
撰写时间:2019.2.7
以下是我们常访问网页常用的选择器,超链接选择器是选择器其中一种,特别注意::hover 用于当用户把鼠标移动到元素上面时的效果;active 用于用户单击元素时的效果;接下来是超链接的整体布局:
Style CSS
div{
margin-left: 500px;
}
ul{
width: 350px;
height: 30px;
background-color:#937E7F;
}
li{
padding: 5px 5px 2px 5px;
font-size: 13px;
color:#424242;
list-style: none;
float: left;
}
a:hover,a:active{
font-size: 14px;
color:white;
}
ul li a{
text-decoration: none;
}
点击一下新浪网,即实现网页跳转效果
当然点击QQ,百度,CSDN官方APP,也会实现相同的
跳转效果,就不一一点击了,有兴趣的可以尝试!
HTML
<li id="qw">点击链接网站</li>
<li><a href="http://www.sina.cn" target="_blank">新浪网</a></li>
<li><a href="http://www.qq.com" target="_blank">QQ</a></li>
<li><a href="http://www.baidu.com" target="_blank">百度</a></li>
<li><a href="https://blog.csdn.net">CSDN官方APP</a></li>
这一效果只有当用户和网站交互的时候才能体现出来!