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

老師，幫的檢查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 编程练习
0
收起

正在回答

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

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

同学你好。

测试效果如下：

http://img1.sycdn.imooc.com//climg/5d885a5e09610a2019000802.jpghttp://img1.sycdn.imooc.com//climg/5d885a7d09c0f61b19080974.jpg

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

（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>

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

0
收起回答
  • 慕数据3203843 提问者 #1
    對不同的顯示器，寬度的話用百分比%比較好吧?
    2019-09-23 20:14:48
好帮手慕星星 2019-09-24 09:44:26

你好，

对于不同分辨率的显示器，宽度最好用百分比，没有问题哦。

自己测试效果没有问题就可以，这边老师给你优化的建议是为了适应更大分辨率的显示器，因为代码中用定位较多，这样定位的位置就会不同，效果也会不一样，所以给出了建议。

祝学习愉快！

0
收起回答
提问者 慕数据3203843 2019-09-23 20:11:24

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

之前做到這樣的

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老師！請檢查3-12編程練習
1 0 1
請老師檢查 2-7 編程練習
0 0 1
請老師檢查2-10編程練習
0 0 1
3-12練習，老師檢查
0 0 1
3-5編程練習，請老師檢查
0 0 1

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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