2-11练习,请老师检查

2-11练习,请老师检查

求解:请问课程推荐几个字为什么没有和下方内容对齐呢?还有登录框点击后为什么文字没有消失呢?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    body{

        margin:0;

        padding:0;

        font-family:"微软雅黑";

        background:rgb(152,211,215);

    }

    .head{

        width:100%;

        height:50px;

        background:black;

        position:fixed;

    }

    .logo{

        float:left;

    }

    .logo img{

        width:150px;

        cursor:pointer;

    }

    .nav{

        float:right;

    }

    .nav li{

        display:inline-block;

        color:white;

        margin-right:36px;

        cursor: pointer;

    }

    .left{

        width:30%;

        float:left;

        padding-top:100px;

        margin-left:150px;

    }

    .recommend li{

        list-style-type:none;

        line-height:2.5em;

    }

    span{

        background:pink;

        margin-right:1.5em;

    }

    .middle{

        width:25%;

        float:left;

        padding-top:100px;

    }

    .right{

        width:30%;

        padding-top:100px;

        float:right;

    }

    input{

        margin-bottom:15px;

        display:block;

    }

    .footer{

      width:100%;

      height:50px;

      background:black;

      position:fixed;

      bottom:0;

    }

    .link{

      text-align:center;

    }

    .link li{

      display:inline-block;

      color:white;

      margin-right:24px;

      font-size:13px;

      cursor:pointer;

    }

  </style>

</head>

<body>

    <div class="head">

        <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="content">

        <div class="left">

            <h3>课程推荐</h3>

            <ul class="recommend">

                <li><span>职业路径</span>HTML5与CSS3实现动态网页</li>

                <li><span>职业路径</span>零基础入门Android语法与界面</li>

                <li><span>职业路径</span>iOS基础语法与常用控件</li>

                <li><span>职业路径</span>PHP入门开发</li>

                <li><span>职业路径</span>JAVA入门开发</li>

            </ul>

        </div>

        <div class="middle">

            <h3>相关课程</h3>

            <div class="related">

                <p>HTML&nbsp;&nbsp;&nbsp;&nbsp;CSS&nbsp;&nbsp;&nbsp;&nbsp;JavaScript</p>

                <p>HTML5&nbsp;&nbsp;&nbsp;&nbsp;CSS3&nbsp;&nbsp;&nbsp;&nbsp;Jquery</p>

                <p>移动端基础&nbsp;&nbsp;&nbsp;&nbsp;移动端APP开发</p>

            </div>

        </div>

        <div class="right">

            <h3>登录</h3>

            <input type="textarea" placeholder="请输入登录邮箱/手机号" style="height:30px;width:150px;border:none;font-size:8px">

            <input type="textarea" placeholder="6-16位密码,区分大小写,不能用空格" style="height:30px;width:150px;border:none;font-size:8px">

            <input type="button" value="登录" style="color:white;background:red;width:150px;height:30px;font-size:16px;border:none">

        </div>

        <div class="footer">

        <div class="link">

            <ul>

                <li>网站首页</li>

                <li>企业合作</li>

                <li>人才招聘</li>

                <li>联系我们</li>

                <li>常见问题</li>

                <li>友情链接</li>

            </ul>

        </div>

    </div>

    </div>

</body>

</html>


正在回答 回答被采纳积分+1

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

2回答
小于飞飞 2017-12-15 10:01:51

第一个问题:上面的同学说的正确,因为ul有默认的{padding样式,去掉就可以了。

第二个问题:登录框点击后为什么文字没有消失,里面的文字是通过placeholder设置的预提示文字,只有在输入内容后,才消失。

动手实践,加油。

慕仔4242357 2017-12-15 00:49:29

第一个问题是 ul有个左内边距 加个.recommend{padding-left: 0;}就行了  以后的话哪不对 去网页右键检查自己看就行了

第二的话登陆点击了好像是不会消失文字  这个我也不清楚

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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