2-9问题为什么页面变窄的时候页头的导航会出来,还有别的问题吗

2-9问题为什么页面变窄的时候页头的导航会出来,还有别的问题吗

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

  body{margin:0;padding:0;}

  img{width:100px;height:80px;}

  .aouto{width:100%;height:90px;background:black;}

     .song{color:white;

     display:inline-block;

         padding-right:20px;

     }

  .xiao{float:right;margin:0 auto;line-height:90px;}

  .yang{width:100%;height:500px;background:#5880f9;margin:0 auto;padding-top:1px;}

  .hang{width:50%;height:500px;float:left;}

  .wei{width:50%;height:500px;float:right;}

  li{list-style:none;}

  .rui{margin:0 auto;}

 

  .red{width:100%;height:80px;background:black;padding-top:1px;}

 .bule{ display:inline-block;color:white;padding-right:20px;}

 .jian{text-align:center;line-height:80px;}

    /*此处写代码*/

  </style>

</head>

<body>

    <div class="aouto">

       <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"> 

        

            

            <ul class="xiao">

                <li class="song">课程</li>

                <li class="song">职业路径</li>

                <li class="song">实战</li>

                <li class="song">猿问</li>

                <li class="song">手记</li>

            </ul>

       

    </div>

    <div class="yang">

        <div class="hang">

             <ul class="rui">

                <h3>课程</h3>

                <li class="zhou"><span>职业路径</span>�   htlm5与css3实现动态网页</li>

                 <li><span>职业路径</span>� htlm5与css3实现动态网页</li>

                  <li><span>职业路径</span>� htlm5与css3实现动态网页</li>

                   <li><span>职业路径</span>� htlm5与css3实现动态网页</li>

                   </ul>

                   </div>

               

             

             <div class="wei">

                 <ul class="yi">

                     <h3>相关课程</h3>

                     <li>html�css�html</li>

                      <li>html�css�html</li>

                       <li>html�css�html</li>

                 </ul>

             </div>

       

    </div>

    <div class="red">

        <ul class="jian">

            <li class="bule">网站首页</li>

            <li class="bule">网站首页</li>

        <li class="bule">网站首页</li>

        <li class="bule">网站首页</li>

        <li class="bule">网站首页</li>

        </ul>

    </div>

  <!-- 此处写代码 -->

</body>

</html>



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

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

1回答
芦苇声 2017-08-22 20:11:53

body加一个最小宽度属性,这样导航的字就不会跑出来,我计算了你的导航内容宽度是450.938,但是强迫症不能忍啊,写个451,这样就没有问题了,小于451肯定会溢出,大于它就没事啦。

body{margin:0;padding:0;min-width:451px;}

  • 提问者 晓松aa #1
    这个最小宽度是怎么计算的啊
    2017-08-22 21:11:36
  • 图片宽度加文字宽度加文字内边距
    2017-08-22 23:50:43
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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