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

来源：互联网发布：淘宝仓管编辑：程序博客网时间：2024/04/30 21:47

代码：

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

需要用到的背景图片：

运行结果：

阅读全文

0 0

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

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