设计图如下

1、设计需求

①需要鼠标放上去有显示透明

②需要点击后跳转到相应页面且保留原页面

2、设计所需标签和CSS样式

所需标签：div

CSS样式：伪类hover，颜色color，字大小font-size，背景颜色background-color，盒子宽度和高度width和height

3、设计具体步骤

第一步使用a标签把对应的字写上去

HTML
CSS
JavaScript
Vue
React

第二步查看效果发现默认为蓝色，和有下划线，且在同一行。这时候就需要使用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;
        }

总体代码如下

    
    
    
    


    
搜索热词
    HTML
    CSS
    JavaScript
    Vue
    React

4、遇到的问题

第一个忘记了下划线如何删除；

第二个一开始想用div标签嵌套a标签，但发现div标签的话a标签的字体颜色就改变不了。a特殊不能继承，所以得再单独设置。比较麻烦所以干脆直接用a标签；