3-3編程練習

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>3-3 編程練習</title>
  <style type="text/css">
    /*此处写代码*/
    *{padding:0;margin:0;}
    
    .logo{width:100%;height:100px;background:#333;float:left;}
    .nav{width:500px;height:100px;}
     .nav ul {position:absolute;top:0px;left:900px;list-style:none;color:#fff;}
     .nav ul li{float:left;padding-left:40px;line-height:100px;font-size: 20px;}
     .conatiner{width:100%;height:1000px;}
     .left{width:25%;height:1000px;background:#00CCCC;float:left;}
     .right{width:55%;height:1000px;background:pink;float:left;}
     .right img{margin-top:150px;margin-left: 90px;}

     .leftcont{position:absolute;top:200px;left:5px;margin:30px;}
     .leftcont span{background:pink;}
     .leftcont p{margin:20px;}
     
     .footer{background:black;width:100%;height:100px;bottom: 1100px;overflow: auto;color:#fff;}
     .footer ul{width:100%;list-style:none;line-height: 100px;font-size:20px;}
     .footer ul li{float:left;margin-left:120px;}
  
   
     .loginwd{font-size:20px;margin-left:100px;margin-top:135px;}
     .login{width: 20%;height:1000px;background:#00CCCC;float:right;left: 900px;top:500px;}
     div input{width: 250px;height: 30px;margin:5px;margin-left:20px;}
    .loginbutton input{height:50px;background:red;color:#fff;font-size: 20px}

    a:visited{color:#fff;}
    a:hover {color:orange;}
    
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="main">
  <!--logo-->
  <div class="logo">
      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
       
  </div>
  <!--導航-->
  <div class="nav">
      <ul>
         <a href="#"><li>課程</li></a>
         <a href="#"><li>職業路徑</li></a> 
         <a href="#"><li>實戰</li></a> 
         <a href="#"><li>猿問</li></a> 
         <a href="#"><li>手記</li></a> 
      </ul>
  </div>
   
  <!--主體-->
  <div class="container">
      <!--左側內容-->
      <div class="left">
          <div class="leftcont">
              <p>課程推薦</p>
               
<p><span>職業路徑</span>   HTML5與CCS3實現動態網頁</p>
<p><span>職業路徑</span>  零基礎入門Android語法與界面</p>
<p><span>職業路徑</span>  IOS基礎語法與常用控件</p>
<p><span>職業路徑</span> PHP入門開發</p>
<p><span>職業路徑</span>  JAVA入門開發</p>
          </div> 
           
      </div>
       
      <!--右側內容-->
      <div class="right">
        <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">



      </div>
     

        
      </div>


      
  </div>
  
   

   <!-- login -->
    <div class="login">
      <p class="loginwd">登錄</p>
      <div><input type="text" name="username" placeholder="請輸入登錄郵箱/手機號"></div>
      <div><input type="password" name="pw" placeholder="6-16位密碼，區分大小寫，不能用空格"></div>
      <div class="loginbutton"><input type="button" name="login" value="登錄"></div>



    </div>

   
  <!--footer-->
  <div class="footer">
      <ul>
         <a href="#"><li>網站首頁</li></a>
         <a href="#"><li>企業合作</li></a>
         <a href="#"><li> 人才招聘</li></a>
         <a href="#"><li>聯繫我們</li></a>
         <a href="#"><li>常見問題</li></a>
         <a href="#"><li>友情鏈接</li></a> 
      </ul>
     
  </div>
  </div>
</body>
</html>

慕数据3203843 2019-09-21

源自：CSS网页布局基础 3-3 编程练习

收起

3回答

好帮手慕言回答被采纳获得+3积分 2019-09-23 11:16:28

同学你好，可以参考“我学习太差被关起来了”同学的思路。

#footerList > li是对li元素设置样式

我学习太差被关起来了”和“萌神丶kin”同学主动帮助其他小伙伴，棒棒哒，给你们点赞。

祝学习愉快~

收起回答

我学习太差被关起来了 2019-09-22 09:47:21

设置min-width可以解决溢出问题。你可以参考一下我的作业：缩小浏览器窗口，页面布局不会发生错乱。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <title>3-3-编程练习</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <base target="_blank">
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }

            body
            {
                min-width: 1200px;
                font-family: "微软雅黑"; /*全局字体*/
            }

            li
            {list-style-type: none;}

            a
            {text-decoration: none;}

            header
            {
                position: fixed; /*固定定位*/
                top: 0;
                width: 100%;
                min-width: 1000px;
                height: 70px;
                background-color: #333;
                z-index: 99999; /*防止被下面的内容遮挡*/
            }

            h1,
            h1 > a,
            h1 > a > img
            {
                float: left;
                width: 210px;
                height: 70px;
                max-height: 100%; /*防止高度超出父元素*/
            }

            #navList /*导航列表*/
            {float: right;}

            #navList > li /*导航列表项*/
            {
                display: inline-block;
                margin: 0 30px;
                height: 70px;
                line-height: 70px;
                font-size: 20px;
            }

            .topic /*专栏*/
            {position: relative;}

            .topic:after /*专栏后面的文字*/
            {
                position: absolute;
                content: "N";
                top: -30px;
                color: #F00;
            }

            #navList a:link,
            #navList a:visited,
            #navList a:active
            {color: #FFF;}

            #navList a:hover
            {color: orange;}

            article /*网页主体*/
            {
                overflow: hidden;
                padding: 0 350px;
            }

            #center /*圣杯布局中间部分*/
            {
                position: relative;
                float: left;
                width: 100%;
                height: 1200px;
                background-color: #FFC0CC;
            }

            #left /*圣杯布局左边部分*/
            {
                position: relative;
                float: left;
                margin-left: -100%;
                left: -350px;
                width: 350px;
                height: 1200px;
                background-color: #FFEFDD;
            }

            #right /*圣杯布局右边部分*/
            {
                position: relative;
                float: left;
                margin-left: -350px;
                right: -350px;
                width: 350px;
                height: 1200px;
                background-color: #ADD8EE;
            }

            #center > img /*中间部分的图片*/
            {
                position: absolute;
                left: 0;
                right: 0; /*拔河效应实现水平居中*/
                display: inline-block;
                margin: 250px auto;
                width: 50%;
            }

            #left > #recommendedCourse,
            #right > #login /*左右部分的内容定位*/
            {
                margin: 250px auto auto 20px;
                width: 100%;
            }

            h2 /*标题样式*/
            {font-size: 30px;}

            #recommendedCourse > p,
            #login > p /*段落样式*/
            {
                margin: 30px auto;
                font-size: 16px;
            }

            .career /*左边部分的“职业路径”样式*/
            {
                margin-right: 16px;
                background-color: #F99;
            }

            #recommendedCourse a:link,
            #recommendedCourse a:visited,
            #recommendedCourse a:active
            {color: #000;}

            #recommendedCourse a:hover
            {color: deeppink;}

            #login input /*输入框样式*/
            {
                width: 80%;
                height: 40px;
                font-size: 16px;
            }

            button /*登录按钮*/
            {
                width: 80%;
                height: 40px;
                border-radius: 20px; /*CSS3圆角属性*/
                border: none;
                font: 20px "微软雅黑";
                color: #FFF;
                background-color: #F00;
                cursor: pointer;
            }

            footer /*网页脚部*/
            {
                position: fixed;
                bottom: 0;
                width: 100%;
                height: 60px;
                background-color: #333;
            }

            #footerList /*脚部列表*/
            {
                margin: 0 auto;
                width: 600px;
            }

            #footerList > li /*脚部列表项*/
            {
                display: inline-block;
                margin: 0 20px;
                height: 60px;
                line-height: 60px;
                font-size: 14px;
            }

            #footerList a:link,
            #footerList a:visited,
            #footerList a:active
            {color: #FFF;}

            #footerList a:hover
            {color: cyan;}
        </style>
   </head>

   <body>
      <!--网页头部header-->
      <header>
         <!--logo图放在h1标签-->
         <h1>
            <a href="https://www.imooc.com/">
               <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
            </a>
         </h1>
         <ul id="navList"> <!--导航列表-->
            <li><a href="https://www.imooc.com/course/list">免费课程</a></li>
            <li><a href="https://coding.imooc.com/">实战</a></li>
            <li><a href="https://class.imooc.com/">就业班</a></li>
            <li><a href="https://www.imooc.com/read" class="topic">专栏</a></li>
            <li><a href="https://www.imooc.com/wenda">猿问</a></li>
            <li><a href="https://www.imooc.com/article">手记</a></li>
         </ul>
      </header>

        <!--网页主体内容article：圣杯布局-->
      <article>
          <!--先渲染中间部分center-->
         <section id="center">
            <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
         </section>

            <!--左边部分-->
         <section id="left">
            <div id="recommendedCourse">
               <h2>推荐课程</h2>
               <p><span class="career">职业路径</span><a href="https://study.163.com/course/courseMain.htm?courseId=1006399046">HTML5与CSS3网页开发</a></p>
               <p><span class="career">职业路径</span><a href="https://blog.csdn.net/guolin_blog/article/details/26365913">Android零基础入门</a></p>
               <p><span class="career">职业路径</span><a href="https://www.imooc.com/learn/420">IOS零基础入门</a></p>
               <p><span class="career">职业路径</span><a href="https://www.imooc.com/learn/54">PHP开发入门</a></p>
               <p><span class="career">职业路径</span><a href="https://www.imooc.com/learn/85">Java开发入门</a></p>
            </div>
         </section>

            <!--右边部分-->
         <section id="right"> <!--登陆表单-->
            <form id="login" action="index.html" method="post" enctype="application/x-www-form-urlencoded">
               <h2>登录</h2>
               <p><input type="text" id="account" placeholder="请输入登陆邮箱/手机号"></p>
               <p><input type="text" id="password" placeholder="请输入6-16位密码，区分大小写"></p>
               <button>登&emsp;录</button>
            </form>
         </section>
      </article>

        <!--网页脚部footer-->
      <footer>
         <ul id="footerList">
            <li><a href="https://www.imooc.com/">网站首页</a></li>
            <li><a href="https://www.imooc.com/index/companytrain">企业合作</a></li>
            <li><a href="https://www.imooc.com/about/job">人才招聘</a></li>
            <li><a href="https://www.imooc.com/about/contact">联系我们</a></li>
            <li><a href="https://www.imooc.com/help">帮助中心</a></li>
            <li><a href="https://www.imooc.com/about/friendly">友情链接</a></li>
         </ul>
      </footer>
   </body>

</html>

收起回答