HTML导航栏如何垂直

 时间:2026-04-29 13:35:33

1、打开dw,建立一个新的html文档

HTML导航栏如何垂直

HTML导航栏如何垂直

2、在body标签输入

<ul>

    <li>主页</li>

    <li>日志</li>

    <li>联系</li>

    <li>关于我们</li>

</ul>

HTML导航栏如何垂直

3、然后去除小圆点,在style标签输入

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 200px;

    background-color: #f1f1f1;

}

HTML导航栏如何垂直

4、再输入

li a {

    display: block;

    color: #000;

    padding: 8px 16px;

    text-decoration: none;

}

HTML导航栏如何垂直

5、最后输入

li a:hover {

    background-color: #555;

    color: white;

}

HTML导航栏如何垂直

6、按f12预览,可以看到导航栏已经垂直了

HTML导航栏如何垂直

  • 如何在HTML中插入图片
  • html页面单选框怎么实现
  • 网页设计HTML中如何插入背景图片
  • css如何把文字放在图片上
  • 怎样让html中的文字垂直水平居中显示
  • 热门搜索
    手抄报春节 爱祖国手抄报内容简短 禁毒防艾手抄报 绿色校园手抄报 青春手抄报 中国梦我的梦手抄报 重阳节手抄报简单又漂亮 劳动节手抄报简单好画 一二年级消防手抄报 中秋节手抄报简单漂亮