请老师优化一下,有什么问题

请老师优化一下,有什么问题

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{margin:0;padding:0;}

    a{text-decoration:none;}

    li{list-style:none;}

    .header{width:100%;

            height:100px;

            background:black;

            overflow:hidden;

            zoom:1

    }

    .header .logo{float:left;}

    

    .header .nav{float:right;}

    .header .nav li{display:inline-block;

                    line-height:100px;

                    margin-right:40px;

    }

    .header .nav li a{color:white;}

    .content{width:100%;

             height:;

             background:lightblue;

             overflow:hidden;

             zoom:1;

             font-size:14px;

    }

    .left{width:50%;

          height:500px;

          float:left;

          position:relative;

          top:80px;

          left:250px;

    }

    .right{width:50%;

           height:500px;

           float:left;

           position:relative;

           top:80px;

           left:100px;

    }

    .left li{margin-top:20px;}

    .right li{margin-top:20px;}

    span{background:pink;}

    .footer{width:100%;

            height:100px;

            background:black;

            text-align:center;

    }

    .footer ul{display:inline;}

    .footer ul li{display:inline;

                  line-height:100px;

                  margin:20px;

    }

     .footer ul li a{color:white;}

  </style>

</head>

<body>

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

  <div class="header">

      <div class="logo">

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

      </div>

      <div class="nav">

          <ul>

              <li><a href="#">课程</a></li>

              <li><a href="#">职业路径</a></li>

              <li><a href="#">实战</a></li>

              <li><a href="#">猿问</a></li>

              <li><a href="#">手记</a></li>

          </ul>

      </div>

  </div>

  <div class="content">

      <div class="left">

         

          <ul> 

              <h2>课程推荐</h2>

              

              <li><span>职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</li>

              <li><span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</li>

              <li><span>职业路径</span>&nbsp;&nbsp;ios基础语法与常用控件</li>

              <li><span>职业路径</span>&nbsp;&nbsp;PHP入门开发</li>

              <li><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</li>

          </ul>

      </div>

      <div class="right">

          <ul>

              <h2>相关课程</h2>

              <li>HTML&nbsp;CSS&nbsp;javaScript</li>

              <li>HTML5&nbsp;CSS3&nbsp;Jquery</li>

              <li>移动端基础&nbsp;移动端APP开发</li>

          </ul>

          

          

      </div>

  </div>

  <div class="footer">

      <ul>

          <li><a href="#">网站首页</a></li>

          <li><a href="#">企业合作</a></li>

          <li><a href="#">人才招聘</a></li>

          <li><a href="#">联系我们</a></li>

          <li><a href="#">常见问题</a></li>

          <li><a href="#">友情链接</a></li>

      </ul>

  </div>

</body>

</html>


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

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

4回答
好帮手慕码 2019-04-01 17:28:25

同学你好!你可以将内容的高度减小:

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

修改top值就可以了,也不会出现滚动条。

如果解决了你的疑惑,望采纳, 祝学习愉快~~ 


好帮手慕码 2019-04-01 14:22:43

同学你好!代码效果实现是很好的~

(1)    让页面全部展示出来不出现滚动条,可以给顶部和底部导航栏设置固定定位,给中间内容块设置高度百分百(body/html也要高度设置百分之百)

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

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

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

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

(2)    图中的内容部分建议使用 父级向相对定位和子级绝对定位结合浮动来显示。,

可优化的地方:

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

img标签超出了父级容器,出现这个问题的愿意那是img标签是内联标签,具有文字特效,会产生间隙,解决办法是将img标签设置为块级元素:

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

如果解决了你的疑惑,望采纳, 祝学习愉快~~


  • 提问者 浮沉幻听 #1
    body和html以及内容部分设置成高度100%,头部设置成fixed之后,内容部分被头部造成的遮盖部分需要用margin-top来解决嘛,用了之后还是会有滚动条了就
    2019-04-01 15:08:26
提问者 浮沉幻听 2019-03-31 15:39:32

还有,题中的内容部分的位置除了用浮动加相对定位来设置,还有哪些方法呢

提问者 浮沉幻听 2019-03-31 15:37:11

想问题一下怎么设置才能让页面全部展示出来,不出现滚动条呢


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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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