web作业

最新推荐文章于 2024-06-02 21:27:33 发布

暮白.

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量37

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2201_75585337/article/details/131915336

版权

案例（小米布局）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

padding: 0;

margin: 0;

}

.goods {

display: flex;

width: 1240px;

height: 600px;

border: 2px solid black;

margin: 0 auto;

}

.left {

width: 300px;

height: 600px;

background-color: pink;

}

.right ul {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-content: space-between;

width: 990px;

height: 600px;

}

ul li {

list-style: none;

width: 230px;

height: 275px;

background-color: aquamarine;

}

</style>

</head>

<body>

<ul>

<li>

< img src="#" alt="">

</a >

</li>

<li>

< img src="#" alt="">

</a >

</li>

<li>

< img src="#" alt="">

</a >

</li>

<li>

< img src="#" alt="">

</a >

</li>

<li>

< img src="#" alt="">

</a >

</li>

<li>

< img src="#" alt="">

</a >

</li>

<li>

< img src="#" alt="">

</a >

</li>

<li>

< img src="#" alt="">

</a >

</li>

</ul>

</div>

</body>

</html>

案例（小米页面）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

box-sizing: border-box;

}

li{

list-style: none;

}

text-decoration: none;

}

input{

outline: none;

}

.goods{

width: 1226px;

margin:0 auto;

}

.goods{

display: flex;

justify-content: space-between;

align-items: center;

}

.head.right{

position: relative;

}

.head .right input{

width: 245px;

height: 40px;

border: 1px solid #757575;

border-radius: 5px;

}

.head pic span{

display: inline-block;

width: 52px;

height: 40px;

line-height: 40px;

position: absolute;

right: 0;

}

.a{

position: absolute;

top: 50%;

margin-top: -33,5px;

right: 1000px;

}

.b{

position: absolute;

top: 50%;

margin-top: -33,5px;

right: 0;

}

.pic .circle span{

display: inline-block;

width: 10px;

height: 10px;

background-color:rgb(61, 45, 45);

border-radius: 50%;

}

.pic{

position:relative;

width:400px;

height:413px;

background-color:rgb(51, 51, 117);

display:inline-block;

}

.goods{

position: relative;

margin-top: 20px;

}

.left{

position: absolute;

top: 0;

left: 200px;

}

   .left ul{
            background-color: white;
            width: 234px;
            height: 413px;
            font: 18px/1.5 Helvetice Neue,Helvetice,Arical;
            padding: 20px 0px;
        }
        .left ul li {
            display: flex;
            justify-content: space-between;
            padding: 0px 30px;
        }
        .left ul li a{
            display: inline-block;
            width: 234px;
            height: 42px;
            line-height: 42px;
            color: aliceblue;
        }
        .left ul li:hover{
            background-color: orange;
        }
    </style>
</head>

<body>

</div>

<ul>

</ul>

</div>

</div>

</body>

</html>

小米商品

<!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>
        .goods{
            width: 200px;
            height: 300px;
            background-color: aqua;
            text-align: center;
        }
        .goods img{
            width: 160px;
            height: 160px;
        }
        .goods h6{
            font: 14px;
        }
        .goods span:nth-child(1){
            font:12px;
            color: aliceblue;
        }
        .goods ul span:nth-child(2){
            font: 12px;
            color: orange;
            text-decoration:line-through;
        }
    </style>
</head>
<body>
    <div class="goods">
        < img src="./202212261427_48f2842720deb0f7cbb9170b801adab4.png" alt="">
        <h6>redmi k60 8+256</h6>
        <ul>
        <span>2099元</span>
        <span>2599元</span>
        </ul>
    </div>
</body>
</html>