新人求助各位大神，为啥两个块儿重叠了，大神帮忙看一下谢谢大神

kraz520 2021-02-16 04:48:00

由于我是新人，顺便也请大神看一下我写的有没有问题，是不是太啰嗦了。还有为啥中间的图片会跟右边的图片重叠呢……
自己实在是找不出问题了……


<!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>布局练习题</title>

    <link rel="stylesheet" href="./css/reset.css">



    <style>



        /* 设置主体的大小 */



        .zuo, .zhong, .you{

            float:left;

            height: 480px;

        }





        .zhuti{

            background-color: blanchedalmond;

            width: 1000px;

            height: 480px;

            margin: 100px auto;

        }



        .zuo{

            width: 190px;

        }



        .zuodaohang{

            width: 190px;

            margin: 0 10px;

        }



        .zuo li{

            

            margin: 9px 0;

        }



        .zuo a{

            text-decoration: none;

            color: rgb(80, 80, 80);

            font-size: 14px;

            }



            .zuo a:hover{

                color: red;

            }



            .zuo span{

                font-size: 12px;

                color: rgb(133, 133, 133);

            }



            .zhong{

                width: 570px;

                margin: 10px 10px;

            }



            .you{

                width: 220px; 

            }



            .you2{

                margin: 5px auto;

            }



    </style>

</head>



<body>

    <div class="zhuti">



          <!--左边开始-->

        <div class="zuo">

            <ul class="zuodaohang">

                <li>

                    <a href="#">家用电器</a>

                </li>



                <li>

                    <a href="#">手机</a><span class="xiegang">/</span><a href="#">运营商</a><span class="xiegang">/</span><a href="#">数码</a>

                </li>



                <li>

                    <a href="#">电脑</a><span class="xiegang">/</span><a href="#">办公</a>

                </li>



                <li>

                    <a href="#">家具</a><span class="xiegang">/</span><a href="#">家居</a><span class="xiegang">/</span><a href="#">家装</a><span class="xiegang">/</span><a href="#">厨具</a>

                </li>



                <li>

                    <a href="#">男装</a><span class="xiegang">/</span><a href="#">女装</a><span class="xiegang">/</span><a href="#">童装</a><span class="xiegang">/</span><a href="#">内衣</a>

                </li>



                <li>

                    <a href="#">美妆</a><span class="xiegang">/</span><a href="#">个人清洁</a><span class="xiegang">/</span><a href="#">宠物</a>

                </li>



                <li>

                    <a href="#">女鞋</a><span class="xiegang">/</span><a href="#">箱包</a><span class="xiegang">/</span><a href="#">钟表</a><span class="xiegang">/</span><a href="#">珠宝</a>    

                </li>



                <li>

                    <a href="#">男鞋</a><span class="xiegang">/</span><a href="#">运动</a><span class="xiegang">/</span><a href="#">户外</a>

                </li>



                <li>

                    <a href="#">房产</a><span class="xiegang">/</span><a href="#">汽车</a><span class="xiegang">/</span><a href="#">汽车用品</a>

                </li>



                <li>

                    <a href="#">母婴</a><span class="xiegang">/</span><a href="#">玩具乐器</a><span class="xiegang">/</span>

                </li>



                <li>

                    <a href="#">食品</a><span class="xiegang">/</span><a href="#">酒类</a><span class="xiegang">/</span><a href="#">生鲜</a><span class="xiegang">/</span><a href="#">特产</a>

                </li>



                <li>

                    <a href="#">艺术</a><span class="xiegang">/</span><a href="#">礼品鲜花</a><span class="xiegang">/</span><a href="#">农资绿植</a>

                </li>



                <li>

                    <a href="#">医药保健</a><span class="xiegang">/</span><a href="#">计生情趣</a>

                </li>



                <li>

                    <a href="#">图书</a><span class="xiegang">/</span><a href="#">文娱</a><span class="xiegang">/</span><a href="#">教育</a><span class="xiegang">/</span><a href="#">电子书</a>

                </li>



                <li>

                    <a href="#">机票</a><span class="xiegang">/</span><a href="#">酒店</a><span class="xiegang">/</span><a href="#">旅游</a><span class="xiegang">/</span><a href="#">生活</a>

                </li>



                <li>

                    <a href="#">理财</a><span class="xiegang">/</span><a href="#">众筹</a><span class="xiegang">/</span><a href="#">白条</a><span class="xiegang">/</span><a href="#">保险</a>

                </li>



                <li>

                    <a href="#">安装</a><span class="xiegang">/</span><a href="#">维修</a><span class="xiegang">/</span><a href="#">清洗</a><span class="xiegang">/</span><a href="#">二手</a>

                </li>



                <li>

                    <a href="#">工业品</a>

                </li>







            </ul>



        </div>



          <!--中间开始-->

          

        <div class="zhong">



            <a href="#">

                <img src="./JDlianxiimg/q.jpg" alt="京东练习">



            </a>





        </div>





        <!--右边开始-->



        <div class="you">



            <ul>

                <li>

                    <a href="#">

                        <img src="./JDlianxiimg/jddh.jpg" width="190" height="150">

                    </a>

                </li>



                <li class="you2">

                    <a href="#">

                        <img src="./JDlianxiimg/jddh.jpg" width="190" height="150">

                    </a>

                </li>



                <li>

                    <a href="#">

                        <img src="./JDlianxiimg/jddh.jpg" width="190" height="150">

                    </a>

                </li>





            </ul>











        </div>









    </div>











    

</body>

</html>
...全文
397 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
Ywasl 2021-08-31
  • 打赏
  • 举报
 回复

建议用驼峰命名哟

xdblv 2021-02-24
  • 打赏
  • 举报
 回复
前来学习学习,其实顺便想混点分
sxysoft_csdn 2021-02-19
  • 打赏
  • 举报
 回复
兄弟问题解决了，给点分吧，哈哈。
kraz520 2021-02-17
  • 打赏
  • 举报
 回复
我现在是这样……主要我现在不知道自己哪里做错了……
kraz520 2021-02-17
  • 打赏
  • 举报
 回复
对差不多就是这个样子……
sxysoft_csdn 2021-02-17
  • 打赏
  • 举报
 回复
已经帮您调好了 css
sxysoft_csdn 2021-02-17
  • 打赏
  • 举报
 回复 
<!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>布局练习题 xinbiancheng.cn</title>
 <link rel="stylesheet" href="./css/reset.css">

 <style>

  /* 设置主体的大小 */
  ul {
   list-style:none;
   padding: 0;
   margin: 0;
  }


  .zuo, .zhong, .you{
   float:left;
   height: 480px;
  }


  .zhuti{
   background-color: blanchedalmond;
   width: 1000px;
   height: 480px;
   margin: 100px auto;
  }

  .zuo{
   width: 190px;
  }

  .zuodaohang{
   width: 190px;
   margin: 0 10px;
  }

  .zuo li{

   margin: 9px 0;
  }

  .zuo a{
   text-decoration: none;
   color: rgb(80, 80, 80);
   font-size: 14px;
  }

  .zuo a:hover{
   color: red;
  }

  .zuo span{
   font-size: 12px;
   color: rgb(133, 133, 133);
  }

  .zhong{
   width: 570px;
   margin: 10px 10px;
  }

  .you{
   width: 220px;
  }
  .zhong img {
   width: 100%;
  }

  .you2{
   margin: 5px auto;
  }

 </style>
</head>

<body>
 <div class="zhuti">

  <!--左边开始-->
  <div class="zuo">
   <ul class="zuodaohang">
    <li>
     <a href="#">家用电器</a>
    </li>

    <li>
     <a href="#">手机</a><span class="xiegang">/</span><a href="#">运营商</a><span class="xiegang">/</span><a href="#">数码</a>
    </li>

    <li>
     <a href="#">电脑</a><span class="xiegang">/</span><a href="#">办公</a>
    </li>

    <li>
     <a href="#">家具</a><span class="xiegang">/</span><a href="#">家居</a><span class="xiegang">/</span><a href="#">家装</a><span class="xiegang">/</span><a href="#">厨具</a>
    </li>

    <li>
     <a href="#">男装</a><span class="xiegang">/</span><a href="#">女装</a><span class="xiegang">/</span><a href="#">童装</a><span class="xiegang">/</span><a href="#">内衣</a>
    </li>

    <li>
     <a href="#">美妆</a><span class="xiegang">/</span><a href="#">个人清洁</a><span class="xiegang">/</span><a href="#">宠物</a>
    </li>

    <li>
     <a href="#">女鞋</a><span class="xiegang">/</span><a href="#">箱包</a><span class="xiegang">/</span><a href="#">钟表</a><span class="xiegang">/</span><a href="#">珠宝</a>
    </li>

    <li>
     <a href="#">男鞋</a><span class="xiegang">/</span><a href="#">运动</a><span class="xiegang">/</span><a href="#">户外</a>
    </li>

    <li>
     <a href="#">房产</a><span class="xiegang">/</span><a href="#">汽车</a><span class="xiegang">/</span><a href="#">汽车用品</a>
    </li>

    <li>
     <a href="#">母婴</a><span class="xiegang">/</span><a href="#">玩具乐器</a><span class="xiegang">/</span>
    </li>

    <li>
     <a href="#">食品</a><span class="xiegang">/</span><a href="#">酒类</a><span class="xiegang">/</span><a href="#">生鲜</a><span class="xiegang">/</span><a href="#">特产</a>
    </li>

    <li>
     <a href="#">艺术</a><span class="xiegang">/</span><a href="#">礼品鲜花</a><span class="xiegang">/</span><a href="#">农资绿植</a>
    </li>

    <li>
     <a href="#">医药保健</a><span class="xiegang">/</span><a href="#">计生情趣</a>
    </li>

    <li>
     <a href="#">图书</a><span class="xiegang">/</span><a href="#">文娱</a><span class="xiegang">/</span><a href="#">教育</a><span class="xiegang">/</span><a href="#">电子书</a>
    </li>

    <li>
     <a href="#">机票</a><span class="xiegang">/</span><a href="#">酒店</a><span class="xiegang">/</span><a href="#">旅游</a><span class="xiegang">/</span><a href="#">生活</a>
    </li>

    <li>
     <a href="#">理财</a><span class="xiegang">/</span><a href="#">众筹</a><span class="xiegang">/</span><a href="#">白条</a><span class="xiegang">/</span><a href="#">保险</a>
    </li>

    <li>
     <a href="#">安装</a><span class="xiegang">/</span><a href="#">维修</a><span class="xiegang">/</span><a href="#">清洗</a><span class="xiegang">/</span><a href="#">二手</a>
    </li>

    <li>
     <a href="#">工业品</a>
    </li>
   </ul>

  </div>

  <!--中间开始-->

  <div class="zhong">

   <a href="#">
    <img src="https://img20.360buyimg.com/babel/s590x470_jfs/t1/165324/14/5629/140459/601d527bE0bff2414/1bf81f541e1f2ccf.jpg.webp" alt="京东练习">
   </a>
  </div>


  <!--右边开始-->
  <div class="you">
   <ul>
    <li>
     <a href="#">
      <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/144766/40/15721/62181/5fbf7c8cEab676955/10c447808d9e55ea.jpg.webp" width="190" height="150">
     </a>
    </li>

    <li class="you2">
     <a href="#">
      <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/144766/40/15721/62181/5fbf7c8cEab676955/10c447808d9e55ea.jpg.webp" width="190" height="150">
     </a>
    </li>

    <li>
     <a href="#">
      <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/144766/40/15721/62181/5fbf7c8cEab676955/10c447808d9e55ea.jpg.webp" width="190" height="150">
     </a>
    </li>
   </ul>
  </div>
 </div>
</body>
</html>
kraz520 2021-02-17
  • 打赏
  • 举报
 回复
感谢大神… 大神我错在哪里了呢？或者您调好的附件在哪里~~
sxysoft_csdn 2021-02-16
  • 打赏
  • 举报
 回复
是想显示这个样子吗？
sxysoft_csdn 2021-02-16
  • 打赏
  • 举报
 回复
现在是什么样子？想显现什么样子？给个图上来。
Android Sliding_library(修复bug)侧边栏也能滑动
在github上大神写了个侧边栏的包slidingMenu_library，但是有个bug，不能在侧边栏上滑动，找了好久，修改之后，侧边栏也能滑动了，供大家使用。
分享源码 雷电模拟器监控器-游戏搬砖的福音
大家知道雷电模拟器图色是外部绑定，不能改变窗口大小，但是多开就会画面重叠不适合查看，这个监控器，监控原始画面并映射成小窗口 期望大家多多支持，分享出来，大神可以继续优化，谢谢支持。
leetcode-[removed]LeetCode题解，Javascript版本
双指针主要用于遍历时间表，两个指针指向不同的元素，从而协同完成任务 要求：串联有序 题号 标题 艰难 衔链 原始码 用时击败 0001 两数之和 ★☆☆ 95.44％ 0015 三数之和 ★★☆ 60.20％ 0088 合并两个有序时序 ...
css菜单栏有重叠的,求大神帮忙看看CSS那里错了 第二级菜单和第三级菜单的UL都重叠了...
aaa bbbb ccccc dddddd eeee ffff gggg 我把你的html结构改了一下，css也有变化，请你和你的原代码对照一下看看变化吧
leetcode 重叠区间问题
重叠区间问题可以总结为在坐标轴上若干个位置为 (start(i),end(i))的区间，要求求解这些区间中有多少个不重叠区间，或者合并重叠的区间。 leetcode有大神总结了通用模板，点这里 该问题分两类：第一类求重叠区间个...
HTML5

39,084

社区成员

5,548

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章