综合案例一-热词
目录
综合案例一-热词
1、设计需求
2、设计所需标签和CSS样式
3、设计具体步骤
4、遇到的问题
设计图如下
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标签；