小米导航栏制作

最新推荐文章于 2023-07-15 00:20:55 发布

z_family

最新推荐文章于 2023-07-15 00:20:55 发布

阅读量693

点赞数 1

本文链接：https://blog.csdn.net/z_family/article/details/118905934

版权

本文介绍了如何制作小米风格的导航栏，通过HTML和CSS实现。左侧导航利用ul标签构建，右侧部分则采用span标签，下半部分计划通过绝对定位来完成布局。

摘要由CSDN通过智能技术生成

成品

代码部分

html

<!DOCTYPE html>
<html lang="ch-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport">
    <title>xiaomi</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="h">
        <div class="nva">
            <div class="left_nva">
                <ul>
                    <li><a href="#">小米商城</a></li>
                    <li class="em">|</li>
                    <li><a href="#">MIUI</a></li>
                    <

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

z_family

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
小米导航栏制作

成品代码部分html<!DOCTYPE html><html lang="ch-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"> <title>xiaomi</title> &lt
复制链接

扫一扫