综合案例一-热词

综合案例一-热词

设计图如下

综合案例一-热词图片

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>