在家无聊呀！写了个小米手机页面～～～

最新推荐文章于 2022-07-01 00:56:51 发布

pandaHe_Status

最新推荐文章于 2022-07-01 00:56:51 发布

阅读量1.5k

点赞数 4

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_43321726/article/details/104822289

版权

前端专栏收录该内容

101 篇文章 2 订阅

订阅专栏

今天无意中看到小米手机，就做了个页面～～～希望你们喜欢！！！
在这里插入图片描述都写在一起了，没分css，图片要自己加上去喔！！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米手机界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f5f5f5;
        }
        
        .xiaomi {
            list-style: none;
            width: 1188.4px;
            height: 615px;
            background-color: #f5f5f5;
            margin: 100px auto;
        }
        
        div {
            float: left;
            margin-right: 38.6px;
        }
        
        .xiaomi li {
            list-style: none;
            float: left;
            height: 288.9px;
            margin-right: 38.6px;
            background-color: #ffff;
            margin-top: 0px;
            margin-bottom: 38.6px;
        }
        
        #buxuyao {
            margin-right: 0;
        }
        
        p {
            font-size: 14px;
            text-align: center;
        }
        
        h5 {
            text-align: center;
            font-size: 12px;
            color: gray;
            margin: 5px 0;
        }
        
        h4 {
            text-align: center;
            color: rgb(223, 32, 32);
            font-style: 12px;
        }
        
        h3 {
            font-weight: normal;
            font-size: 14px;
            margin: -20px 16px 0px 0px;
            text-align: right;
            text-decoration: line-through;
        }
        
        li:hover {
            box-shadow: 10px 15px 30px 2px red
        }
    </style>
</head>

<body>
    <div class="xiaomi">

        <div><img src="image/大长图.jpg" alt=""></div>
        <ul>

            <li><img src="image/1.jpg" alt="">
                <p>小米10</p>
                <h5>骁龙865/1亿像素相机</h5>
                <h4>3999元起</h4>

            </li>
            <li><img src="image/2.jpg" alt="">
                <p> Redmi K30</p>
                <h5>120Hz流速屏，全速热爱</h5>
                <h4>1599元起</h4>

            </li>
            <li><img src="image/3.jpg" alt="">
                <p> Redmi K30 5G</p>
                <h5>双模5G，120Hz流速屏</h5>
                <h4>1999元起</h4>

            </li>
            <li id="buxuyao"><img src="image/4.jpg" alt="">
                <p> 小米CC9 Pro</p>
                <h5>1亿像素 五摄四闪</h5>
                <h4>2599元起</h4>
                <h3>2789元</h3>
            </li>
            <li><img src="image/5.jpg" alt="">
                <p> Redmi 8</p>
                <h5>5000mAh超长续航</h5>
                <h4>699元起</h4>
                <h3>799元</h3>
            </li>
            <li><img src="image/6.jpg" alt="">
                <p> Redmi 8A</p>
                <h5>5000mAh超长续航</h5>
                <h4>599元起</h4>
                <h3>699元</h3>
            </li>
            <li><img src="image/7.jpg" alt="">
                <p>Redmi Note 8 </p>
                <h5>6400万全场景四摄</h5>
                <h4>1299元起</h4>
                <h3>1399元</h3>
            </li>
            <li id="buxuyao"><img src="image/8.jpg" alt="">
                <p>Redmi Note 8</p>
                <h5>千元4800万四摄</h5>
                <h4>899元起</h4>
                <h3>999元</h3>
            </li>
        </ul>
    </div>

</body>

</html>