前端那些事之仿京东边框

HTML project
tech
Publish Date:   2025-02-10
Update Date:   2025-02-10
Word Count:   383
Read Times:   1 Min
Read Count:   
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东边框</title>
    <style>
        /* 设置页面整体字体 */
        body {
            font-family: Arial, sans-serif;
        }
        /* 定义无序列表样式，移除默认样式并设置宽度和边框 */
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 212px;
            border: 1px solid #000;
        }
        /* 定义列表项样式，包括背景色、文字颜色、字体大小、居中对齐和鼠标悬停效果 */
        li {
            height: 30px;
            line-height: 30px;
            background-color: #f00;
            color: #fff;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
        }
        /* 去除列表项中h3元素的默认外边距 */
        li h3 {
            margin: 0;
        }
        /* 定义顶部列表项的特殊样式，包括高度、行高和背景颜色 */
        #top {
            height: 45px;
            line-height: 45px;
            background-color: rgb(220, 44, 44);
        }
    </style>
</head>
<body>
    <!-- 导航栏，包含一个无序列表用于商品分类 -->
    <nav>
        <ul>
            <li id="top"><h3>全部商品分类</h3></li>
            <li>家用电器</li>
            <li>手机</li>
            <li>电脑办公</li>
            <li>美妆个护</li>
            <li>服饰鞋包</li>
            <li>母婴玩具</li>
            <li>图书音像</li>
            <li>男装女装</li>
            <li>内衣配饰</li>
            <li>汽车用品</li>
        </ul>
    </nav>
</body>
</html>

Author: T1g3r
Link: https://njuptstudent.github.io/2025/02/10/%E5%89%8D%E7%AB%AF%E9%82%A3%E4%BA%9B%E4%BA%8B%E4%B9%8B%E4%BB%BF%E4%BA%AC%E4%B8%9C%E8%BE%B9%E6%A1%86/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source T1g3r !
HTML project
赏
评论
  TOC