web开发 大学生的课堂作业

要求：
1，在Hbuilder中(其他编辑器也可以)建立名字为showP的项目，模板为基本的html模板，参照移动商城导航设计部分，给定图片，完成如下商品展示界面设计
2，要求设置视口
3，提交HTML源文件和移动端的png截图文件

img

img

主要需要用到border/text-deraction/color等css属性。

flex 布局 就行 ul,li

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .shopList {
            display: flex;
            flex-wrap: wrap;
        }

        .shopItem {
            width: 23%;
            list-style: none;
            border: 1px solid red;
            margin: 0 10px;
        }

        .shopItem img {
           width: 100%;
        }
        .info .name{
            text-align: center;
            width: 100%;
        }
        .info .price{
            text-align: center;
            width: 100%;
            text-decoration:line-through ;
        }
    </style>
</head>

<body>
    <div>
        <ul class="shopList">
            <li class="shopItem">
                <img src="https://img0.baidu.com/it/u=850067229,4072326780&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
                    alt="">
                <div class="info">
                    <div class="name">施华洛世奇水晶项链</div>
                    <div class="price">125</div>
                </div>
            </li>
            <li class="shopItem">
                <img src="https://img0.baidu.com/it/u=850067229,4072326780&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
                    alt="">
                <div class="info">
                    <div class="name">施华洛世奇水晶项链</div>
                    <div class="price">125</div>
                </div>
            </li>
            <li class="shopItem">
                <img src="https://img0.baidu.com/it/u=850067229,4072326780&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
                    alt="">
                <div class="info">
                    <div class="name">施华洛世奇水晶项链</div>
                    <div class="price">125</div>
                </div>
            </li>
            <li class="shopItem">
                <img src="https://img0.baidu.com/it/u=850067229,4072326780&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
                    alt="">
                <div class="info">
                    <div class="name">施华洛世奇水晶项链</div>
                    <div class="price">125</div>
                </div>
            </li>
            <li class="shopItem">
                <img src="https://img0.baidu.com/it/u=850067229,4072326780&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
                    alt="">
                <div class="info">
                    <div class="name">施华洛世奇水晶项链</div>
                    <div class="price">125</div>
                </div>
            </li>
            <li class="shopItem">
                <img src="https://img0.baidu.com/it/u=850067229,4072326780&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
                    alt="">
                <div class="info">
                    <div class="name">施华洛世奇水晶项链</div>
                    <div class="price">125</div>
                </div>
            </li>
            <li class="shopItem">
                <img src="https://img0.baidu.com/it/u=850067229,4072326780&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
                    alt="">
                <div class="info">
                    <div class="name">施华洛世奇水晶项链</div>
                    <div class="price">125</div>
                </div>
            </li>
            <li class="shopItem">
                <img src="https://img0.baidu.com/it/u=850067229,4072326780&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
                    alt="">
                <div class="info">
                    <div class="name">施华洛世奇水晶项链</div>
                    <div class="price">125</div>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>