2-11编程问题

2-11编程问题

<html>
<head>
  <meta charset="UTF-8">
  <title>2-11</title>
  <style type="text/css">
    /*此处写代码*/
    *{
      margin:0;
      padding:0;
    }
    .zt{
      width:100%;
      height:100%;
    }
    .title{
      width:100%;
      height:100px;
      background-color:#000;
      position:fixed;
      z-index:10;
    }
    .logo{
      top:0;
      left:0;
    }
    .foot{
      height:100px;
      height:20px;
      position:absolute;
      top:50%;
      margin-top:-12px;
      right:40px;
    }
    .foot a{
      font-size:24px;
      color:#fff;
      text-decoration:none;
      margin-left:40px;
    }
    .text{
      width:100%;
      height:1000px;
      background-color:#97cbff;
      position:absolute;
      top:100px;
    }
    .text_1{
      float:left;
      width:25%;
      height:1000px;
      margin:50px 5% 0% 10%;
    }
    .text_2{
      widows: 16px;%;
      height:1000px;
      float:left;
      margin:50px 5% 0% 0%;
    }
    .text_2 span{
      margin-right:10px;
    }
    .text_1,.text_2{
      font-size:16px;
      line-height:40px;
    }
    .text_1 span{
      background-color:#ff7575;
      margin-right:20px;
    }
    .text_3{
      float:left;
      height:1000px;
      width:30%;
      border-left:5px solid orange;
    }
    .text_3 form{
      margin:50px 0 0 20%;
    }
    .text_3 p{
      font-size:20px;
    }
    .text_3 input{
      width:250px;
      height:40px;
    }
    .tj{
      background-color:red;
    }
    .bottom{
      width:100%;
      height:100px;
      bottom:0;
      position:fixed;
      background-color:black;
      z-index:10;
    }
    .bottom_1{
      height:100px;
      width:auto;
      text-align:center;
      word-spacing:50px;
      line-height:100px;
    }
    .bottom_1 a{
      text-decoration:none;
      color:#fff;
      font-size:24px;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="zt">
    <div class="title">
      <div class="logo">
        <img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png">
      </div>
      <div class="foot">
        <a href="#">课程</a>
        <a href="#">职业路径</a>
        <a href="#">实战</a>
        <a href="#">猿问</a>
        <a href="#">手记</a>
      </div>
    </div>
    <div class="text">
      <div class="text_1">
        <h3>课程推荐</h3>
        <p><span>职业路径</span>HTML5与CSS实现动态网页</p>
        <p><span>职业路径</span>零基础入门Android语法与界面</p>
        <p><span>职业路径</span>IOS基础语法与常用控件</p>
        <p><span>职业路径</span>PHP入门开发</p>
        <p><span>职业路径</span>JAVA入门开发</p>
      </div>
      <div class="text_2">
        <h3>相关课程</h3>
          <p><span>HTML</spam><span>CSS</span><span>JavaScript</span></p>
          <p><span>HTML5</span><span>CSS3</span><span>Jquery</span></p>
          <p><span>移动端基础</span><span>移动端APP开发</span></p>
      </div>
      <div class="text_3">
        <form>
          <p>登录</p><br/>
          <input type="text" name="zh" placeholder="请输入登录帐号/手机号"/>
          <br/>
          <br/>
          <input type="password" name="mm" placeholder="6-16为密码 区分大小写 不能用空格" maxlength="16"/>
          <br/>
          <br/>
          <input type="submit" name="tj" value="登录" class="tj"/>
        </form>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_1">
        <a href="#">网站首页</a>
        <a href="#">企业合作</a>
        <a href="#">人才招聘</a>
        <a href="#">联系我们</a>
        <a href="#">常见问题</a>
        <a href="#">友情链接</a>
      </div>
    </div>
  </div>
</body>
</html>
  1. 有没有可以简化的代码

  2. 还有什么需要改进的地方么,请老师指点一下,谢谢!

正在回答

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

2回答

你好,1、如下:这里多了一个%,另:widows是要设置什么?检查下代码哦。

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

2、建议:右侧的提交按钮可以添加下border: none属性哦。

3、如下,单词拼写错误,应该是span

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

祝学习愉快~

  • qq_暮色兮凉城_2 提问者 #1
    非常感谢!
    2018-05-21 19:33:35
  • qq_暮色兮凉城_2 提问者 #2
    1一个单词输入错误,是定义一个宽度的 2,border:none; 添加这个属性是为了什么呢? 3.以后会多一些注意的! 谢谢老师
    2018-05-21 19:40:51
好帮手慕糖 2018-05-22 09:20:31

你好,border: none;属性是设置元素没有边框哦。从效果图上看,“登录”这个按钮是没有边框的,所以可以设置一下。

祝学习愉快~


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

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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