前端实战：小实例1——导航栏

前端小实战

已于 2022-01-29 20:27:25 修改

阅读量3.2k

点赞数 5

分类专栏：小实例文章标签： html css

于 2020-05-24 22:14:09 首次发布

本文链接：https://blog.csdn.net/weixin_43328954/article/details/106320470

版权

前言

一个导航栏可看作一个列表，在 HTML 使用 ul 标签和 li 标签元素进行结构表示，在 CSS 中进行样式处理，对应标签元素的具体用法可查看 HTML常见标签介绍。

实现思路

使用 div 包装导航栏，用 ul 和 li 标签展示导航栏的基本模样
在 li 标签设置子导航栏 ul 和 li，将子导航栏初始设为不可见（display : none）
在 CSS 中设置伪类选择器，鼠标移入时子导航栏设为可见

HTML + CSS

index.html文件：

<!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">

最低0.47元/天解锁文章

前端小实战

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
前端实战：小实例1——导航栏

前言一个导航栏可看作一个链接列表，在 HTML 使用 ul 标签和 li 标签元素进行结构表示，在 CSS 中进行样式处理，对应标签元素的具体用法可查看 HTML常见标签介绍。实现思路 1. 使用 div 包装导航栏，用 ul 和 li 标签展示导航栏的基本模样 2. 在 li 标签设置子导航栏 ul 和 li，将子导航栏初始设为不可见（display : none） 3. 在 CSS 中设置伪类选择器，鼠标移入时子导航栏设为可见
复制链接

扫一扫