CSS的三个选择器加超链接测试实例
作者:网络转载 发布时间:[ 2015/1/7 13:43:37 ] 推荐标签:CSS web测试
CSS一共有三中选择器,进行指定的CSS 样式的修饰,下面来介绍一下CSS的三种类选择器。他们分别是类选择器,id选择器,html选择器。然后默认超链接是蓝色带一个下划线的样式,如果我希望超链接是黑色然后不带下划线,然后当鼠标移动到上面去的时候出现下划线,点击以后超链接编程红色,这样的效果该如何设计呢,下面请看实例。
首先建立一个HTML文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/1.css" type="text/css"/>
</head>
<body>
|
你好北京!
<span class="style1">新闻一</span>
<span class="style1">新闻二</span>
<span class="style1">新闻三</span>
<span class="style1">新闻四</span>
<span class="style1">新闻五</span><br/><br/><br/>
<span id="style2">这是一则非常重要的新闻</span><br/><br/><br/>
<a href="#">连接测试</a><br/><br/><br/>
<a href="#">测试连接</a>
</body>
</html>
|
然后对应的css文件如下
/*类选择器*/
.style1{
font-weight: bold;
font-size: 20px;
background-color: pink;
}
/*id选择器*/
#style2{
font-size: 30px;
background-color: silver;
}
/*html选择器*/
body{
color: black;
}
a:link{
color: black;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a:visited{
color: red;
}
|
这样可以实现所需要的效果了。
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系SPASVO小编(021-61079698-8054),我们将立即处理,马上删除。
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11热门文章
常见的移动App Bug??崩溃的测试用例设计如何用Jmeter做压力测试QC使用说明APP压力测试入门教程移动app测试中的主要问题jenkins+testng+ant+webdriver持续集成测试使用JMeter进行HTTP负载测试Selenium 2.0 WebDriver 使用指南