2-11练习,求解

2-11练习,求解

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>五月十六日</title>

<style type="text/css">

  *{

   margin: 0;

   padding:0;

  }

       .daohanglan{

        width:100%;

        height:100px;

        position:fixed;

        background:black;

       }

       .pic{

        width:auto;

        height:100px;

        float:left;

       }

       .yemianzhuti{

        padding-top:100px;

       }

       div ul{

        list-style:none;

       }

       .list{

         width:70px;

         height:100px;

         text-align:center;

         line-height:100px;

         float:right;

         color:white;

       }

       .yemianzhuti{

        min-height:1000px;

        width:100%;

        background:#afeeee;

       }

       .left{

         width:30%;

         height:1000px;

         float:left;

         position: relative;


       }

       .middle{

         width:25%;

         height:1000px;

         /*border:5% solid orange;*/

         float:left;

         position: relative;

       }

       .right{

         width:40%;

         height:1000px;

         float:right;

         position: relative;

         

       }

       .kecheng{

        font-family: sans-serif;

        font-size:2em;

        line-height:3em;


       }

       p{

        line-height: 3em;

       }

       .kechengtuijian{

        position: absolute;

        left:20%;

        top:20%;

       }

       .xiangguankecheng{

        position: absolute;

        left: 20%;

        top:20%;

       }

       input{

        width: 300px;

        height:24px;

       }

       /*.tijiao{

        color:red;

       }*/

       .biaodan{

        position:absolute;

        left:20%;

        top: 20%

       }

       .biaodan p{

        font-size:2em;

       }

        .yejiao{

    width:100%;

    height:100px;

    background:black;

    position:relative;

      left:0;

    bottom:0;

   }

   td{

    width:300px;

    height:100px;

    line-height:100px;

    text-align:center;

    color:white;}

   span{

    display:block;

    width:65px;

            height:1em;

            line-height: 1em;

    background:orange;

   }

</style> 

</head>

<body>

 

<!-- 导航栏 -->

<div class="daohanglan">

<!-- 慕课网图片 -->

  <div class="pic"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"></div>

  <!-- 导航项 -->

  <div class="daohangxiang">

     <ul>

       <li class="list">手记</li>

       <li class="list">猿问</li>

       <li class="list">实战</li>

       <li class="list">职业路径</li>

       <li class="list">课程</li>

     </ul>

  </div>

</div>

<!-- 页面主体 -->

<div class="yemianzhuti">

<!-- 左侧 -->

  <div class="left">

         <div class="kechengtuijian">

           <p class="kecheng">课程推荐</p>

           <p><span>职业路径</span> HTML与css3实现动态页面</p>

           <p><span>职业路径</span> HTML与css3实现动态页面</p>

           <p><span>职业路径</span> HTML与css3实现动态页面</p>

           <p><span>职业路径</span> HTML与css3实现动态页面</p>

           <p><span>职业路径</span> HTML与css3实现动态页面</p>

         </div>

  </div>

  <!-- 中间 -->

  <div class="middle">

           <div class="xiangguankecheng">

              <p class="kecheng">相关课程</p>

              <p>HTML&nbsp;&nbsp;css&nbsp;&nbsp;javascript</p>

              <p>HTML&nbsp;&nbsp;css&nbsp;&nbsp;javascript</p>

              <p>HTML&nbsp;&nbsp;css&nbsp;&nbsp;javascript</p>

           </div>

  </div>

  <!-- 右侧 -->

  <div class="right">

    <div class="biaodan">

            <p>登录</p>

            <form>

             <input type="text" name="yonghuming" placeholder="请输入用户名">

             <input type="password" name="mima" placeholder="请输入6~12位密码">

              <div class="tijiao"><input type="button" name="tijiao" value="提交" ></div>

            </form>

    </div>

  </div>

</div>

<!-- 页脚 -->

<div class="yejiao">

  <table >

 <tr>

    <td></td>

    <td>网页首页</td>

    <td>企业合作</td>

    <td>联系我们</td>

    <td>友情链接</td>

    <td></td>

 </tr>

</table>

</div>

</body>

</html>

你好,3个问题

1:如何使的导航栏上的文字间距一样呢?

2:右边的表单,如何使按钮变成红色呢?我使用css background属性设置颜色不能实现效果。

3:如何使中间和右边设置一条橘色边框呢?我 设置中间的div{border-right:5% solid orange}未实现效果。

请赐教,谢谢。



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

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

2回答
海纳百川_ 2017-05-16 19:36:50

html代码中没有与css相对应的类名。把你的html代码在发一遍吧。只要body标签里面的。第一个问题现在就能给你回复:使用padding设置间距

  • 你好,类名已有,重发在提问的代码里,不知为啥,我从sublime把代码复制到提问框,类名就不见了。。。
    2017-05-17 10:25:03
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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