边框重复问题

边框重复问题

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          /*样式补充*/

          body,div,h3,ul,li {

              margin: 0px;

              padding: 0px;

              font-family:"宋体";

                        }

          .big{

              width:120px;

               background-color:#f2f4f6;

               margin: 0 auto;

               padding: 0px;

               text-align: center;

               border:1px solid #c0c0c0;

              }

              ul{

                 list-style:none;

                    display:none;

              }

              h3{

                  font-size:20px;

                  border-bottom:1px solid #c0c0c0;

                  padding:5px;

              }

              ul li{

                  background-color:#fff;

                   font-size:16px;

                   padding:5px;

              }

              

              h3:hover~ul{display:block;}

              .special{border-bottom:none;}

        </style>     

    </head>

    <body>

    <div class="big">

        <div class="div1">

            <h3>家电</h3>

            <ul class="elec">

                <li>冰箱</li>

                <li>洗衣机</li>

                <li>空调</li>

            </ul>

        </div>

        <div class="div2">

            <h3>洗护</h3>

            <ul class="wash">

                <li>洗衣液</li>

                <li>消毒液</li>

                <li>柔顺剂</li>

            </ul>

        </div>

        <div  class="div3">

            <h3 class="special">衣物</h3>

             <ul class="clothes">

                <li>衬衫</li>

                <li>裤子</li>

                <li>卫衣</li>

            </ul>

        </div>

      </div>

</body>

</html>

老师这个边框添加了会重复,不添加在鼠标悬浮的时候,边框又没有。


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
Sherlock_bourne 2019-02-21 23:33:05

同学你好,关于你的边框重叠问题,边框须设置在每个单元格上,就像这样.div1,.div2,.div3{border:1px solid rgb(221,221,221);}/*若设在ul中,或者此题的.big中,边框会有重叠*/。希望能帮助到你,望采纳,祝你学习愉快!

好帮手慕夭夭 2019-01-21 14:45:09

你好同学 , 效果图中间部分也是边框重叠的 .这个没有关系的 ,加不加都可以 , 只要实现了效果就行 , 样式上面的细微差别是可以存在的 .

祝学习愉快 ,望采纳 .

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师