自己写的网页编程,感觉很不理想,请老师批改一下

自己写的网页编程,感觉很不理想,请老师批改一下

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    html body{margin:0;padding:0;font-family:"微软雅黑";}
    .head{width:100%;height:16%;background:black;color:#fff;}
    .head .logo{float:left;}
    .head .daohang ul li{list-style:none;display:inline;float:right;vertical-align:middle;margin:30px;}
    .container{width:100%;height:68%;background:rgb(173,216,230);}
    .left{width:50%;height:68%;float:left;}
    .right{width:50%;height:68%;float:right;}
    span{background-color:red;}
    .left .left1{position:relative;top:80px;left:200px;}
    .container .right .right1{position:relative;top:80px;left:100px;}
    .foot{width:100%;height:16%;background:black;color:#fff;position:fixed;bottom:0;left:0;text-align:center;}
    .foot ul li{list-style:none;display:inline;line-height:80px;margin:40px;text-decoration: none;color:#fff;}

    </style>
</head>
<body>
  <div class="head">
      <div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></div>
      <div class="daohang">
          <ul>
              <li>课程</li>
              <li>职业路径</li>
              <li>实战</li>
              <li>猿问</li>
              <li>手记</li>
          </ul>
      </div>
  </div><!-- 此处写代码 -->
  <div class="container">
      <div class="left">
          <div class="left1">
              
                  <h3>课程推荐</h3>
                  <p><span>职业路径</span>&nbsp;HTML5与CSS3实现动态网页</p>
                  <p><span>职业路径</span>&nbsp;零基础入门Android语法与界面</p>
                  <p><span>职业路径</span>&nbsp;iOS基础语法与常用路径</p>
                  <p><span>职业路径</span>&nbsp;PHP入门开发</p>
                  <p><span>职业路径</span>&nbsp;JAVA入门开发</p>
              

          </div>
      </div>
      <div class="right">
        <div class="right1">
          <h3>相关课程</h3>
          <p>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript</p>
          <p>HTML5&nbsp;&nbsp;CSS3&nbsp;&nbsp;Jquery</p>
          <p>移动端基础&nbsp;&nbsp;移动端APP开发</p>
        </div>
      </div>
  </div><!-- 此处写代码 -->
  <div class="foot">
    <ul>
          <li><a>网站首页</a></li>
          <li><a>企业合作</a></li>
          <li><a>人才招聘</a></li>
          <li><a>联系我们</a></li>
          <li><a>常见问题</a></li>
          <li><a>友情链接</a></li>
      </ul>
  </div>
</body>
</html>

正在回答

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

2回答

这个作业中,各部分的高度设为适当的定值即可,而且页面内出现了水平滚动条,可如下完善:

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

  • 帝小君 提问者 #1
    非常感谢!
    2018-01-10 15:44:44
  • 帝小君 提问者 #2
    我的宽度是100%,为什么还有水平滚动条啊?怎么去掉水平滚动条?
    2018-01-10 15:45:47
怎么都被占用了呢 2018-01-10 16:33:15

出现水平滚动条的原因是因为左侧内容的实际宽度加上定位时设置的left值,超出了父元素的设置的宽度,右侧同理。从而中间部分内容的宽度和它们之间的边距和超出了页面的宽度,就出现了水平滚动条。关于解决方式,可参考上个回答里的图片,里面标注的代码是我帮你修改后的。

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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