web第三天和第四天作业

全国素质模范

已于 2023-07-29 10:06:45 修改

阅读量68

点赞数

文章标签：前端

于 2023-07-25 20:51:25 首次发布

本文链接：https://blog.csdn.net/qq_44213575/article/details/131923805

版权

1.案例

<!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>
        body{
            background-color:#3333;
        }
    </style>
    <style>
        span{
            color:#FF6700;
        }
        </style>
        <style>
            p,s{
                color: #B0B0B0;
            }
        </style>
    <style>
        li{
            list-style-type: none;
        }
    </style>
    <style>
        ul li:first-child{
            text-align: center;
            width: 300px;
            height: 600px;
            margin-left: 170px;
            list-style-type: none;
        }
    </style>
    <style>
        
       ul li:nth-of-type(2){
            width: 300px;
            height: 300px;
            background-color: white;
            margin-top:-600px;
           margin-left: 500px;
            list-style-type: none;
            text-align: center
        }
    </style>
    <style>
        
        ul li:nth-of-type(3){
             width: 300px;
             height: 300px;
             background-color: white;
             margin-top:-300px;
            margin-left: 830px;
             list-style-type: none;
             text-align: center
         }
     </style>
     <style>
        
        ul li:nth-of-type(4){
             width: 300px;
             height: 300px;
             background-color: white;
             margin-top:-300px;
            margin-left: 1150px;
             list-style-type: none;
             text-align: center
         }
     </style>
     <style>
        
        ul li:nth-of-type(5){
             width: 300px;
             height: 300px;
             background-color: white;
             margin-top:-300px;
            margin-left: 1470px;
             list-style-type: none;
             text-align: center
         }
     </style>
     <style>
        
        ul li:nth-of-type(6){
             width: 300px;
             height: 300px;
             background-color: white;
             margin-top:20px;
            margin-left: 500px;
             list-style-type: none;
             text-align: center
         }
     </style>
     <style>
        
        ul li:nth-of-type(7){
             width: 300px;
             height: 300px;
             background-color: white;
             margin-top:-300px;
            margin-left: 830px;
             list-style-type: none;
             text-align: center
         }
     </style>
     <style>
        
        ul li:nth-of-type(8){
             width: 300px;
             height: 300px;
             background-color: white;
             margin-top:-300px;
            margin-left: 1150px;
             list-style-type: none;
             text-align: center
         }
     </style>
     <style>
        
        ul li:nth-of-type(9){
             width: 300px;
             height: 300px;
             background-color: white;
             margin-top:-300px;
            margin-left: 1470px;
             list-style-type: none;
             text-align: center
         }
     </style>
</head>
<body>
    <form action="#1">
        <ul>
            <li>
                <img src="./images/1.jpg" width="300px" height="700px">
            </li>

            <li>
                <img src="./images/2.jpg" width="160px" height="160px">
                <h4>Redmi 12T Pro</h4>
                <p>年度LCD 屏幕之光</p>
                <span>1499元起 <s>1599元</s></span>
            </li>

            <li>
                <img src="./images/3.jpg" width="160px" height="160px">
                <h4>Xiaomi Civi 3</h4>
                <p>放生双眸 天生出色</p>
                <span>2499元起</span>
            </li>

            <li>
                <img src="./images/4.jpg" width="160px" height="160px">
                <h4>Xiaomi 13 Ultra</h4>
                <p>徕卡光学全焦段四摄|一英寸可变光圈</p>
                <span>5999元起</span>
            </li>

            <li>
                <img src="./images/5.jpg" width="160px" height="160px">
                <h4>Redmi Note12 Turbo</h4>
                <p>狂暴引擎 超强性能释放</p>
                <span>1699元起 <s>1899元</s></span>
            </li>

            <li>
                <img src="./images/6.jpg" width="160px" height="160px">
                <h4>Redmi K60</h4>
                <p>骁龙8+｜2K 高光直屏｜5500mAh+67...</p>
                <span>2099元起 <s>2499元</s></span>
            </li>

            
            <li>
                <img src="./images/7.jpg" width="160px" height="160px">
                <h4>Redmi K60 Pro</h4>
                <p>【第二代骁龙8+】狂暴引擎</p>
                <span>2599元起 <s>3299元</s></span>
            </li>

            <li>
                <img src="./images/8.jpg" width="160px" height="160px">
                <h4>Redmi Note12 Pro 极速版</h4>
                <p>高通骁龙778G OLED柔性直屏+一亿...</p>
                <span>1599元起 <s>1699元</s></span>
            </li>
            <li>
                <img src="./images/9.jpg" width="160px" height="160px">
                <h4>Xiaomi 13 限量定制色</h4>
                <p>全新第二代骁龙8|徕卡专业光学镜头...</p>
                <span>4999元起 </span>
            </li>
        </ul>
    </form>
</body>
</html>

2.布局

<!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>
    <script src="./新建文件夹/1.png"></script>
    <style>
        .liebiao{
            display: flex;
        }
        .hang{
            height: 460px;
            width: 234px;
            background-color: rgb(162, 160, 154);
            padding: 30px 10px 30px 30px;
        }
        .hang li{
            width: 210px;
            height: 50px;
        }
        .hang a{
            color: white;
        }
        .liebiao img{
            position: relative;
            bottom: -6PX;

        }
        .img{
            position: relative;
            display: flex;
            width: 1100px;
            height: 500px;
            margin-top: 10px;
        }
    </style>
    <style>
        li{
         list-style: none;   
        }
     </style>
    <style>
        .shang{
            display: flex;
            width: 1000px;
            height: 50px;
            margin-top: -600px;
            margin-left: 250px;
        }
        .biao{
            width: 500px;
        }
        .biao a{
            color: black;
        }
        ul li{
            width: auto;
            display: inline-block
        }
        a{
            text-decoration: none;
            color: white;
        }
        .sou{
            position: relative;
            bottom: -15px;
            width: 300px;
            height: 50px;
        }
    </style>
    <style>
        .ss{
            margin-left: 900px;
            margin-top: -32px;
        }
    </style>
</head>
<body>
    <form action="#">
        <div class="logo"><img class="logo" src="./images/mi/logo.jpg" width="56px" height="56px"></div>
        <div class="liebiao">
            <ul class="hang">
                <li><a href="#">手机</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">笔记本 平板</a></li>
                <li><a href="#">出行 穿戴</a></li>
                <li><a href="#">耳机 音响</a></li>
                <li><a href="#">健康 儿童</a></li>
                <li><a href="#">生活 箱包</a></li>
                <li><a href="#">智能 路由器</a></li>
                <li><a href="#">电源 配件</a></li>
            </ul>
            <div class="img">
                <img src="./新建文件夹/mi.png" width="890px" height="520px">
            </div>
        </div>
        <div class="shang">
            <ul class="biao">
                <li><a href="#">Xiaomi手机</a></li>
                <li><a href="#">Redmi手机</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">平板</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">服务中心</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
        <div class="ss">
            <input type="text" name="sou" value="搜索" width="245px" height="50px">
            <input type="button" value="搜索" src="">
        </div> 
    </form>
</body>
</html>