前端练习2

最新推荐文章于 2024-09-23 16:36:59 发布

zyp246810

最新推荐文章于 2024-09-23 16:36:59 发布

阅读量42

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zyp246810/article/details/131885199

版权

案列一

源码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="./外部样式.css">
</head>

<body>
    <a href="#" class="a1">五彩导航
        <div class="box"></div>
    </a>
    <a href="#" class="a2">五彩导航
        <div class="box"></div>

    </a>
    <a href="#" class="a3">五彩导航
        <div class="box"></div>
    </a>
    <a href="#" class="a4">五彩导航
        <div class="box"></div>
    </a>

</body>

</html>

源码2：

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

.a1 {
    position: relative;
    background-image: url(./images/bg1.png);
}

.a2 {
    position: relative;
    background-image: url(./images/bg2.png);
}

.a3 {
     position: relative; 
    background-image: url(./images/bg3.png);
}

.a4 {
    position: relative;
    background-image: url(./images/bg4.png);
}

.a1:hover {
    background-image: url(./images/bg5.png);
}

.a2:hover {
    background-image: url(./images/bg6.png);
}

.a3:hover {
    background-image: url(./images/bg7.png);

}

.a4:hover {
    background-image: url(./images/bg8.png);
}

.a1:hover .box {
    display: block;
}
.a2:hover .box {
    display: block;
}
.a3:hover .box {
    display: block;
}

.a4:hover .box {
   display: block;
}

.box {
    display: none;
    position: absolute;
    bottom: -120px;
    width: 120px;
    height: 120px;
    background-color: pink;
}

结果：
在这里插入图片描述

案列二

源码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=<<>, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./外部样式1.css">
</head>
<body>
    <a href="https://www.mi.com/shop/buy/detail?product_id=18542">
    <div class="box">
    
   <img  height="160" width="160"src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1685341960.77391955.png" alt="" >
   <div class="a">Redmi Note 12T pro</div><br>
   <div class="b">年度LCD屏幕之光</div><br>
  <span class="c ">1499元起 &nbsp;</span>
  <span class="d ">1599元</span>
  
</div></a>
</body>
</html>

源码2：

a {
    text-decoration: none;
    border-color: aliceblue;
    display: inline-block;
}
a :hover {
  border-style: dotted;
  border-color: antiquewhite;
}
.box {
    background-color: aliceblue;
    width: 234px;
    height: 300px;
    text-align: center;
    font-size: 14px;
    color: black;
}
 .b {
     font-size: 12px;
     color:darkgray;
 }
 .c {
     color: coral;
 }
 .d {
     text-decoration-line: line-through;
     color: darkgray;
 }

源码2：

a {
    text-decoration: none;
    border-color: aliceblue;
    display: inline-block;
}
a :hover {
  border-style: dotted;
  border-color: antiquewhite;
}
.box {
    background-color: aliceblue;
    width: 234px;
    height: 300px;
    text-align: center;
    font-size: 14px;
    color: black;
}
 .b {
     font-size: 12px;
     color:darkgray;
 }
 .c {
     color: coral;
 }
 .d {
     text-decoration-line: line-through;
     color: darkgray;
 }

在这里插入图片描述

案列三

源码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>
    <link rel="stylesheet" href="./作业4-1.css">
</head>
<body>
    
        <div class="box">
            <div class="left"></div>
            <div class="right">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    
</body>
</html>

源码2：

.box {
    width: 1160px;
    height: 515px;
    margin: 10px auto;
}

.left {
    float:left;
    width: 300px;
    height: 515px;
    background-color: skyblue;
}

.right {
    float:left;
    width: 860px;
    height: 515px;
    background-color:#f5f5f5;
}

.right>div {
    width: 200px;
    height: 250px;
    background-color:#eeeddd;
    float:left;
    margin: 0 0 15px 15px;
}

在这里插入图片描述

案列四

源码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="./小米.css">
</head>
<body>
    <div class="header">
        <div class="container head">
            <div class="left"><img src="https://img0.baidu.com/it/u=2207473325,1020712233&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1690390800&t=8ac8bcd5216308dcae2654457a140ea9" alt=""></div>
            <div class="mid">
                <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="right">
                <input type="text">
                <span>搜索</span>
            </div>
        </div>
    </div>
    <div class="banner container">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4654880fb3266820ac4f82edeee4d80.jpg?thumb=1&w=1533&h=575&f=webp&q=90" alt="">
         <div class="nav">
            <ul>
                <li>
                    <a href="#">手机</a>
                    <span></span>
                </li>
                <li>
                    <a href="#">
                        电视
                    </a>
                    <span></span>
                </li>
                <li>
                    <a href="#">
                        家电
                    </a>
                    <span></span>
                </li>
                <li>
                    <a href="#">
                        笔记本 平板
                    </a>
                    <span></span>
                </li>
                <li>
                    <a href="#">
                        出行 穿戴
                    </a>
                    <span></span>
                </li>
                <li>
                    <a href="#">
                        耳机 音箱
                    </a>
                    <span></span>
                </li>
                <li>
                    <a href="#">
                        健康 儿童
                    </a>
                    <span></span>
                </li>
                <li>
                    <a href="#">
                        生活 箱包
                    </a>
                    <span></span>
                </li>
                <li>
                    <a href="#">
                        智能 路由器
                    </a>
                    <span></span>
                </li>
                <li>
                    <a href="#">
                        电源 配件
                    </a>
                    <span></span>
                </li>
                  </ul>
         </div>
         <div class="circle">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
         </div>
    </div>
</body>
</html>

源码2：


        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        input{
            outline: none;
        }
        .container{
            width: 1226px;
            margin:0 auto;
        }
        .header .left img{
            width: 56px;
            height: 56px;
        }
        .head{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .head .mid ul{
            display: flex;
        }
        .head .mid ul li{
            margin-right: 30px;
        }
        .head .mid ul a{
            color: #757575;
        }
        .head .mid ul a:hover{
            color:orange;
        }
        .head .right{
            position: relative;
        }
        .head .right input{
            width: 245px;
            height: 40px;
            border: 1px solid #757575;
            border-radius: 5px;
        } 
        .head .right span{
            display: inline-block;
            width: 52px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            right: 0;
        }
        .banner .circle span{
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: pink;
            border-radius: 50%;
        }
        .banner{
            position: relative;
            margin-top: 20px;
        }
        .nav{
            position: absolute;
            top: 0;
            left: 0;
        }
        .nav ul{
            background-color: #343333;
            width: 234px;
            height: 460px;
            font: 18px/1.5 Helvetice Neue,Helvetice,Arical;
            padding: 20px 0px;
        }
        .nav ul li {
            display: flex;
            justify-content: space-between;
            padding: 0px 30px;
        }
        .nav ul li a{
            display: inline-block;
            width: 234px;
            height: 42px;
            line-height: 42px;
            color: aliceblue;
        }
        .nav ul li:hover{
            background-color: orange;
        }
        img {
            max-width: 100%;
        }

结果：
在这里插入图片描述