CSS制作商品列表欢迎来到贵美商城

最新推荐文章于 2024-04-21 11:00:35 发布

xuehyunyu

最新推荐文章于 2024-04-21 11:00:35 发布

阅读量4.3k

点赞数

文章标签： CSS 浮动 float 商品列表 html

本文链接：https://blog.csdn.net/xuehyunyu/article/details/72773994

版权

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            text-decoration: underline;
            letter-spacing: 10px;/*每一个字体的左边距*/
        }
        div{
            width: 199px;
            background-image: url("../../img/bg.gif");
            height: 325px;
        }
        h4{
            color: orange;
            padding-top: 35px;/*与边框上面的间距*/
            padding-left: 15px;
        }
        ul{
            list-style: none;
            padding: 0;
        }
        li{
            float: left;
            width: 66px;
            margin-bottom: 12px;
            text-align: center;
        }
    </style>
    <title>商品分类</title>
</head>
<body>

<p>欢迎来到贵美商城</p>
<div>
    <h4>家用电器</h4>
    <ul>
        <li>大家电</li>
        <li>洗衣机</li>
        <li>电冰箱</li>
        <li>相机</li>
        <li>电视</li>
        <li>电脑</li>
        <li>DVD</li>
        <li>电视</li>
        <li>电脑</li>
    </ul>
    <h4>家用电器</h4>
    <ul>
        <li>大家电</li>
        <li>洗衣机</li>
        <li>电冰箱</li>
        <li>相机</li>
        <li>电视</li>
        <li>电脑</li>
        <li>电视</li>
        <li>电脑</li>
        <li>DVD</li>
    </ul>

</div>

</body>
</html>

需要用到的背景图片：

运行结果：

xuehyunyu

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
CSS制作商品列表欢迎来到贵美商城

代码： p{ text-decoration: underline; letter-spacing: 10px;/*每一个字体的左边距*/ } div{ width: 199px; background-image: url("
复制链接

扫一扫