一、导航列表效果
如上所示,这就是我要写的导航列表的样式
二、如何写导航列表
第一步,先写好HTML
<div>
<li><a href="">php开发</a></li>
<li><a href="">大前端</a></li>
<li><a href="">后端开发</a></li>
<li><a href="">数据库</a></li>
<li><a href="">移动端</a></li>
<li><a href="">运维开发</a></li>
<li><a href="">UI设计</a></li>
<li><a href="">计算机基础</a></li>
</div>
写好html之后再写好样式,
a{
text-decoration: none;
}
li::marker{
content: none;
}
div{
position: fixed; /*定位*/
top: 300px;
left: 10px;
display: flex; /*flex布局*/
place-content: space-around;/*上下布局*/
flex-direction: column; /* 布局方向*/
place-items: center; /*左右布局*/
border-radius: 20px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.1); /*盒子阴影*/
width: 160px;
height: 400px;
background-color: #fff;
}
</style>
三、最终代码
<!DOCTYPE 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>导航列表</title>
<style type="text/css">
a{
text-decoration: none;
}
li::marker{
content: none;
}
div{
position: fixed;
top: 300px;
left: 10px;
display: flex;
place-content: space-around;
flex-direction: column;
place-items: center;
border-radius: 20px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.1);;
width: 160px;
height: 400px;
background-color: #fff;
}
</style>
</head>
<body>
<div>
<li><a href="">php开发</a></li>
<li><a href="">大前端</a></li>
<li><a href="">后端开发</a></li>
<li><a href="">数据库</a></li>
<li><a href="">移动端</a></li>
<li><a href="">运维开发</a></li>
<li><a href="">UI设计</a></li>
<li><a href="">计算机基础</a></li>
</div>
</body>
</html>