定位4-3编程练习

来源：4-2 侧边栏导航跟随案例

慕丝740390

2017-09-24 20:00:50

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>4-3定位编程练习</title>
   <style type="text/css">
        *{margin:0px;
          padding:0px;}
       .mooc{width:100%;
               height:2400px;
               background:url("imooc.png") center top no-repeat;}
       .content{width:180px;
                 height:200px;
                 position:fixed;
                 left:0px;
                 top:50%;
                 margin-top:-100px;
                 font-family:"微软雅黑";
                float:left;
           background-image:linear-gradient(to bottom,rgb(255,46,81),rgb(255,123,144),rgb(254,166,180));}
       .list{width:160px;
              height:50px;
             font-size:30px;
             color:#FFF;

            padding-left:20px;
            line-height:40px;}
       .list1{width:160px;
              height:40px;
             font-size:15px;
             color:#FFF;
             padding-left:20px;

             line-height:40px;}


        .content1{width:180px;
                 height:200px;
                 position:fixed;
                 right:0px;
                 top:50%;
                 margin-top:-100px;
                 font-family:"微软雅黑";
                float:right;
             background-image:linear-gradient(to bottom,rgb(35,162,220),rgb(113,194,232),rgb(151,212,238));}
        .list3{width:150px;
              height:50px;
             font-size:30px;
             color:#FFF;

             padding-left:30px;
            }
       .list4{width:150px;
              height:40px;
             font-size:15px;
             color:#FFF;

            padding-left:30px;
            line-height:40px;}



   </style>
</head>
<body>
   <div class="mooc">
   <div class="content">
       <div class="list">Web</div>
       <div class="list">前端工程师</div>
       <div class="list1">职业路径 &gt</div>


   </div>
   <div class="content1">
       <div class="list3">Java</div>
       <div class="list3">工程师</div>
       <div class="list4">职业路径 &gt</div>

   </div>
   </div>
</body>
</html>