49、淘宝网练习

最新推荐文章于 2023-04-20 08:19:29 发布

五仁卤鸡翅

最新推荐文章于 2023-04-20 08:19:29 发布

阅读量268

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/MoonNight608/article/details/107492781

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
淘宝网练习

介绍

文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

淘宝网练习

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
*{
    marging:0;
    padding:0
}

/*
  设置外层容器
*/
.nav{
    width:100%
}
/*
  设置一行的容器
*/
.nav-inner{
    /*
       设置为弹性容器
    */
    display:flex;
    // 设置主轴上的空白分布
    justify-content:space-around
}
.item{
    background-color:#bfa
    width:15%;
    text-align:center
}
.item img{
    /*
      设置图片的宽度和父元素一样
    */
    width:100%
}
.item a{
   color:#333;
   text-decoration:none;
   font-size:16px;
 
}
</style>
<body>
<nav class="nav">
   <div class="nav-inner">
      <div class="item">
        <a href="#">
           <img src="img/1" >
        </a>
      </div>
       <div class="item">
        <a href="#">
           <img src="img/2" >
        </a>
      </div>
       <div class="item">
        <a href="#">
           <img src="img/3" >
        </a>
      </div>
       <div class="item">
        <a href="#">
           <img src="img/4" >
        </a>
      </div>
       <div class="item">
        <a href="#">
           <img src="img/5" >
        </a>
      </div>
   </div>
   <div class="nav-inner">
       <div class="nav-inner">
      <div class="item">
        <a href="#">
           <img src="img/1" >
        </a>
      </div>
       <div class="item">
        <a href="#">
           <img src="img/2" >
        </a>
      </div>
       <div class="item">
        <a href="#">
           <img src="img/3" >
        </a>
      </div>
       <div class="item">
        <a href="#">
           <img src="img/4" >
        </a>
      </div>
       <div class="item">
        <a href="#">
           <img src="img/5" >
        </a>
      </div>
     
   </div>
</nav>


</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
49、淘宝网练习

文章目录介绍淘宝网练习介绍文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记淘宝网练习<html lang="en"><head> <meta charset="UTF-8"> <title>meta</title></head><style>*{ marging:0; padding:0}/* 设置外层容器*/.nav{ width:100%
复制链接

扫一扫