css练习

最新推荐文章于 2021-10-23 18:19:54 发布

ztt0918

最新推荐文章于 2021-10-23 18:19:54 发布

阅读量460

点赞数

CC 4.0 BY-SA版权

分类专栏： css练习文章标签： css练习

本文链接：https://blog.youkuaiyun.com/ztt0918/article/details/70176175

css练习专栏收录该内容

2 篇文章

订阅专栏

这是一个展示贵美商城中家用电器分类的网页，通过简单的HTML和CSS布局实现了家电产品的分类显示，包括大家电如洗衣机、电冰箱等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            font-family: "宋体", sans-serif;
            letter-spacing: 15px;
            text-decoration: underline;
        }
        div {
            width: 199px;
            height: 326px;
            background-image: url("img/bg.gif");
            border-radius: 5px;
            overflow: hidden;
        }
        .title{
            margin-top: 35px;
            margin-left: 20px;
            color: #FF6500;
        }
        ul{
            padding: 0;
            margin: 0;
        }
        li{
            margin: 0px;
            padding: 0px;
            list-style: none;
            float: left;
            width: 66px;
            text-align: center;
            font-size: 13px;
            margin-bottom: 18px;
        }
    </style>
    <title>Title</title>
</head>
<body>
<p>
    欢迎来到贵美商城
</p>
<div>
    <h4 class="title">家用电器</h4>
    <ul>
        <li>大家电</li>
        <li>洗衣机</li>
        <li>电冰箱</li>
        <li>相机</li>
        <li>电视</li>
        <li>DVD</li>
        <li>相机</li>
        <li>电视</li>
        <li>DVD</li>
    </ul>
    <h4 class="title">家用电器</h4>
    <ul>
        <li>大家电</li>
        <li>洗衣机</li>
        <li>电冰箱</li>
        <li>相机</li>
        <li>电视</li>
        <li>DVD</li>
        <li>相机</li>
        <li>电视</li>
        <li>DVD</li>
    </ul>
</div>
</body>
</html>