十天学会HTML+CSS(第四天)：超链接

今天的内容很简单（文末有视频教程），用a标签做这样一个超链接按钮。

一、认识a标签的基本结构

在carousel-right盒子里加一个a标签。a标签中间的文本内容会显示到网页上，href=""这部分是固定写法，引号里写想要跳转的网址。

        <div class="carousel-right">
            <a href="https://www.mi.com/shop">小米商城</a>
        </div>

二、开始制作按钮

给它加个类名class="super"开始写样式，有三点需要注意

1、a标签是内联元素，要加display: block;变成块级元素，要不然宽高不起作用。

2、让行高line-height: 50px;跟高度height: 50px;数值一样，这是常用的文字垂直居中方法；text-align: center;文字水平居中最常用写法。

3、text-decoration: none;去除下划线，固定写法，基本必写。

.super{
    width: 170px;
    height: 50px;
    background-color: orange;
    color: #fff;
    /* 变成块级元素 */
    display: block;
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
        line-height: 50px;
    /* 去掉下划线 */
    text-decoration: none;
}

三、伪类

今天额外增加一个有趣的知识，让鼠标移动到按钮上时，背景和文字颜色互换。用hover实现，这也是伪类中比较常用的一个，写法是类名后紧跟:hover。

.super:hover{
    background-color: #fff;
    color: orange;
}

四、视频教程