老師，幫的檢查2-12編程練習

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{padding:0;margin:0;}
     .main{background: orange;width: 100%;height: 1100px;}
    .logo{width:100%;height:100px;background:#333;float:left;}
    .nav{width:500px;height:100px;}
     .nav ul {position:absolute;top:0px;left:900px;list-style:none;color:#fff;}
     .nav ul li{float:left;padding-left:40px;line-height:100px;font-size: 20px;}
     .conatiner{width:100%;height:1000px;}
     .left{width:20%;height:1000px;background:#00CCCC;float:left;}
     .right{width:40%;height:1000px;background:#00CCCC;float:left;}
     .leftcont{position:absolute;top:200px;left:50px;margin:30px;}
     .leftcont span{background:pink;}
     .leftcont p{margin:20px;}
     .rightcont{width:300px;height:200px;float:right;position:absolute;left:500px;top:240px;}
     .rightcont p{margin-left:40px;padding:10px;}
     .footer{background:black;width:100%;height:100px;bottom: 1100px;overflow: auto;color:#fff;}
     .footer ul{width:100%;list-style:none;line-height: 100px;font-size:20px;}
     .footer ul li{float:left;margin-left:120px;}
  
   
     .loginwd{font-size:20px;margin-left:200px;margin-top:135px;}
     .login{width: 39%;height:1000px;background:#00CCCC;position: absolute;left: 870px;top:100px;}
     div input{width: 250px;height: 30px;margin:5px;margin-left:200px;}
    .loginbutton input{height:50px;background:red;color:#fff;font-size: 20px}

 
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="main">
  <!--logo-->
  <div class="logo">
      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
       
  </div>
  <!--導航-->
  <div class="nav">
      <ul>
         <li>課程</li> 
         <li>職業路徑</li> 
         <li>實戰</li> 
         <li>猿問</li> 
         <li>手記</li> 
      </ul>
  </div>
   
  <!--主體-->
  <div class="container">
      <!--左側內容-->
      <div class="left">
          <div class="leftcont">
              <p>課程推薦</p>
               
<p><span>職業路徑</span>   HTML5與CCS3實現動態網頁</p>
<p><span>職業路徑</span>  零基礎入門Android語法與界面</p>
<p><span>職業路徑</span>  IOS基礎語法與常用控件</p>
<p><span>職業路徑</span> PHP入門開發</p>
<p><span>職業路徑</span>  JAVA入門開發</p>
          </div> 
           
      </div>
       
      <!--右側內容-->
      <div class="right"></div>
      <div class="rightcont">
          <p>相關課程</p>
        <p>HTML   CSS JavaScipt</p>
       <p> HTML5  CSS3  Jquery</p>
        <p>移動端基礎    移動端APP開發</p>
           
      </div>

        
      </div>


      
  </div>
  
    <div loginbar></div>

   <!-- login -->
    <div class="login">
      <p class="loginwd">登錄</p>
      <div><input type="text" name="username" placeholder="請輸入登錄郵箱/手機號"></div>
      <div><input type="password" name="pw" placeholder="6-16位密碼，區分大小寫，不能用空格"></div>
      <div class="loginbutton"><input type="button" name="login" value="登錄"></div>



    </div>

   
  <!--footer-->
  <div class="footer">
      <ul>
         <li>網站首頁</li> 
         <li>企業合作</li> 
         <li> 人才招聘</li> 
         <li>聯繫我們</li> 
          <li>常見問題</li> 
         <li>友情鏈接</li> 
      </ul>
     
  </div>
  </div>
</body>
</html>

慕数据3203843 2019-09-21

源自：CSS网页布局基础 2-12 编程练习

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2019-09-23 13:57:05

同学你好。

测试效果如下：

自己测试可能不是这种效果，由于每个显示器的分辨率不同，宽度也会不同。这边将浏览器宽度缩小就正常了，但是同学的代码从布局上是有问题的，尽量不使用定位，避免定位位置不同。建议：

（1）顶部可以在嵌套一个盒子，左右两侧浮动显示。

（2）中间container要包括3部分内容：左侧，右侧以及登录部分，可以重新调整三部分宽度，差距不要太大

（3）底部导航项可以修改为行内元素，在父元素中设置文本居中就可以居中显示了。

参考修改：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    /*此处写代码*/
    * {
        padding: 0;
        margin: 0;
    }

    .main {
        background: orange;
        width: 100%;
        height: 1100px;
    }

    .header {
        width: 100%;
        height: 100px;
        background: #333;
    }

    .logo {
        /*width: 100%;*/
        height: 100px;
        /*background: #333;*/
        float: left;
    }

    .nav {
        float: right;
        width: 500px;
        height: 100px;
    }

    .nav ul {
        /* position: absolute;
        top: 0px;
        left: 900px;*/
        list-style: none;
        color: #fff;
    }

    .nav ul li {
        float: left;
        padding-left: 40px;
        line-height: 100px;
        font-size: 20px;
    }

    .conatiner {
        width: 100%;
        height: 1000px;
    }

    .left {
        width: 32%;
        height: 1000px;
        background: #00CCCC;
        float: left;
    }

    .right {
        width: 32%;
        height: 1000px;
        background: #00CCCC;
        float: left;
    }

    .leftcont {
        /* position: absolute;
        top: 200px;
        left: 50px;*/
        margin-top: 100px;
        margin-left: 50px;
    }

    .leftcont span {
        background: pink;
    }

    .leftcont p {
        /*margin: 20px;*/
        margin-top: 20px;
    }

    .rightcont {
        width: 300px;
        height: 200px;
        margin-top: 100px;
        margin-left: 50px;
        /*float: right;*/
        /*position: absolute;*/
        /* left: 500px;
        top: 240px;*/
    }

    .rightcont p {
        margin-left: 40px;
        padding: 10px;
    }

    .footer {
        background: black;
        width: 100%;
        height: 100px;
        bottom: 1100px;
        overflow: auto;
        color: #fff;
    }

    .footer ul {
        width: 100%;
        list-style: none;
        line-height: 100px;
        font-size: 20px;
        text-align: center;
    }

    .footer ul li {
        /*float: left;*/
        display: inline-block;
        /*margin-left: 120px;*/
        margin: 0 40px;
    }


    .loginwd {
        font-size: 20px;
        /*margin-left: 200px;*/
        margin-left: 100px;
        margin-top: 135px;
    }

    .login {
        float: right;
        width: 35%;
        height: 1000px;
        background: #00CCCC;
        /*position: absolute;*/
        /* left: 870px;
        top: 100px;*/
    }

    div input {
        width: 250px;
        height: 30px;
        margin-top: 15px;
        /*margin-left: 200px;*/
        margin-left: 100px;

    }

    .loginbutton input {
        border: none;
        height: 50px;
        background: red;
        color: #fff;
        font-size: 20px;
        width: 254px;
        height: 34px;
    }
    </style>
</head>

<body>
    <!-- 此处写代码 -->
    <div class="main">
        <div class="header">
            <!--logo-->
            <div class="logo">
                <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">

            </div>
                <!--導航-->
                <div class="nav">
                    <ul>
                        <li>課程</li>
                        <li>職業路徑</li>
                        <li>實戰</li>
                        <li>猿問</li>
                        <li>手記</li>
                    </ul>
                </div>
            </div>
            <!--主體-->
            <div class="container">
                <!--左側內容-->
                <div class="left">
                    <div class="leftcont">
                        <p>課程推薦</p>
                        <p><span>職業路徑</span> HTML5與CCS3實現動態網頁</p>
                        <p><span>職業路徑</span> 零基礎入門Android語法與界面</p>
                        <p><span>職業路徑</span> IOS基礎語法與常用控件</p>
                        <p><span>職業路徑</span> PHP入門開發</p>
                        <p><span>職業路徑</span> JAVA入門開發</p>
                    </div>
                </div>
                <!--右側內容-->
                <div class="right">
                    <div class="rightcont">
                        <p>相關課程</p>
                        <p>HTML CSS JavaScipt</p>
                        <p> HTML5 CSS3 Jquery</p>
                        <p>移動端基礎 移動端APP開發</p>
                    </div>
                </div>
                <!-- login -->
                <div class="login">
                    <p class="loginwd">登錄</p>
                    <div><input type="text" name="username" placeholder="請輸入登錄郵箱/手機號"></div>
                    <div><input type="password" name="pw" placeholder="6-16位密碼，區分大小寫，不能用空格"></div>
                    <div class="loginbutton"><input type="button" name="login" value="登錄"></div>
                </div>
            </div>
        </div>
        <div loginbar></div>
        <!--footer-->
        <div class="footer">
            <ul>
                <li>網站首頁</li>
                <li>企業合作</li>
                <li> 人才招聘</li>
                <li>聯繫我們</li>
                <li>常見問題</li>
                <li>友情鏈接</li>
            </ul>
        </div>
    </div>
</body>

</html>

自己再测试下，祝学习愉快！

收起回答