请老师检查一下,有什么需要修改的地方,谢谢

来源:2-12 编程练习

文龍45

2019-07-07 23:16:34

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 *{
     margin:0;
     padding:0;
     font-size: 20px;
 }
 .head{
     width:100%;
     height:100px;
     background:black;
     color:white;
     position: fixed;
     top: 0;
 }
 .head ul{
     list-style:none;
     float:right;
     line-height:100px;
 }
 .head ul li{
     display:inline;
   margin:30px;
 }
 .con{
  margin-top: 100px;
  margin-bottom: 100px;
  width:100%;
  height: 800px;
 }
 .left{
  width: 33%;
  height: 800px;
  background: #d9ffff;
  float: left;
 }
 .left-ul{
  width: 370px;
  height: 200px;
   margin-top: 100px;
   margin-left: 100px;
 }
 .left-ul ul,.right-ul ul{
  list-style: none;
 }
 .left-ul ul li,.right-ul ul li{
  margin-top: 20px;
  font-size: 16px;
 }
 h3{
  font-size: 30px;
  margin-left: -10px;
 }
 span{
  background: red;
 }
 .right{
  width: 33%;
  height: 800px;
  background: #d9ffff;
  float: left;

 }
 .right-ul{
  width: 370px;
  height: 200px;
   margin-top: 100px;
   margin-left: 100px;
 }
 .foot{
     width:100%;
     height:100px;
     background:black;
     position: fixed;
     bottom: 0;
 }
 .foot ul{
     list-style:none;
     line-height:100px;
     text-align: center;
 }
 .foot ul li{
     display:inline;
   margin:10px;
 }
 a{
  text-decoration: none;
  color: white;
 }
 .line{
  width: 1%;
  height: 800px;
  background: orange;
  float: left;
 }
 .input{
  width: 33%;
  height: 800px;
  background: #d9ffff;
  float: left;
 }
 .input-a{
    width: 400px;
  height: 200px;
   margin-top: 100px;
   margin-left: 100px;
 }
 input{
  margin-top: 20px;
 }
 .text{
  width: 270px;
  height: 40px;
  font-size: 13px;
 }
 .sub{
  background: red;
  width: 270px;
  height: 40px;
  color: white;
 }
 </style>
</head>
<body>
    <div class="head">
        <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
        <ul>
            <li>课程</li>
            <li>职业路径</li>
            <li>实战</li>
            <li>猿问</li>
            <li>手记</li>
        </ul>
    </div>
    <div class="con">
    <div class="left">
    <div class="left-ul">
    <h3>课程推荐</h3>
    <ul>
    <li><span>职业路径</span>&nbsp;&nbsp;HTML与CSS实现动态页面</li>
    <li><span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</li>
    <li><span>职业路径</span>&nbsp;&nbsp;IOS基础语法与常用控件</li>
    <li><span>职业路径</span>&nbsp;&nbsp;PHP入门开发</li>
    <li><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</li>
    </ul>
    </div>
    </div>
    <div class="right">
    <div class="right-ul">
    <h3>相关课程</h3>
    <ul>
    <li>HTML&nbsp;&nbsp;&nbsp;CSS&nbsp;&nbsp;&nbsp;JavaScript</li>
    <li>HTML5&nbsp;&nbsp;&nbsp;CSS3&nbsp;&nbsp;&nbsp;Jquery</li>
    <li>移动端基础&nbsp;&nbsp;&nbsp;移动端APP开发</li>
    </ul>
    </div>
    </div>
    <div class="line"></div>
    <div class="input">
    <div class="input-a">
    <h3>登录</h3>
    <input type="text" name="" placeholder="请输入邮箱/手机号" class="text">
    <input type="password" name="" placeholder="6-16位密码,区分大小写,不能输入空格" class="text"><br/>
    <input type="submit" name="" value="登录" class="sub">
    </div>
    </div>
    </div>
    <div class="foot">
    <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回答

好帮手慕慕子

2019-07-08

同学你好, 整体效果实现的不错。 不过表单元素对齐这里实现的有一些误差。如下图所示:

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

建议修改: 因为浏览器解析的问题,默认给input输入框添加了边框, 另外, type="button"的按钮默认设置的width值包含了border值。参考下图调整

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

同学可以自己下去测试一下

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~


0

0 学习 · 40143 问题

查看课程