<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>导航栏</title><link rel="stylesheet" href="test2.css" type="text/css"></head><body><ul class="nav"><li class="list-item"><a href="#">天猫</a></li><li class="list-item"><a href="#">聚划算</a></li><li class="list-item"><a href="#">京东超市</a></li></ul></body></html>
*{/*初始化整个界面的外边距和内边距以及字体颜色和字体*/margin: 0;padding: 0;color: #424242;font-family: arial;}.nav{/*取消导航栏的圆点*/list-style: none;}.nav .list-item{/*设置左浮动 左右外边距控制10px 高度30px 行高30px(文字居中)*/float: left;margin: 0 10px;height: 30px;line-height: 30px;}.nav::after{/*利用伪元素清除浮动流*/content: "";display: block;clear: both;}a{/*超链接取消下划线*/text-decoration: none;}.nav .list-item a{/*超链接内容文字颜色 加粗 使超链接内容填充满容器 设置左右内边距 圆角15px*/color: #f40;font-weight: bold;height: 30px;display: inline-block;padding: 0 5px;border-radius: 15px;}.nav .list-item a:hover{/*伪类选择器控制鼠标进入a标签控制区域时背景颜色和字体颜色进行反转*/background-color: #f40;color: #fff;}
![[2024年]平凡的树叶作文700字](https://700zi.400zi.cn/uploadfile/img/2024/05/31/d809809ecd166bbb831e25a63f33bdf9.jpg)
