麻烦老师指导一下作业

麻烦老师指导一下作业

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>圣杯布局</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
           list-style-type: none;
           text-decoration: none;
       }
       body{
           min-width: 800px;
       }
       .header,.footer{
           width: 100%;
           color: white;
           height: 100px;
           background: black;
           overflow: hidden;
           zoom: 1;

       }
       .logo{
           float: left;
       }
       .logo img{
           display: block;
       }
       .nav ul{

           overflow: hidden;
           zoom: 1;
           float: right;

       }
       .nav ul li{
           line-height: 100px;
           float: left;
           margin-right: 50px;
       }
       a{
           color: white;
       }
       .nav ul li a:hover{
             color: orange;
           cursor: pointer;
       }
       .footer{
           text-align: center;
       }
       .footer ul {
            display: inline-block;
           overflow: hidden;
           zoom: 1;

       }
       .footer ul  li{
           float: left;
           line-height: 100px;
           margin:0 20px;
       }
       .container{
           padding: 0 200px 0  300px;
           overflow: hidden;
           zoom: 1;
       }
       .content,.left,.right{
           position: relative;
           min-height: 740px;
           float: left;
       }
       .content{
           width: 100%;
           background: pink;

       }
       .content img{
           display: block;
           margin: 150px auto;

       }

       .left{
           background: bisque;
           width: 300px;
           margin-left: -100%;
           left: -300px;


       }
       .right{
           width: 200px;
           background: deepskyblue;
           margin-left: -200px;
           right: -200px;
       }
       .inner{
           margin-top: 150px;
           margin-left: 20px;
       }
       span{
           background: firebrick;
       }
       .inner h3,.inner p{
           margin-top: 10px;
       }
       .inner p a{
           color: black;
       }
       input{
           width: 200px;
           margin-top: 10px;
           height: 30px;

       }
       .button{
           background: red;
           border: none;
       }
   </style>
</head>
<body>
 <div class="header">
     <div class="logo">
         <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.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="container">
     <div class="content">
         <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
     </div>
      <div class="left">
          <div class="inner">
              <h3>课程推荐</h3>
              <p><span>职业路径</span><a href="#">&nbsp;&nbsp;HTML与CSS实现动态网页</a></p>
              <p><span>职业路径</span><a href="#">&nbsp;&nbsp;零基础入门Android语法与界面</a></p>
              <p><span>职业路径</span><a href="#">&nbsp;&nbsp;ios基础语法与常用控件</a></p>
              <p><span>职业路径</span><a href="#">&nbsp;&nbsp;PHP入门开发</a></p>
              <p><span>职业路径</span><a href="#">&nbsp;&nbsp;JAVA入门开发</a></p>
          </div>
      </div>
      <div class="right">
           <div class="inner">
               <h1>登录</h1>
               <input type="text" placeholder="请输入用户名"><br/>
               <input type="text" placeholder="请输入用户密码"><br/>
               <input class="button" type="button" value="登录">
           </div>
      </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

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

1回答
好帮手慕星星 2019-06-24 14:38:26

你好,代码整体布局是不错的,只不过中间左右两侧宽度有些窄了:

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

看起来不太美观,可以再调整一下。

祝学习愉快!

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

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

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

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

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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