请问老师,页头和页尾的链接文字,也可以写成随窗口大小自适应吗?该怎么写?

请问老师,页头和页尾的链接文字,也可以写成随窗口大小自适应吗?该怎么写?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">

      *{
          margin:0;padding: 0;
      }

    .nav{
      width:100%;
      height: 100px;
      line-height: 100px;
      background: black;
      position: fixed;
      top:0;
      overflow: hidden;
      zoom:1;
    }
   .nav img{
    float:left;   
    }
    .nav img:hover{
      cursor: pointer;
      background-color: red;
    }

    div ul{
      height: 100px;
      float: right;
    }
    div ul li{ 
     text-decoration: none;
     display: inline-block;
     color: white;
     font-size: 18px;
     padding:0 30px;
    }
    li:hover{
      color: red;
      cursor:pointer;
    }
    .main{
      margin-top: 100px;
      margin-bottom: 100px;
    }

    .main img{
      width: 100%;
      height: 100%;
    }

   .footer{
     background: black; 
     width:100%;
     height: 100px;
     line-height: 100px;
     text-align: center;
     position: fixed;
     bottom: 0;
 }
   .footer p{
    width:60%;
    margin:0 auto;
   }
   .footer a{
     font-size: 18px;
     text-decoration: none;
     color: white;
     padding:0 20px; 
 }
     

  </style>
</head>
<body>
  <div class="nav">
    <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" /> 
    <ul>
      <li>课程</li>
      <li>职业路径</li>
      <li>实战</li>
      <li>猿问</li>
      <li>手记</li>
    </ul>
  </div>
  <div class="main">
    <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" />
    <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" />
    <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" />
  </div>
  <div class="footer">
        <p>
          <a href="#">网站首页</a>
          <a href="#">企业合作</a>
          <a href="#">人才招聘</a>
          <a href="#">联系我吗</a>
          <a href="#">常见问题</a>
          <a href="#">友情链接</a>
        </p>  
      </div>
</body>

链接的文字,在窗口缩小后就会慢慢盖住看不到,怎么样可以实现它们的自适应?

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

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

2回答
小于飞飞 2018-07-03 17:14:15

上传代码当窗口缩小时,出现异常,如下:

http://img1.sycdn.imooc.com//climg/5b3b3d4e000135bf06710731.jpg

解决方案:给每个区域添加最小值后,当窗口缩小时,导航文字和页脚文字显示,效果如下:

http://img1.sycdn.imooc.com//climg/5b3b3def00018d6c09480921.jpg

代码调整:

http://img1.sycdn.imooc.com//climg/5b3b3e470001bb2503770037.jpg

http://img1.sycdn.imooc.com//climg/5b3b3e5600012b0602130082.jpg


是否是该效果,如不是请详细描述,祝学习愉快。

小于飞飞 2018-06-29 10:03:34

添加 min-width ,在小于该宽度时不发生变化,动手实践,希望对你有帮助,祝学习愉快。

  • 提问者 精慕门0318346 #1
    问下,为何我设置了最小宽度,但每次浏览器还是可以缩到最小呢,好像设置不管用
    2018-07-03 15:13:06
  • 小于飞飞 回复 提问者 精慕门0318346 #2
    给具体的导航添加最小宽度, .nav{min-width:950px;} 动手实践,祝学习愉快。
    2018-07-03 16:26:17
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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