2-11的练习题 右边的部分？

2-11的练习题 右边的部分？

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    *{margin:0;padding:0;}

    .header{width:100%;height:100px;background-color:black;font-size:15px;}

    .logo{float:left;height:100px;}

    .nav{float:right;color:white;}

    .nav ul li{float:left;list-style-type:none;width:60px;height:100px;line-height:100px;}

    

    .main{width:100%;height:800px;background-color:#6cf; font-size:10px;}

    .main a{text-decoration:none;color:black;}

    .left{width:30%;height:800px;background-color:#6cf;float:left;position:relative;}

   .content1{width:240px;height:600px;top:100px;left:50px;position:absolute;}

    .content1 .word{background:pink;line-height:40px;}

    

    .right{width:40%;height:800px;float:right;position:relative;}

    .content3{width:240px;height:600px;position:absolute;top:100px;left:50px;}

    .myName{width:160px;background-color:#fff;height:50px;margin-top:20px;overflow:hidden;}

    .pass{width:160px;background-color:#fff;height:50px;margin-top:20px;overflow:hidden;}

    .submitBtn{background-color:red;color:#fff;text-align:center;height:50px;line-height:50px;width:160px;margin-top:20px;}

    

    .middle{width:30%;height:800px;float:left;position:relative;}

    .content2{width:240px;height:600px;position:absolute;top:90px;left:80px;line-height:40px;}

  

  .footer{width:100%;height:100px;background-color:black;}

  .nav-li{width:600px;margin:0 auto;}

  .footer ul li{float:left;list-style-type:none;width:100px;height:100px;line-height:100px;}

   ul li a{color:white;text-decoration:none;}

  </style>

</head>

<body>

    <!--页头-->

    <div class="header">

        <div class="logo">

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

        </div>

        <div class="nav">

            <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>

            </ul>

        </div>

    </div>

    

    <!--主体-->

    <div class="main">

        <div class="left">

           <div class="content1">

             <h2>课程推荐</h2>

              <div>

                <span class="word">职业路径</span><span>��<a href="#">HTML5与CSS3实现动态网页</a></span>

              </div>

              <div>

                <span class="word">职业路径</span><span>��<a href="#">零基础入门Android语法与界面</a></span>

              </div>

              <div>

                <span class="word">职业路径</span><span>��<a href="#">HTML5与CSS3实现动态网页</a></span>

              </div>

              <div>

                <span class="word">职业路径</span><span>��<a href="#">零基础入门Android语法与界面</a></span>

              </div>

              <div>

                <span class="word">职业路径</span><span>��<a href="#">java入门开发</a></span>

              </div>

            </div>  

        </div>

        

        <div class="middle">

            <div class="content2">

             <h2>相关课题</h2>

                 <div>

                     <span><a href="#">HTML</a>��<a href="#">CSS</a>��<a href="#">javascript</a></span>

                 </div>

                 <div>

                     <span><a href="#">CSS3</a>��<a href="#">HTML5</a>��<a href="#">Jquery</a></span>

                 </div>

                 <div>

                     <span><a href="#">移动端基础</a>��<a href="#">移动端app开发</a></span>

                 </div>

            </div>  

        </div>

        

        <div class="right">

            <div class="content3">

               <h2>登录</h2>

               <form method="post" action="save/php">

               <div class="myName">

                   <input type="text" name="myName" placeholder="请输入登录的邮箱/手机号"/>

               </div>

               <div class="pass">

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

               </div>

               <div class="submitBtn">

                <input type="submit" value="登录">

               </div>

               </form>

            </div>

        </div>

    </div>


    <!--页脚-->

    <div class="footer">

        <div class="nav-li">

           <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>    

    </div>

</body>

</html>
梧桐呓语 2017-09-14
源自：CSS网页布局基础   2-12 编程练习
8
收起

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

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

1回答
卡布琦诺 2017-09-14 16:02:22

“2-11的练习题 右边的部分？”请问右侧咋滴了咩？你要详细的描述清楚你想要问什么问题哦~祝学习愉快！

0
收起回答
  • 提问者 梧桐呓语 #1
    右边的输入框什么的样式和给的页面图不一致，做不来这个，input怎么设置样式？
    2017-09-14 16:30:53
  • 卡布琦诺 回复 提问者 梧桐呓语 #2
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type="text"]{ width:200px; height:30px; /*去掉默认边框，默认边框线不好看*/ border:none; /*自定义设置边框*/ border:1px solid #ccc; } input[type="password"]{ width:200px; height:30px; /*去掉默认边框，默认边框线不好看*/ border:none; /*自定义设置边框*/ border:1px solid #ccc; } input[type="submit"]{ width:200px; height:30px; /*去掉默认边框，默认边框线不好看*/ border:none; /*自定义设置边框*/ border:1px solid red; background:red; } </style> </head> <body> <input type="text" name=""> <input type="password" name=""> <input type="submit" name=""> </body> </html>祝学习愉快！
    2017-09-14 17:02:36
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

2-11练习题提交
16 0 3
老师怎么把右边的部分往下移动啊，我移不动了。内边距和外边距具体在哪种情况下用好啊
14 0 4
2-11编程练习
16 0 2
2-6 编程练习的第一个答案
139 1 10
！！！！！！！！急！！我的2-11选择题提交了！但是显示正在学习！没法进入下一章！！
24 0 6

登录后可查看更多问答，登录/注册

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

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

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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