CSS示例练习

最新推荐文章于 2024-06-13 22:49:25 发布

线粒体2.0

最新推荐文章于 2024-06-13 22:49:25 发布

阅读量56

点赞数

分类专栏：笔记文章标签： css 前端

本文链接：https://blog.csdn.net/qq_56845076/article/details/131637954

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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>Document</title>
  <link rel="stylesheet" href="../font_4159343_fbuikminy3/iconfont.css">
  <link rel="stylesheet" href="./24.aa.css">
</head>

<body>
  <div class="big">
    <div class="top">
      <div class="a1">
          <span class="iconfont icon-icon-xiaomiguishu"></span>
      </div>
      <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 class="a2">
        <input type="text" name="research" placeholder="显示器">
       
        <span class="iconfont icon-Magnifier"></span>
       
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <ul class="li">
          <li class="l1">
            <a href="#">手机 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
              <img src="../images/11.jpeg" alt="">
            </a>
          </li>
          <li class="l2">
            <a href="#">电视 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
              <img src="../images/12.jpg" alt="">
            </a>
          </li>
          <li class="l3">
              <a href="#">家电 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
              <img src="../images/13.jpg" alt="">
              </a>
          </li>
          <li class="l4">
              <a href="#">笔记本 平板 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
                  <img src="../images/14.jpg" alt="">
              </a>
          </li>
          <li class="l5">
              <a href="#">出行 穿戴 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
                  <img src="../images/15.jpg" alt="">
              </a>
          </li>
          <li class="l6">
              <a href="#">耳机 音箱 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
                  <img src="../images/16.jpg" alt="">
              </a>
          </li>
          <li class="l7">
              <a href="#">健康 儿童 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
                  <img src="../images/17.jpg" alt="">
              </a>
          </li>
          <li class="l8">
              <a href="#">生活 箱包 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
                  <img src="../images/18.jpg" alt="">
              </a>
          </li>
          <li class="l9">
              <a href="#">智能 路由器 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
                  <img src="../images/19.jpg" alt="">
              </a>
          </li>
          <li class="l10">
              <a href="#">电源 配件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&gt;
                  <img src="../images/20.jpg" alt="">
              </a>
          </li>
        </ul>
        
      </div>
      <div class="right">
        <img src="../images/10.jpg" alt="">
   
      </div>
    </div>
  </div>
</body>
</html>

CSS

*{
  padding: 0;
   margin: 0;
 }
 div{
   box-sizing: border-box;
 }
 .big{
   width: 1200px;
   height: 600px;
   margin: 0 auto;
 }

 .top{
   display: flex;
   flex-direction: row;
 }
 .icon-icon-xiaomiguishu{
   color: orangered;
   font-size: 50px;
 }
 .a1{
   width: 200px;
   height: 50px;
 }
 .top li{
   width: 90px;
   height: 50px;
   list-style: none;
   /* background-color: blue; */
   text-align: center;
   line-height: 50px;
 }

 .top>ul{
   display: flex;

 }
 a{
   text-decoration: none;
   color: black;
 }
 .a2{
   width: 190px;
   height: 50px;
 }
 .icon-Magnifier{
   border: 1px sloid blank;
   font-size: 30px;
 }
 .a2 input{
   width: 110px;
   height: 30px;

 }
 .left{
   width: 200px;
   height: 550px;
   /* background-color: greenyellow; */
 }
 .left li{
   width: 200px;
   height: 55px;
   list-style: none;
   line-height: 55px;
   text-indent: 2em;
   /* background-color: blueviolet; */
 }
 .bottom{
   display:flex;
 }
 .right{
   width: 1000px;
   height: 550px;
   /* background-color: aquamarine; */
 }

 .right img{
   width: 1000px;
   height: 550px;
 }

 .l1 a{
   position: relative;
 }
 .l1 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   right: -150px;
   top: -10px;
 }
 .l1 :hover img{
   display: block;
 }

 .l2 a{
   position: relative;
 }
 .l2 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   left: 200px;
   top: -20px;
 }
 .l2 :hover img{
   display: block;
 }

 .l3 a{
   position: relative;
 }
 .l3 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   left: 200px;
   top: -30px;
 }
 .l3 :hover img{
   display: block;
 }

 .l4 a{
   position: relative;
 }
 .l4 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   left: 200px;
   top: -40px;
 }
 .l4 :hover img{
   display: block;
 }

 .l5 a{
   position: relative;
 }
 .l5 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   left: 200px;
   top: -50px;
 }
 .l5 :hover img{
   display: block;
 }

 .l6 a{
   position: relative;
 }
 .l6 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   left: 200px;
   top: -60px;
 }
 .l6 :hover img{
   display: block;
 }

 .l7 a{
   position: relative;
 }
 .l7 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   left: 200px;
   top: -90px;
 }
 .l7 :hover img{
   display: block;
 }

 .l8 a{
   position: relative;
 }
 .l8 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   left: 200px;
   bottom: 10px;
 }
 .l8 :hover img{
   display: block;
 }


 .l9 a{
   position: relative;
 }
 .l9 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   left: 200px;
   bottom: -20px;
 }
 .l9 :hover img{
   display: block;
 }

 .l10 a{
   position: relative;
 }
 .l10 img{
   width: 100px;
   height: 100px;
   position: absolute;
   display: none; 
   left: 200px;
   bottom: -30px;
 }
 .l10 :hover img{
   display: block;
 }