【web作业】

原创已于 2023-07-11 08:48:58 修改 · 100 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2023-07-11 00:43:34 首次发布

此代码示例展示了使用HTML和CSS创建的五彩导航条，包含不同状态下的背景图切换效果。同时，还呈现了类似小米官网的布局结构，包括品牌图标、产品分类、搜索框以及页面背景图像。布局考虑了设备宽度适应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            display: inline-block;
            text-decoration: none;
            width: 120px;
            height: 58px;
            text-align: center;
            line-height: 54px;
            color: #3f3f3f;
        }

        .one {
            background-image: url(../images/bg1.png);
        }

        .two {
            background-image: url(../images/bg2.png);
        }

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

        .three img {
            display: none;
            position: absolute;
            bottom: -130px;
            left: 0;

        }

        .four {
            background-image: url(../images/bg4.png);
        }

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

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

        .three:hover {
            background-image: url(../images/bg7.png);
            color: white;
        }

        .three:hover img {
            display: block;
        }

        .four:hover {
            background-image: url(../images/bg8.png);
            color: white;
        }
    </style>

</head>

<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">
        五彩导航
        <img src="../images/code.jpg" alt="">
    </a>
    <a href="#" class="four">五彩导航</a>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>小米</title>
</head>
<body>
  <style>
  *{
    margin: 0px;
    padding: 0px;
    
  }
  li{
    list-style: none;
 
  }
  img{
    vertical-align: top;
    border: none;
  }
  a{
    text-decoration: none;
    color: #131212;
  }
  </style>
  <div class="grandf" >
    <div class="father">
    <span> <img src="小米图标.png" width="50px" height="50px"></span>
     
        <div class="fathers"><a href="#">小米手机&nbsp; Redmid手机 &nbsp; 电视&nbsp; 笔记本&nbsp; 平板&nbsp; 家电&nbsp; 路由器&nbsp; 服务中心&nbsp; 社区</a></div>
        <input value="搜索" maxlength="200">
      <div class="son">
        <br/>
        <div class="left">
           <a href="#"><ul >
                <li>手机</li>
                <li>电脑</li>
                <li>家电</li>
                <li>pad</li>
                <li>出行</li>
                <li>耳机</li>
                <li>健康</li>
                <li>生活</li>
                <li>智能</li>
              </ul></a>
        </div>
        <div class="right">
<img src="../练习/小米.jpeg" width="800px" height="500px">
        </div>
      </div>
      </div>
      </div>
  <style>
    .grandf{
      position: relative;
      width: 1500px;
      height: 1000px;
      display: flex;
      margin: auto;
      background-color: white;
    }
    .father{
      display: inline-block;
      position: absolute;
      width: 1000px;
      height: 100px;
      background-color: aliceblue;
    }
    .fathers{
      background-color: beige;
      height: 10px;
      width: 655px;
      position: absolute;
      display:inline-block;
      font-size: 20px;
      right: 275px;
      bottom: 75px;
      justify-content: space-between;
      justify-content: space-around;
 
    }
    
 .left{
   display: flex;
  background-color:rgb(226, 224, 224);
  width: 200px;
  height: 500px;
  
}
 .right{
   display: flex;
background-color: aquamarine;
width: 800px;
height: 500px;
}
.son{
  display: flex;
}
.left ul {
  text-decoration: none;
  position: absolute;
  font-size: 40px;
  left: 20px;
  
}
.father input{
  display: inline-block;
width: 250px;
height: 30px;
position: absolute;
bottom: 55px;
right: 0px;
}
ul li::after{
color:black;
content: "          >";
 
}
.son ul{
  text-align: left;
  
}
 
  </style>
</body>
</html>