体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

麻烦老师帮我检查一下效果这样可以吗，还有地方需要优化吗，感谢！

来源：2-12 编程练习

Jokerjue

2019-04-22 09:44:34

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css"> 

  *{padding:0; 

    margin:0; 

    } 

 .head{width:100%; 

      height:100px; 

      background:black;

      position:fixed; 

      top:0;

 } 

 .head img{float:left;

           line-height:100px

  }  

 .nav{float:right; 

      margin-right:30px 

 }

 .head ul li{line-height:100px;

             float:left;

             color:white; 

             margin-right:20px;  

             list-style:none;

  }   

 .main{width:100%;  

       height:1200px; 

       background:#6ab8f6; 

       margin-top:100px;

 }

.left{width:35%; 

      height:1200px; 

      float:left;

    }

  span{background:red;}


.one{margin-top:50px;  

     margin-left:50px;

} 

.one ul li{list-style:none;

           margin-top:20px;

         }

.middle{width:35%;  

       height:1200px;

       float:left;

   } 

  .two{margin-top:50px;  

       margin-left:50px;

        }

  .two ul li{list-style:none;

            margin-top:20px;}   

  .line{width:0.5%;

        height:1200px;

        float:left;

        background-color: orange;

        padding-top:100px;

        padding-bottom:100px;

  }

   .right{width:29%;

          height:1200px;  

          float:right; 

  }

  .three{margin-top:50px;  

       margin-left:50px;

        }

  .three input{margin-top:30px;} 

  .button{background:red; 

          color:#fff; 

          width:160px;

    }

  .foot{width:100%;  

        height:100px;

        background:black; 

        position:fixed;

        bottom:0;

       } 

   .foot ul{line-height:100px;  

            margin:0 auto;

            text-align:center;

     } 

    .foot ul li{display:inline-block; 

                color:white; 

                margin-right:20px;

    }

</style>

</head>

<body> 

<div class="head">  

  <img src="http://climg.mukewang.com/59093e9c00016ce303000100.png"> 

  <ul class="nav">  

    <li>课程</li>

    <li>职业路径</li> 

    <li>实战</li> 

    <li>猿问</li> 

    <li>手记</li>

  </ul>

</div>

<div class="main"> 

  <div class="left">  

    <div class="one">

      <h2>课程推荐</h2>

      <ul>  

      <li><span>职业路径</span>&nbsp;html与css实现动态页面</li> 

      <li><span>职业路径</span>&nbsp;html与css实现动态页面</li>  

      <li><span>职业路径</span>&nbsp;html与css实现动态页面</li>  

      <li><span>职业路径</span>&nbsp;html与css实现动态页面</li> 

      <li><span>职业路径</span>&nbsp;html与css实现动态页面</li> 

      </ul>

  </div>

</div>

<div class="middle">   

<div class="two">  

<h2>相关课程</h2> 

<ul> 

<li>html&nbsp;css&nbsp;java</li> 

<li>html&nbsp;css&nbsp;java</li> 

<li>html&nbsp;css&nbsp;java</li> 

<li>html&nbsp;css&nbsp;java</li>

</ul>

</div> 

</div>

<div class="line"> 

</div>

<div class="right"> 

<form>  

  <div class="three">

  <h2>登录</h2>

   <input type="text" class="username" name="userman" placeholder="请输入登录邮箱/手机号"> <br/>

   <input type="password" class="password" name="password" placeholder="6-16位密码，区分大小写，不能用空格"> <br/>

   <input type="button" value="登录" class="button" name="button">

</form> 

 </div>

</div>

</div> 

<div class="foot">  

  <ul> 

    <li>网站首页</li> 

    <li>企业合作</li>

    <li>人才招聘</li> 

    <li>联系我们</li>

    <li>常见问题</li>

    <li>友情链接</li>

  </ul>

</div>

</body>


写回答

3回答

樱桃小胖子

2019-04-22

页面出现了滚动条，且右侧的表单元素设置的样式不够美观，建银参考（拓展优化方法）

<!DOCTYPE html>
<html>

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

    .head {
        width: 100%;
        /*vh是高度单位，1vh=视窗的1%*/
        /*height: 100px;*/
        height:10vh;
        background: black;
        position: fixed;
        top: 0;
    }

    .head img {
        float: left;
        /*vh是高度单位，1vh=视窗的1%*/
        line-height:10vh;
    }

    .nav {
        float: right;
        margin-right: 30px
    }

    .head ul li {
    	/*vh是高度单位，1vh=视窗的1%*/
        line-height:10vh;
        float: left;
        color: white;
        margin-right: 20px;
        list-style: none;
    }

    .main {
        width: 100%;
        /*height: 1200px;*/
        height:80vh;
        background: #6ab8f6;
        /*margin-top: 100px;*/
        /*vh是高度单位，1vh=视窗的1%*/
        margin-top:10vh;
    }

    .left {
        width: 35%;
        /*height: 1200px;*/
        /*vh是高度单位，1vh=视窗的1%*/
        height:80vh;
        float: left;
    }

    span {
        background: red;
    }

    .one {
        margin-top: 50px;
        margin-left: 50px;
    }

    .one ul li {
        list-style: none;
        margin-top: 20px;
    }

    .middle {
        width: 35%;
        /*height: 1200px;*/
        height:80vh;
        float: left;
    }

    .two {
        margin-top: 50px;
        margin-left: 50px;
    }

    .two ul li {
        list-style: none;
        margin-top: 20px;
    }

    .line {
        width: 0.5%;
        /*height: 1200px;*/
        /*vh是高度单位，1vh=视窗的1%*/
        height:80vh;
        float: left;
        background-color: orange;
        /*padding-top: 100px;*/
        /*padding-bottom: 100px;*/
    }

    .right {
        width: 29%;
        /*height: 1200px;*/
        /*vh是高度单位，1vh=视窗的1%*/
        height:80vh;
        float: right;
    }

    .three {
        margin-top: 50px;
        margin-left: 50px;
    }
	/*设置表单样式*/
    .three input {
        margin-top: 30px;
        width:160px;
        height:30px;
        border:1px solid #ccc;
    }

    .three input.button {
        background: red;
        color: #fff;
        width: 160px;
        border:1px solid red;
    }

    .foot {
        width: 100%;
        /*vh是高度单位，1vh=视窗的1%*/
        /*height: 100px;*/
        height:10vh;
        background: black;
        position: fixed;
        bottom: 0;
    }

    .foot ul {
    	/*vh是高度单位，1vh=视窗的1%*/
        line-height:10vh;
        margin: 0 auto;
        text-align: center;
    }

    .foot ul li {
        display: inline-block;
        color: white;
        margin-right: 20px;
    }
    </style>
</head>

<body>
    <div class="head">
        <img src="http://climg.mukewang.com/59093e9c00016ce303000100.png">
        <ul class="nav">
            <li>课程</li>
            <li>职业路径</li>
            <li>实战</li>
            <li>猿问</li>
            <li>手记</li>
        </ul>
    </div>
    <div class="main">
        <div class="left">
            <div class="one">
                <h2>课程推荐</h2>
                <ul>
                    <li><span>职业路径</span>&nbsp;html与css实现动态页面</li>
                    <li><span>职业路径</span>&nbsp;html与css实现动态页面</li>
                    <li><span>职业路径</span>&nbsp;html与css实现动态页面</li>
                    <li><span>职业路径</span>&nbsp;html与css实现动态页面</li>
                    <li><span>职业路径</span>&nbsp;html与css实现动态页面</li>
                </ul>
            </div>
        </div>
        <div class="middle">
            <div class="two">
                <h2>相关课程</h2>
                <ul>
                    <li>html&nbsp;css&nbsp;java</li>
                    <li>html&nbsp;css&nbsp;java</li>
                    <li>html&nbsp;css&nbsp;java</li>
                    <li>html&nbsp;css&nbsp;java</li>
                </ul>
            </div>
        </div>
        <div class="line">
        </div>
        <div class="right">
            <form>
                <div class="three">
                    <h2>登录</h2>
                    <input type="text" class="username" name="userman" placeholder="请输入登录邮箱/手机号"> <br />
                    <input type="password" class="password" name="password" placeholder="6-16位密码，区分大小写，不能用空格"> <br />
                    <input type="button" value="登录" class="button" name="button">
            </form>
        </div>
    </div>
    </div>
    <div class="foot">
        <ul>
            <li>网站首页</li>
            <li>企业合作</li>
            <li>人才招聘</li>
            <li>联系我们</li>
            <li>常见问题</li>
            <li>友情链接</li>
        </ul>
    </div>
</body>

</html>

希望可以帮到你！

0

樱桃小胖子

2019-04-22

出现白色间隙是因为中间的橘色线设置了padding-bottom后高度超出导致的

http://img.mukewang.com/climg/5cbd267b0001b9ea19190964.jpg

建议去掉padding-bottom: 100px;即可。

祝学习愉快！

0
hokerjue
h 谢谢老师，其他地方还有什么问题吗
h019-04-22
共1条回复

Jokerjue

提问者

2019-04-22

我发现主体和页脚有白色空隙这个问题 请问如何解决 谢谢

0

0 学习 · 40143 问题

查看课程

相似问题

老师麻烦帮我看看代码还有没有需要修改的地方

回答 4

麻烦老师检查一下

回答 2

老师麻烦帮我看一下效果，时候需要再优化的地方？？

回答 1

老师我完成的对吗？还有什么地方需要优化的吗？

回答 2

麻烦老师检查一下

回答 2

打开慕课网App查看更多内容