web作业

m0_74256660

已于 2023-07-25 20:17:10 修改

阅读量60

点赞数

文章标签：前端大作业

于 2023-07-23 22:49:41 首次发布

本文链接：https://blog.csdn.net/m0_74256660/article/details/131885913

版权

作业1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业1.css">
</head>
<body>
    <div class="box">
        <a href="#">
            <img src="./小米 2023-07-23 192502.png">
            <h3>Xiaomi Civi 3</h3>
            <p>仿生双眸&nbsp;天生双色</p>
            <div>2499元起</div>
        </a>
    </div>
</body>
</html>

.box {
    width: 300px;
    height: 400px;
    background-color: pink;
    text-align: center;
}
a {
    text-decoration: none;
}
h3 {
    color: black;
    font-size: 14px;
    font-weight: 400;
}

.box a p {
    font-size: 12px;
    color: #b0b0b0;
}
.box a div {
    font-size: 14px;
    color: orange;
}

作业2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业2.css">
</head>
<body>
    <a href="#"class="a1">五彩导航</a>
    <a href="#"class="a2">五彩导航</a>
    <a href="#"class="a3">
        五彩导航
        
         <div></div>
    </a>
    <a href="#"class="a4">五彩导航</a>

</body>
</html>

a {
    text-decoration: none;
    color: black;
    display: inline-block;
    width: 120px;
    height: 58px;
    background-color: aqua;
    text-align: center;
    line-height: 50px;
}

.a1 {
    background-image: url(./bg1.png);
}
.a2 {
    background-image: url(./bg2.png);
}
.a3 {
    background-image: url(./bg3.png);
}
.a4 {
    background-image: url(./bg4.png);
}

.a1:hover {
    background-image:url(./bg5.png) ;
}
.a2:hover {
    background-image:url(./bg6.png) ;
}
.a3:hover {
    background-image:url(./bg7.png) ;
}
.a4:hover {
    background-image:url(./bg8.png) ;
}

.a3:hover>div {
    position: absolute;
    width: 120px;
    height: 100px;
    top: 65px;
    background-color: pink;
}

作业3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业3.css">
</head>
<body>
    <div class="box1">
        <div class="box2">
            <a href="#"><img src="./左 2023-07-25 160921.png"></a>
        </div>
        <div class="box3">
            <ul>
                <li>
                    <a href="#">
                        <img src="./1 2023-07-25 160959.png">
                        <h3>Redmi Note 12T Pro</h3>
                        <p>年度&nbsp;LCD&nbsp;屏幕之光</p>
                        <div>1499元起<span>1599元</span></div>
                        
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./2 2023-07-25 161034.png">
                        <h3>Xiaomi Civi 3</h3>
                        <p>仿生双眸&nbsp;天生双色</p>
                        <div>2499元起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./3 2023-07-25 161104.png">
                        <h3>Xiaomi 13 Ultra</h3>
                        <p>徕卡光学全焦段四摄|一英寸可变光圈|...</p>
                        <div>5999元起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./4 2023-07-25 161115.png">
                        <h3>Redmi Note 12 Turbo</h3>
                        <p>狂暴引擎&nbsp;超强性能释放</p>
                        <div>1699元起<span>1899元</span></div>
                        
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./5 2023-07-25 161142.png">
                        <h3>Redmi K60</h3>
                        <p>骁龙8+&nbsp;|&nbsp;2K&nbsp;高光直屏&nbsp;|&nbsp;5500mAh+67...</p>
                        <div>2099元起<span>2499元</span></div>
                    
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./6 2023-07-25 161150.png">
                        <h3>Redmi K60 Pro</h3>
                        <p>【第二代骁龙8】&nbsp;狂暴引擎</p>
                        <div>2599元起<span>3299元</span></div>
                        
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./7 2023-07-25 161201.png">
                        <h3>Redmi Note 12 Pro</h3>
                        <p>高通骁龙778G，OLED柔性直屏+一亿...</p>
                        <div>15599元起<span>1699元</span></div>
                        
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./8 2023-07-25 161209.png">
                        <h3>Xiaomi 13 限量定制色</h3>
                        <p>全新第二代骁龙8&nbsp;|&nbsp;徕卡专业光学镜头</p>
                        <div>4999元起</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

* {
    padding: 0;
    margin: 0;
}
.box1 {
    display: flex;
    width: 1000px;
    height: 500px;
    border: 2px solid black;
    margin: 0 auto;
}
.box2 {
    width: 300px;
    height: 500px;
    background-color: pink;
}
.box3 ul {
    display: flex;
    flex-wrap: wrap;
    width: 700px;
    height: 500px;
    justify-content: space-between;
    align-content: space-between;
}
ul li {
    list-style: none;
    width: 150px;
    height: 200px;
    background-color: aquamarine;
    text-align: center;
}
a {
    text-decoration: none;
}
h3 {
    color: black;
    font-size: 14px;
    font-weight: 400;
}
.box3 a p {
    font-size: 12px;
    color: #b0b0b0;
}
.box3 a div {
    font-size: 14px;
    color: orange;
}
.box3 a div span {
    font-size: 14px;
    color: #b0b0b0;
    text-decoration: line-through;
}
.box2 img {
    width: 300px;
    height: 500px;
}
.box3 img {
    width: 150px;
    height: 130px;
}

作业4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业4.css">
</head>
<body>
    <div class="box">
        <div class="box1">
            <a href="#">
                <img src="./小米商城 2023-07-25 184256.png">
            </a>
        <div class="box3">
                <ul>
                    <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="box4">
            <form>
                <input type="search" name="keyword" id="search" placeholder="净水器">
                <input type="submit" name="as">
            </form>
        </div>
    </div>
    <div class="bin">
        <div class="bin1">
            <img src="./小米2 2023-07-25 171926.png">
        </div>
        <div class="bin2">
            <img src="./小米3 2023-07-25 171959.png">
            <div class="bin3">&lt;</div>
            <div class="bin4">&gt;</div>
        </div>
    </div>
</body>
</html>

* {
    padding: 0;
    margin: 0;
}
.box3 ul {
    display: flex;
    width: 700px;
    height: 100px;
    justify-content: space-between;
    align-content: space-between;
}
.box3 ul li {
    list-style: none;
    text-align: center;
    color: #000000;
}
.bin {
    display: flex;
    width: 800px;
    height: 400px;
    border: 2px solid black;
    margin: 0 auto;
}
.bin2 {
    position: relative;
}
.bin1 img {
    width: 100px;
    height: 400px;
}
.bin2 img {
    width: 700px;
    height: 400px;
}
.bin3 {
    position: absolute;
    border: 1px solid #000000;
    left: 0;
    top: 50%;
}
.bin4 {
    position: absolute;
    border: 1px solid #000000;
    right: 0;
    top: 50%;
}