竖直导航栏--css项目这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情。我正在参加码上掘

这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情。
我正在参加码上掘金体验活动，详情：show出你的创意代码块一起养成写作习惯！

心中有江山的人岂能快意潇洒今天的内容是竖直导航栏，使用的html和css.

项目展示

所用技术

html：ul li无序列表
css:元素选择器，全局选择器，flex布局，transition渐变效果，cursor鼠标变形

代码展示

html

<html lang="en">
<head>
    <!-- 代码规则 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="table">
        <!-- 无序列表画出想要的图案 -->
        <ul>
            <li class="item">❤</li>
            <li class="item">❀</li>
            <li class="item">△</li>
            <li class="item">○</li>
            <li class="item">□</li>
        </ul>

    </div>
</body>
</html>

css

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: aquamarine;
    min-height: 100vh;
    /* flex布局 */
    display: flex;
    /* 水平+垂直居中 */
    justify-content: center;
    align-items: center;
    transition : background-color 1s;
}
.table{
    background-color: white;
    border-radius: 10px;

}
/* 取消ul外的· */
.tabble ul{
    list-style: none;
   
}
.tabble ul li{
   position: relative;
   width: 50px;
   height:50px;
   border-radius: 60%;
   /* 让图形水平居中对齐 */
   display: flex;
   justify-content: center;
   align-items: center;
    transition: 1s;
    cursor: crosshair;

}

代码分析

首先，先使用无序列表画出几个图标，然后使用css样式对图标进行一定的排列。
css样式中，首先先清除浏览器的样式，其次，对背景做出设置这里使用的是flex布局。之后对无序列表中的元素进行设计，让每一个小图标都可以按照合适的样式排列，在这里使其都进行居中的排列，排列完成之后就出现了想要的样式。后续可以让鼠标点击一个图案，后面的背景也跟着进行变化。