请老师指点:我写的2-6代码如下,有两个问题不知如何解决(含截图)

请老师指点:我写的2-6代码如下,有两个问题不知如何解决(含截图)

1:为什么图像在浏览器全屏下宽度没有铺满整个页面,如何实现呢?

2:我想实现导航项跟随页面的左右缩放而滚动(不固定在视口的右边),如何实现呢?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{  margin:0;
        padding:0;
    }
    .header{
        width:100%;
        height:90px;
        background:#000
        position:fixed;
        top:0;
    }
    .logo{
        width:200px;
        height:auto;
        position:absolute;
        left:0;
    }
    .nav{
        width:580px;
        height:90px;
        /*border:1px solid blue;*/
        text-align:center;
        font:bold 20px/100px "微软雅黑";
        position:absolute;right:0;
    }
    .ul1 li{
        color:#fff;
        display:inline;
        margin:30px;
    }
    .main{
        width:100%;
        margin:90px auto 80px auto
    }
    .main1{
        height:480px;
    }
    .main2{
        height:480px;
    }
    .main3{
        height:480px;
    }
    .footer{
        width:100%;
        height:80px;
        font:20px "微软雅黑";
        background:#000;
        text-align:center;
        line-height:80px;
        position:fixed;
        bottom:0;
    }
    .ul2 li{
        color:#fff;
        list-style:none;
        display:inline;
        margin:auto 25px;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="header">
      <div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
      <div class="nav">
          <ul class="ul1">
              <li>课程</li>
              <li>职业路径</li>
              <li>实践</li>
              <li>猿问</li>
              <li>手记</li>
          </ul>
      </div>
  </div>
  <div class="main">
      <div class="main1">
          <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/>
      </div>
      <div class="main2"><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/></div>
      <div class="main3"><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/></div>
  </div>
  <div class="footer">
      <ul class="ul2">
          <li>网站首页</li>
          <li>企业合作</li>
          <li>人才招聘</li>
          <li>联系我们</li>
          <li>常见问题</li>
          <li>友情链接</li>
      </ul>
  </div>
</body>
</html>

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

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


正在回答

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

3回答

.main img{width:100%;}因为你设置的是图片的容器为width:100%。所以图片不会铺满页面

.header{min-width:1000px;}当页面宽度小于1000px时,导航就不会在视口右上方固定了

  • 宝慕林2445844 提问者 #1
    可以了,十分感谢!可现在又出现了一个新的问题,为什么我左右缩放浏览器时,下方会出现空白呢?如何解决这个问题呢?
    2017-12-18 13:11:15
  • 宝慕林2445844 提问者 #2
    如上面我补充的图
    2017-12-18 13:12:25
  • 宝慕林2445844 提问者 #3
    非常感谢!
    2017-12-18 22:40:09
Miss路 2017-12-18 13:53:26

问题如下:

1、

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

2、在样式中添加img宽度为100%:

 img{

      width: 100%;

    }

3、不用做页面的响应式,你目前的所学的内容还做不到,只要保证全屏状态下正常显示就可以了。

祝学习愉快!

提问者 宝慕林2445844 2017-12-18 13:09:56
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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