web实验1

73560

已于 2023-04-22 19:36:16 修改

阅读量63

点赞数

文章标签：前端 css javascript

于 2023-04-22 19:36:14 首次发布

本文链接：https://blog.csdn.net/chengj73/article/details/130309139

版权

可考虑基于列表进行设计，居中显示
将列表转换为inline-block实现横向显示，每项高200px 宽216px，上、左内间距20px
上部字体大小18px，颜色#000，下部字体大小14px，颜色#64C333
所需图片见附件，图片宽度154px，左间距60px

<!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>
        .box{
            width: 3000px;
            margin: auto;
        }
        .box ul{
            width: 2500px;
            margin: auto;
        }
        .box ul li{
            display: inline-block;
            padding: 20px 0 0 20px;
            width: 216px;
            height: 200px;
            border: 4px solid #ccc;
            list-style: none;
            margin: 0 -4px 0 -4px;
        }
        .box ul li h4{
            margin: 0;
            font-style: 18px;
            color: #000;
            font-weight: 400;
        }
        .box ul li p{
            margin-top: 0px;
            margin-bottom: 0px;
            font-style: 14px;
            color: #64c333;
        }
        .box ul li img{
            width: 154px;
            height: 78%;
            margin: 0 0 0 60px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <h4>抱抱果新首发</h4>
                <p>抱一下就幸福</p>
                <img src="images/1.jpg" alt="">
            </li>
            <li>
                <h4>天猫冰箱节</h4>
                <p>智由随风</p>
                <img src="images/2.jpg" alt="">
            </li>
            <li>
                <h4>西门子全球精选</h4>
                
                <p>旗舰精品享你所想</p>
                <img src="images/3.jpg" alt="">
            </li>
            <li>
                <h4>进口葡萄酒专场</h4>
                <p>原瓶进口品质保证</p>
                <img src="images/4.jpg" alt="">
            </li>
            <li>
                <h4>手机专场</h4>
                <p>原装正品</p>
                <img src="images/5.jpg" alt="">
            </li>
        </ul>
    </div>
</body>
</html>

可考虑基于列表进行设计，居中显示
列表项高320px 宽250px，外间距10px，内间距10px，边框线1px solid #ccc
每项中第一行文字14px，颜色#666，文本行高度32px。其他行文字12px，颜色#66667F，文本行高度25px
“原创作品”加粗，颜色#FF5584
所需图片见附件，图片宽度250px，高度188px

<!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>
        .box{
            width: 2000px;
            margin: auto;
        }
        .box ul{
            width: 500px;
            margin: auto;
        }
        .box ul li{
            height: 320px;
            width: 250px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            list-style: none;
        }
        .box ul li img1{
            width: 250px;
            height: 188px; 
            margin-bottom: 0px;   
        }
        .box ul li img2{
            margin-top: 0px;
        }
        .box ul li h4{
            font-size: 14px;
            color: #666;
            line-height: 32px;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .box ul li h5{
            font-size:  12px;
            color: #66667F;
            line-height: 25px;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .box ul li h6{
            font-size:  12px;
            color: #66667F;
            line-height: 25px;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .box ul li h5 span{
            color: #FF5584;
            font-weight: 800;
 
        }
        .box ul li h6 span{
            color: #FF5584;
            font-weight: 400;
            }
    </style>   
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <img class="img1" src="images/pic1.jpg" alt="">
                <h4>动画便利店X果壳网《西门子洗碗机...</h4>
                <h5>
                    <span>原创作品</span>
                        -影视-Motion Graphic</h5>
                <h5>3小时前上传</h5>
                <h6>
                    <div>
                        <span>1569</span>&nbsp;人气/<span>50</span>&nbsp;评论/<span>125</span>&nbsp;推荐
                    <div>
                </h5>
                <img class="img2" src="images/play.png" alt="">
            </li>
            <li>
                <img class="img1" src="images/pic2.gif" alt="">
                <h4>动画便利店X视知《到底工资怎么发...</h4>
                <h5>
                    <span>原创作品</span>
                        -影视-Motion Graphic</h5>
                <h5>3小时前上传</h5>
                <h6>
                    <div>
                        <span>1569</span>&nbsp;人气/<span>50</span>&nbsp;评论/<span>125</span>&nbsp;推荐
                    <div>
                </h5>
                <img class="img2" src="images/play.png" alt="">
            </li>
              
        </ul>

    </div>
</body>
</html>