spokes
spokes

web前端学习——纵向导航栏（小米纵向导航栏效果）

web前端学习——小米纵向导航栏效果

最终效果：鼠标悬停，背景变色
web前端学习——纵向导航栏（小米纵向导航栏效果）_第1张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
<style>
        /* 一、把a转换为块级元素 */
        a {
            /* 把a转换为块级元素 */
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 16px;
            color: #ffffff;
            /* 去掉下划线 */
            text-decoration: none; 
            /* 文字首行缩进两个字  */
            text-indent: 2em;
            /* 单行文字垂直居中，盒子的高等于行高 */
            line-height: 40px;
        }
        /* 二、鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: #ff6700;
        }

style>
head>
<body>
    <a href="#">手机 电话卡a>
    <a href="#">电视 盒子a>
    <a href="#">笔记本 平板a>
    <a href="#">出行 穿戴a>
    <a href="#">智能 路由器a>
    <a href="#">健康 儿童a>
    <a href="#">耳机 音响a>
body>
html>

你可能感兴趣的:(web前端)