练习十五-电商商品界面案例

最新推荐文章于 2024-07-21 23:49:38 发布

敦煌璧画

最新推荐文章于 2024-07-21 23:49:38 发布

阅读量116

点赞数

文章标签：前端 html5 css

本文链接：https://blog.csdn.net/m0_58200396/article/details/124091395

版权

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">

<head>
    <title></title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box1{
            width:200px;
            height:650px;
            border:1px solid rgb(161, 3, 3);
            margin: 0 auto;
        }
        .box1>.box2{
            width:200px;
            height:40px;
            background-color: rgb(161, 3, 3);
            margin: 0 auto;
            font-size: 16px;
            color:rgb(255, 255, 255);
            text-align: center;
            line-height: 40px;
        }
        dt{
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 14px;
            text-indent:28px;
        }
        dd{
            font-size: 12px;
            float: left;
            margin-right: 5px;
            margin-bottom: 14px;
            
           
        }
        dl{
            margin: 20px;
          
        }
        .box3{
            width: 200px;
            height:130px;
            border-bottom: 1px dotted rgb(129, 127, 127);
          
        }
        .box4{
            width: 200px;
            height:130px;
            border-bottom: 1px dotted rgb(129, 127, 127);
          
        }
        .box5{
            width: 200px;
            height:130px;
            border-bottom: 1px dotted rgb(129, 127, 127);
          
        }
        .box6{
            width: 200px;
            height:70px;
            border-bottom: 1px dotted rgb(129, 127, 127);
          
        }
        a{
            text-decoration: none;
            color: rgb(102, 102, 102);
        }
        a:hover{
            text-decoration: underline;
            color: rgb(161, 3, 3);
        }
        .a1{
            color: rgb(161, 3, 3);
        }
        
        
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">全部商品</div>
        <div class="box3">
            <dl>
                <dt>产口系列</dt>
                <dd><a href="" class="a1">豆乳补水</a></dd>
                <dd><a href="">大米修复</a></dd>
                <dd><a href="">樱花褪黄</a></dd>
                <dd><a href="">小麦清润</a></dd>
                <dd><a href="">苹果籽-孕纹护理</a></dd>
                <dd><a href="">洋甘菊-舒缓修复</a></dd>
                <dd><a href="">其他单品</a></dd>
            </dl>
        </div>
        
        <div class="box4">
            <dl>
                <dt>产口功效</dt>
                <dd><a href="" class="a1">豆乳补水</a></dd>
                <dd><a href="">大米修复</a></dd>
                <dd><a href="" class="a1">樱花褪黄</a></dd>
                <dd><a href="">小麦清润</a></dd>
                <dd><a href="">苹果籽-孕纹护理</a></dd>
                <dd><a href="">洋甘菊-舒缓修复</a></dd>
                <dd><a href="">其他单品</a></dd>
            </dl>
        </div>
        <div class="box5">
            <dl>
                <dt>面部护理</dt>
                <dd><a href="" class="a1">豆乳补水</a></dd>
                <dd><a href="">大米修复</a></dd>
                <dd><a href="">樱花褪黄</a></dd>
                <dd><a href="">小麦清润</a></dd>
                <dd><a href="" class="a1">苹果籽-孕纹护理</a></dd>
                <dd><a href="">洋甘菊-舒缓修复</a></dd>
                <dd><a href="">其他单品</a></dd>
            </dl>
        </div>
        <div class="box6">
            <dl>
                <dt>身体护理步骤</dt>
                <dd><a href="">豆乳补水</a></dd>
                <dd><a href="">大米修复</a></dd>
                <dd><a href=""class="a1">樱花褪黄</a></dd>
            </dl>
        </div>
        </div>
        
    </div>
</body>

</html>

敦煌璧画

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习十五-电商商品界面案例

<!DOCTYPE html><html lang="en"><meta charset="utf-8"><meta name="keywords" content=""><meta name="description" content=""><head> <title></title> <style> *{ margin: 0;
复制链接

扫一扫