综合案例一-热词
综合案例一-热词
设计图如下
1、设计需求
①需要鼠标放上去有显示透明
②需要点击后跳转到相应页面且保留原页面
2、设计所需标签和CSS样式
所需标签:div
CSS样式:伪类hover,颜色color,字大小font-size,背景颜色background-color,盒子宽度和高度width和height
3、设计具体步骤
第一步使用a标签把对应的字写上去
<a href="#" target="_blank">HTML</a>
<a href="#" target="_blank">CSS</a>
<a href="#" target="_blank">JavaScript</a>
<a href="#" target="_blank">Vue</a>
<a href="#" target="_blank">React</a>
第二步查看效果发现默认为蓝色,和有下划线,且在同一行。这时候就需要使用color,text-decoration和display属性
a {
color: white;
display: block;
text-decoration: none;
}
第三步看设计图还需要设置盒子的宽度和长度,背景颜色,字的大小,在盒子里面水平和垂直居中
a {
background-color: #3064bb;
width: 200px;
height: 80px;
color: white;
font-size: 18px;
text-align: center;
line-height: 80px;
display: block;
text-decoration: none;
}
第四步还需要设置鼠标悬停效果,用hover属性
a:hover {
background-color: #608dd9;
width: 200px;
height: 80px;
}
总体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
background-color: #3064bb;
width: 200px;
height: 80px;
color: white;
font-size: 18px;
text-align: center;
line-height: 80px;
display: block;
text-decoration: none;
}
a:hover {
background-color: #608dd9;
width: 200px;
height: 80px;
}
</style>
</head>
<body>
<h1>搜索热词</h1>
<a href="#" target="_blank">HTML</a>
<a href="#" target="_blank">CSS</a>
<a href="#" target="_blank">JavaScript</a>
<a href="#" target="_blank">Vue</a>
<a href="#" target="_blank">React</a>
</body>
</html>
4、遇到的问题
第一个忘记了下划线如何删除;
第二个一开始想用div标签嵌套a标签,但发现div标签的话a标签的字体颜色就改变不了。a特殊不能继承,所以得再单独设置。比较麻烦所以干脆直接用a标签;