├── mission1_1
    ├── img
    │   └── pic.jpg
    └── index.html
├── mission1_2
    ├── img
    │   ├── pic.jpg
    │   └── baidu-logo.png
    ├── css
    │   └── index.css
    └── index.html
├── mission1_3
    ├── img
    │   ├── pic.jpg
    │   ├── member1.jpg
    │   ├── member2.jpg
    │   ├── member3.jpg
    │   └── member4.jpg
    ├── css
    │   └── index.css
    └── index.html
├── mission1_5
    ├── img
    │   ├── pic.jpg
    │   └── baidu-logo.png
    ├── css
    │   └── index.css
    └── index.html
├── mission1_6
    ├── img
    │   ├── pic1.png
    │   ├── pic2.png
    │   ├── pic3.png
    │   └── triangle.png
    ├── index.html
    └── css
    │   └── index.css
├── README.md
├── mission2_13
    └── index.html
└── mission1_4
    └── index.html


/mission1_1/img/pic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_1/img/pic.jpg


--------------------------------------------------------------------------------
/mission1_2/img/pic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_2/img/pic.jpg


--------------------------------------------------------------------------------
/mission1_3/img/pic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_3/img/pic.jpg


--------------------------------------------------------------------------------
/mission1_5/img/pic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_5/img/pic.jpg


--------------------------------------------------------------------------------
/mission1_6/img/pic1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_6/img/pic1.png


--------------------------------------------------------------------------------
/mission1_6/img/pic2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_6/img/pic2.png


--------------------------------------------------------------------------------
/mission1_6/img/pic3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_6/img/pic3.png


--------------------------------------------------------------------------------
/mission1_3/img/member1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_3/img/member1.jpg


--------------------------------------------------------------------------------
/mission1_3/img/member2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_3/img/member2.jpg


--------------------------------------------------------------------------------
/mission1_3/img/member3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_3/img/member3.jpg


--------------------------------------------------------------------------------
/mission1_3/img/member4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_3/img/member4.jpg


--------------------------------------------------------------------------------
/mission1_2/img/baidu-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_2/img/baidu-logo.png


--------------------------------------------------------------------------------
/mission1_5/img/baidu-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_5/img/baidu-logo.png


--------------------------------------------------------------------------------
/mission1_6/img/triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocelynthink/Baidu_ife/master/mission1_6/img/triangle.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 百度前端技术学院任务提交代码及笔记
 2 | 
 3 | ### Mission1_1
 4 | 
 5 | #### About
 6 | 
 7 | 还是决定从0基础开始做任务，通过这第一个最简单的连CSS都没有的任务，复习了基础知识，看了大家的代码，知道了许多之前不知道的标签，发现大家每个人写的都不一样，都有自己的特色，或许这就是前端的魅力吧。
 8 | 
 9 | #### Label and Point
10 | 1.除了之前学习的有序列表`<ol>`和无序列表`<ul>`，还知道了自定义列表`<dl>`,自定义列表以`<dl>`标签开始。
11 | 每个自定义列表项以`<dt>`开始。每个自定义列表项的定义以`<dd>`开始.
12 |   ```html
13 |   <dl>
14 |     <dt>计算机</dt>
15 |     <dd>用来计算的仪器 ... ...</dd>
16 |     <dt>显示器</dt>
17 |     <dd>以视觉方式显示信息的装置 ... ...</dd>
18 |   </dl>
19 |   ```
20 | 2.Html5语义化标签的使用，如`<nav>`标签，`<aside>`标签，`<time>`标签,`<article>`标签，`<header>`标签，以及`<figure>`,`<figcaption>`标签等.
21 | 
22 | 3.利用 maxlength 和 minlength 属性来控制 input 标签输入的最大长度及最小长度.
23 | ```html
24 | <input type="password" minlength="6" maxlength="16"/>
25 | ```
26 | 
27 | 4.利用pattern属性匹配正则表达式来验证输入格式.
28 | ```html
29 | <input type="password" pattern="[A-Za-z0-9\-]*" placeholder="这是一个只能输入英文字母和数字的密码输入框"/>
30 | ```
31 | 


--------------------------------------------------------------------------------
/mission1_3/css/index.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |   padding: 20px;
 3 |   font-family: "微软雅黑";
 4 |   font-size: 15px;
 5 | }
 6 | h2{
 7 |   margin: 0px;
 8 | }
 9 | .main_wrapper{
10 |   margin: 0 auto;
11 |   padding: 20px;
12 |   background: #eee;
13 |   border: 1px solid #999;
14 |   overflow: auto;
15 |   min-width: 600px;
16 | }
17 | .left{
18 |   float: left;
19 |   padding: 20px;
20 |   width: 160px;
21 |   background: #fff;
22 |   border: 1px solid #999;
23 | }
24 | .team_logo{
25 |   float: left;
26 | }
27 | .team_name{
28 |   width: 180px;
29 |   font-size: 13px;
30 |   font-weight: bold;
31 |   text-align: center;
32 | }
33 | .right{
34 |   width: 120px;
35 |   float: right;
36 |   background: #fff;
37 |   border: 1px solid #999;
38 | }
39 | .members_logo{
40 |   background: #fff;
41 |   display: block;
42 |   margin: 20px;
43 |   border: 1px solid #999;
44 | }
45 | .middle{
46 |   padding: 20px;
47 |   margin-left: 220px;
48 |   margin-right: 140px;
49 |   background: #fff;
50 |   border: 1px solid #999;
51 | }
52 | 


--------------------------------------------------------------------------------
/mission2_13/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>IFE JavaScript Task 01</title>
 6 |   </head>
 7 | <body>
 8 | 
 9 |   <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
10 |   <button id="button">确认填写</button>
11 | 
12 |   <div>您输入的值是：<span id="aqi-display">尚无录入</span></div>
13 | 
14 | <script type="text/javascript">
15 | 
16 | (function() {
17 |   /*
18 |   在注释下方写下代码
19 |   给按钮button绑定一个点击事件
20 |   在事件处理函数中
21 |   获取aqi-input输入的值，并显示在aqi-display中
22 |   */
23 |   var inputValue = document.getElementById("aqi-input");
24 |   var clickButton = document.getElementById("button");
25 |   var inputText = document.getElementById("aqi-display");
26 | 
27 |   clickButton.onclick = function(){
28 |     if (inputValue.value) {
29 |       inputText.innerHTML = inputValue.value;
30 |     } else {
31 |       alert("输入呀！");
32 |       inputText.innerHTML = "尚无录入";
33 |     }
34 |   }
35 | 
36 | })();
37 | 
38 | </script>
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/mission1_4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Mission1_4</title>
 6 |     <style media="screen">
 7 |     *{
 8 |       margin: 0;
 9 |       padding: 0;
10 |     }
11 |     #center{
12 |       position: absolute;
13 |       top: 50%;
14 |       left: 50%;
15 |       width: 400px;
16 |       height:200px;
17 |       margin: -100px -200px;
18 |       background: #ccc;
19 |     }
20 |     #left,#right {
21 |       position:absolute;
22 |     	border-radius: 50px;
23 |     	border:50px solid transparent;
24 |     }
25 |     #left {
26 |     	top:-50px;
27 |     	left:-50px;
28 |     	border-bottom-color:#fc0;
29 |     	transform:rotate(-45deg);
30 |     }
31 | 
32 |     #right {
33 |     	bottom:-50px;
34 |     	right:-50px;
35 |     	border-top-color:#fc0;
36 |     	transform:rotate(-45deg);
37 |     }
38 |     </style>
39 |   </head>
40 |   <body>
41 |     <div id="center">
42 |       <div id="left"></div>
43 |       <div id="right"></div>
44 |     </div>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/mission1_3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <link rel="stylesheet" href="css/index.css" media="screen" title="no title" charset="utf-8">
 6 |     <title>Mission1_3</title>
 7 |   </head>
 8 |   <body>
 9 |     <div class="main_wrapper">
10 |       <div class="left">
11 |         <img class="team_logo" src="img/pic.jpg" width="80px" height="80px"/>
12 |         <div class="team_name">红鲤鱼与绿鲤鱼与驴队</div>
13 |       </div>
14 |       <div class="right">
15 |         <img class="members_logo" src="img/member3.jpg" height="80px" width="80px"/>
16 |         <img class="members_logo" src="img/member4.jpg" height="80px" width="80px"/>
17 |         <img class="members_logo" src="img/member2.jpg" height="80px" width="80px"/>
18 |         <img class="members_logo" src="img/member1.jpg" height="80px" width="80px"/>
19 |       </div>
20 |       <div class="middle">
21 |         <h2>红鲤鱼与绿鲤鱼与驴队</h2>
22 |         <h3>团队介绍</h3>
23 |         <p>
24 |           我们是来自黑龙江大学计算机科学计算学院软件学院大二，大一的同学，身为学长的我带领着四个学妹
25 |           参加了这次百度前端技术学院。我自己的方向是后台的JavaEE，但是想通过参加这次技术培训，
26 |           多学习些前端的知识(顺便还能带带学妹们╭(●｀∀´●)╯)，其他队友都是刚开始学习前端，正好可以
27 |           通过这次0基础地学习，系统地学习前端知识~~
28 |         </p>
29 |         <h3>
30 |           队员介绍
31 |         </h3>
32 |         <p>
33 |           有时间再更新哈╭(′▽`)╭(′▽`)╯
34 |         </p>
35 |       </div>
36 |     </div>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/mission1_2/css/index.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |   font-family: "黑体";
  3 |   font-size: 14px;
  4 |   margin: 0px;
  5 |   border: 0px;
  6 |   background: #DEDEDE;
  7 | }
  8 | .header{
  9 |   height: 70px;
 10 |   width: 100%;
 11 |   background: #333333;
 12 |   display: table;
 13 |   vertical-align: middle;
 14 |   min-width: 700px;
 15 | }
 16 | .header span{
 17 |   display: table-cell;
 18 |   vertical-align: middle;
 19 |   height: 70px;
 20 | }
 21 | .header span img{
 22 |   margin-left: 35px;
 23 |   cursor: pointer;
 24 | }
 25 | nav ul{
 26 |   float: right;
 27 |   margin: 0px;
 28 |   padding: 0px;
 29 | }
 30 | nav ul li{
 31 |   line-height: 70px;
 32 |   float: left;
 33 |   margin-right: 20px;
 34 | }
 35 | nav ul li a{
 36 |   color: #FFF;
 37 |   text-decoration: none;
 38 | }
 39 | nav ul li a:hover{
 40 |   color:gray;
 41 | }
 42 | article,aside{
 43 |   margin-top: 40px;
 44 |   background-color: #FFF;
 45 |   margin-left: 40px;
 46 |   margin-right: 40px;
 47 |   padding: 20px;
 48 |   line-height: 1.5;
 49 |   margin-bottom: 20px;
 50 |   box-shadow: 2px 2px 2px #848484;
 51 |   min-width: 300px;
 52 | }
 53 | .color_gray{
 54 |   color: gray;
 55 | }
 56 | .text_indent{
 57 |   text-indent: 2em;
 58 | }
 59 | .no_list{
 60 |   list-style: none;
 61 | }
 62 | figure{
 63 |   height:180px;
 64 |   width: 240px;
 65 |   border: 1px solid #aaa;
 66 |   text-align: center;
 67 |   padding-bottom: 10px;
 68 |   margin-bottom: 20px;
 69 | }
 70 | .tab{
 71 |   height: 190px;
 72 | }
 73 | table{
 74 |   width: 100%;
 75 |   margin: 0 auto;
 76 |   border-color: #ccc;
 77 |   border-collapse:collapse;
 78 | }
 79 | thead{
 80 |   color: white;
 81 |   background: #333;
 82 | }
 83 | tfoot{
 84 |   background: #ccc;
 85 | }
 86 | tfoot{
 87 |   font-weight: bold;
 88 | }
 89 | ol>li{
 90 |   font-weight: bold;
 91 | }
 92 | .aside{
 93 |   padding-left: 10px;
 94 |   border-left: 3px #ccc solid;
 95 | }
 96 | form{
 97 |   width: 100%;
 98 |   min-width: 300px;
 99 | }
100 | form>div{
101 |   margin: 10px 0;
102 | }
103 | .bot{
104 |   vertical-align: bottom;
105 | }
106 | .input_message{
107 |   width: 30%;
108 |   text-align: right;
109 |   display:inline-block;
110 |   margin-right: 10px;
111 |   margin-top: 10px;
112 |   vertical-align: top;
113 |   margin-bottom: 0px;
114 | }
115 | .input_messages{
116 |   width: 30%;
117 |   text-align: right;
118 |   display:inline-block;
119 |   margin-right: 10px;
120 |   margin-top: 10px;
121 |   margin-bottom: 0px;
122 | }
123 | .demand{
124 |   font-size: 13px;
125 |   color: gray;
126 |   margin-left: 31.5%;
127 |   margin-top: 10px;
128 | }
129 | textarea{
130 |   margin-top: 10px;
131 |   width: 50%;
132 |   height: 100px;
133 | }
134 | input[type='submit']{
135 |   width: 100%;
136 |   height: 40px;
137 |   background: #3355D0;
138 |   color: #fff;
139 |   cursor: pointer;
140 |   border-radius: 8px;
141 |   border:1px solid #3355D0;
142 |   font-weight: 800;
143 | }
144 | footer{
145 |   width: 100%;
146 |   height: 60px;
147 |   text-align: center;
148 |   background: #000;
149 |   color: #fff;
150 |   font-weight: 500;
151 |   font-size: 14px;
152 |   line-height: 60px;
153 | }
154 | .name{
155 |   color: #fff;
156 |   cursor: pointer;
157 |   text-decoration: none;
158 | }
159 | 


--------------------------------------------------------------------------------
/mission1_5/css/index.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |   font-family: "黑体";
  3 |   font-size: 14px;
  4 |   margin: 0px;
  5 |   border: 0px;
  6 |   background: #DEDEDE;
  7 |   min-width: 750px;
  8 | }
  9 | .header{
 10 |   height: 70px;
 11 |   width: 100%;
 12 |   background: #333333;
 13 |   display: table;
 14 |   vertical-align: middle;
 15 | }
 16 | .header span{
 17 |   display: table-cell;
 18 |   vertical-align: middle;
 19 |   height: 70px;
 20 | }
 21 | .header span img{
 22 |   margin-left: 35px;
 23 |   cursor: pointer;
 24 | }
 25 | nav ul{
 26 |   float: right;
 27 |   margin: 0px;
 28 |   padding: 0px;
 29 | }
 30 | nav ul li{
 31 |   line-height: 70px;
 32 |   float: left;
 33 |   margin-right: 20px;
 34 | }
 35 | nav ul li a{
 36 |   color: #FFF;
 37 |   text-decoration: none;
 38 | }
 39 | nav ul li a:hover{
 40 |   color:gray;
 41 | }
 42 | article{
 43 |   margin-top: 40px;
 44 |   background-color: #FFF;
 45 |   margin-left: 40px;
 46 |   margin-right: 450px;
 47 |   padding: 20px;
 48 |   line-height: 1.5;
 49 |   margin-bottom: 20px;
 50 |   box-shadow: 2px 2px 2px #848484;
 51 | }
 52 | aside{
 53 |   background: #fff;
 54 |   float: right;
 55 |   width: 350px;
 56 |   margin-top: 40px;
 57 |   margin-right: 20px;
 58 |   padding: 20px;
 59 |   box-shadow: 2px 2px 2px #848484;
 60 | }
 61 | .color_gray{
 62 |   color: gray;
 63 | }
 64 | .text_indent{
 65 |   text-indent: 2em;
 66 | }
 67 | .no_list{
 68 |   list-style: none;
 69 | }
 70 | figure{
 71 |   height:120px;
 72 |   width: 140px;
 73 |   border: 1px solid #aaa;
 74 |   text-align: center;
 75 |   padding-bottom: 10px;
 76 |   margin-bottom: 20px;
 77 |   display: inline-block;
 78 | }
 79 | figcaption{
 80 |   padding: 5px;
 81 | }
 82 | table{
 83 |   width: 100%;
 84 |   margin: 0 auto;
 85 |   border-color: #ccc;
 86 |   border-collapse:collapse;
 87 | }
 88 | thead{
 89 |   color: white;
 90 |   background: #333;
 91 | }
 92 | tfoot{
 93 |   background: #ccc;
 94 | }
 95 | .aside{
 96 |   padding-left: 10px;
 97 |   border-left: 3px #ccc solid;
 98 | }
 99 | form{
100 |   width: 100%;
101 |   min-width: 300px;
102 | }
103 | form>div{
104 |   margin: 10px 0;
105 | }
106 | tfoot{
107 |   font-weight: bold;
108 | }
109 | ol>li{
110 |   font-weight: bold;
111 | }
112 | .bot{
113 |   vertical-align: bottom;
114 | }
115 | .input_message{
116 |   width: 30%;
117 |   text-align: right;
118 |   display:inline-block;
119 |   margin-right: 20px;
120 |   margin-top: 10px;
121 |   vertical-align: top;
122 |   margin-bottom: 0px;
123 | }
124 | .input_messages{
125 |   width: 30%;
126 |   text-align: right;
127 |   display:inline-block;
128 |   margin-right: 10px;
129 |   margin-top: 10px;
130 |   margin-bottom: 0px;
131 | }
132 | .demand{
133 |   font-size: 13px;
134 |   color: gray;
135 |   margin-left: 37.5%;
136 |   margin-top: 10px;
137 | }
138 | textarea{
139 |   margin-top: 10px;
140 |   width: 50%;
141 |   height: 100px;
142 |   margin-left: -7px;
143 | }
144 | input[type='submit']{
145 |   width: 100%;
146 |   height: 40px;
147 |   background: #3355D0;
148 |   color: #fff;
149 |   cursor: pointer;
150 |   border-radius: 8px;
151 |   border:1px solid #3355D0;
152 |   font-weight: 800;
153 | }
154 | footer{
155 |   width: 100%;
156 |   height: 60px;
157 |   text-align: center;
158 |   background: #000;
159 |   color: #fff;
160 |   font-weight: 500;
161 |   font-size: 14px;
162 |   line-height: 60px;
163 | }
164 | .name{
165 |   color: #fff;
166 |   cursor: pointer;
167 |   text-decoration: none;
168 | }
169 | 


--------------------------------------------------------------------------------
/mission1_6/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <link rel="stylesheet" href="css/index.css" media="screen" title="no title" charset="utf-8">
  6 |     <title>Mission1_6</title>
  7 |   </head>
  8 |   <body>
  9 |     <div class="main">
 10 |       <div class="top">
 11 |         <div class="top_bg">
 12 |           <span>ife.baidu.com</span>
 13 |         </div>
 14 |         <span class="top_time">2016.03</span>
 15 |       </div>
 16 |       <div class="middle">
 17 |         <div class="middle_left">
 18 |           <img src="img/pic1.png"/>
 19 |           <div class="cover_left"></div>
 20 |           <div class="cover_right"></div>
 21 |         </div>
 22 |         <div class="middle_right">
 23 |           <hr/>
 24 |           <p class="About">about</p>
 25 |           <p class="About" style="margin-top:-10px">technologe</p>
 26 |           <p class="detail">About technologe about technologe about technologe</p>
 27 |           <p class="seven">700</p>
 28 |           <p class="num">3.2</p>
 29 |           <p class="text_1">CSS</p>
 30 |           <p class="text_2">cssssccsccscssc</p>
 31 |         </div>
 32 |       </div>
 33 |       <div class="middle_text">
 34 |         <div class="le">
 35 |           <div class="what">What</div>
 36 |           <p>
 37 |             前端前端前端前端前端前端前端前端前端前
 38 |             端前端前端前端前端前端前端前端前端前端
 39 |             前端前端前端前端前端前端前端前端前端前
 40 |             端前端前端前端前端前端前端前端前端前端
 41 |             前端前端前端前端前端前端前端前端前端前
 42 |             端前端前端前端前端前端前端前端前端前端
 43 |             前端前端前端前端前端前端前端前端前端前
 44 |             端前端前端前端前端前端前端前端前端前端
 45 |             前端前端前端前端前端前端前端前端前端前
 46 |             端前端前端前端前端前端前端前端前端前端
 47 |             前端前端前端前端前端
 48 |           </p>
 49 |         </div>
 50 |         <div class="mi">
 51 |           <div class="when">When</div>
 52 |           <p>
 53 |             前端前端前端前端前端前端前端前端前
 54 |             端前端前端前端前端前端前端前端前端
 55 |             前端前端前端前端前端前端前端前端前
 56 |             端前端前端前端前端前端前端前端前端
 57 |             前端前端前端前端前端前端前端前端前
 58 |             端前端前端前端前端前端前端前端前端
 59 |             前端前端前端前端前端前端前端前端前
 60 |             端前端前端前端前端前端前端前端前端
 61 |             前端前端前端前端前端前端前端前端前
 62 |             端前端前端前端前端前端前端前端前端
 63 |             端前端前端前端前端前端前端
 64 |           </p>
 65 |         </div>
 66 |         <div class="ri">
 67 |           <div class="how">How</div>
 68 |           <p>
 69 |             前端前端前端前端前端前
 70 |             端前端前端前端前端前端
 71 |             前端前端前端前端前端前
 72 |             端前端前
 73 |           </p>
 74 |           <ul>
 75 |             <li>What--------
 76 |               <span>40%</span>
 77 |             </li>
 78 |             <li>What--------
 79 |               <span>30%</span>
 80 |             </li>
 81 |             <li>What--------
 82 |               <span>30%</span>
 83 |             </li>
 84 |           </ul>
 85 |         </div>
 86 |       </div>
 87 |       <div class="bottom">
 88 |         <div class="left">
 89 |           <div class="left_up">
 90 | 				    <p><span class="the">THE</span> TECHNOLOGE OF FRONT </p>
 91 | 				    <p><span class="front_end">前端技术领域</span></p>
 92 | 			    </div>
 93 |           <div class="left_bottom">
 94 | 				    <div class="le_text">
 95 | 					    <p>
 96 |                 前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前<img class="pic_2" src="img/pic3.png"/>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
 97 |               </p>
 98 |             </div>
 99 | 					    <p>前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
100 | 					    <p>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
101 | 			    </div>
102 |         </div>
103 |         <div class="right">
104 |           <div class="rim">
105 |             <img src="img/pic2.png"/>
106 |             <div class="rim_text">
107 |               <p>
108 |                 前端技术
109 |                 <span>前端技术前端技术</span>
110 |               </p>
111 |             </div>
112 |           </div>
113 |           <div class="r_text">
114 |             <div class="r_text_1">
115 |               <ul>
116 |                 <li>
117 |                   前端前端前端前端前端前端 ....................
118 |                   <span class="sp">前端</span>
119 |                 </li>
120 |                 <li>
121 |                   前端前端前端前端 ...........................
122 |                   <span class="sp">端前端</span>
123 |                 </li>
124 |                 <li>
125 |                   前端前端前端前端前端前端前端 ................
126 |                   <span class="sp">前端</span>
127 |                 </li>
128 |               </ul>
129 |             </div>
130 |             <div class="r_text_2">
131 |               <p class="zero">0</p>
132 |               <p class="nums">
133 |                 ONE TWO
134 |                 <br/>
135 |                 THREE FOUR FIVE
136 |               </p>
137 |               <p class="hello">
138 |                 hello world hello world
139 |                 <br/>
140 |                 hello world
141 |               </p>
142 |             </div>
143 |             <div class="r_text_3">
144 |               <p>
145 |                 <span class="pu_left">“</span>
146 |                 world hello world world hello world hello world hello world hello world hello world hello world hello
147 |                 <span class="pu_right">”</span>
148 |               </p>
149 |             </div>
150 |           </div>
151 |         </div>
152 |       </div>
153 |       <footer>
154 |         <p>ife.baidu.com</p>
155 |       </footer>
156 |     </div>
157 |   </body>
158 | </html>
159 | 


--------------------------------------------------------------------------------
/mission1_1/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <title>Mission1_1</title>
  6 |   </head>
  7 |   <body>
  8 |     <h1>网站一级标题</h1>
  9 |     <nav>
 10 |       <ul>
 11 |         <li>
 12 |           <a href="#article_1">导航链接一</a>
 13 |         </li>
 14 |         <li>
 15 |           <a href="#article_2">导航链接二</a>
 16 |         </li>
 17 |         <li>
 18 |           <a href="#article_3">导航链接三</a>
 19 |         </li>
 20 |         <li>
 21 |           <a href="#article_4">导航链接四</a>
 22 |         </li>
 23 |       </ul>
 24 |     </nav>
 25 |     <article>
 26 |       <header>
 27 |         <h2 id="article_1">文章一级标题</h2>
 28 |         <h2>文章二级标题</h2>
 29 |       </header>
 30 |       <p>
 31 |         <span>文章作者</span>
 32 |         <time>文章发布时间</time>
 33 |       </p>
 34 |       <p>
 35 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 36 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 37 |         <br/>换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 38 |         这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
 39 |         <a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，<b>这里有个粗体字</b>
 40 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 41 |         这是一个很长很长的段落，这是一个很长很长的段落。
 42 |       </p>
 43 |       <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
 44 |       <p>
 45 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 46 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
 47 |         这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，
 48 |         <a href="http://ife.baidu.com" target="_blank">这里有个链接点击后打开新窗口链接到http://ife.baidu.com</a>
 49 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 50 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
 51 |       </p>
 52 |     </article>
 53 |     <article>
 54 |       <header>
 55 |         <h2 id="article_2">另一篇文章的一级标题</h2>
 56 |         <h2>文章二级标题</h2>
 57 |       </header>
 58 |       <p>
 59 |         <span>文章作者</span>
 60 |         <time>文章发布时间</time>
 61 |       </p>
 62 |       <p>
 63 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 64 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 65 |         <br/>换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 66 |         这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
 67 |         <a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，<b>这里有个粗体字</b>
 68 |         这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 69 |         这是一个很长很长的段落，这是一个很长很长的段落。
 70 |       </p>
 71 |       <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
 72 |       <ul>
 73 |         <li>列表项目一</li>
 74 |         <li>列表项目二</li>
 75 |         <li>列表项目三</li>
 76 |       </ul>
 77 |       <h2>图片</h2>
 78 |       <figure>
 79 |         <figcaption>好看的图片</figcaption>
 80 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
 81 |       </figure>
 82 |       <figure>
 83 |         <figcaption>好看的图片</figcaption>
 84 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
 85 |       </figure>
 86 |       <figure>
 87 |         <figcaption>好看的图片</figcaption>
 88 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
 89 |       </figure>
 90 |       <figure>
 91 |         <figcaption>好看的图片</figcaption>
 92 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
 93 |       </figure>
 94 |       <figure>
 95 |         <figcaption>好看的图片</figcaption>
 96 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
 97 |       </figure>
 98 |       <figure>
 99 |         <figcaption>好看的图片</figcaption>
100 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
101 |       </figure>
102 |       <figure>
103 |         <figcaption>好看的图片</figcaption>
104 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
105 |       </figure>
106 |       <figure>
107 |         <figcaption>好看的图片</figcaption>
108 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
109 |       </figure>
110 |       <figure>
111 |         <figcaption>好看的图片</figcaption>
112 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
113 |       </figure>
114 |       <figure>
115 |         <figcaption>好看的图片</figcaption>
116 |           <img src="img/pic.jpg" width="280px" alt="好看的图片"/>
117 |       </figure>
118 |     </article>
119 |     <article>
120 |       <header>
121 |         <h2 id="article_3">最后一篇文章一级标题</h2>
122 |         <h2>文章二级标题</h2>
123 |       </header>
124 |       <p>
125 |         <span>文章作者</span>
126 |         <time>文章发布时间</time>
127 |       </p>
128 |       <ol>
129 |         <li>排名1</li>
130 |         <li>排名2</li>
131 |         <li>排名3</li>
132 |       </ol>
133 |       <p>下面是一个表格，给表格加了一个border="1"好让你看出是一个表格</p>
134 |       <table border="1">
135 |         <thead>
136 |           <tr>
137 |             <td>表头</td>
138 |             <td>表头</td>
139 |             <td>表头</td>
140 |           </tr>
141 |         </thead>
142 |         <tbody>
143 |           <tr>
144 |             <td>表内容单元格</td>
145 |             <td>表内容单元格</td>
146 |             <td><a href="#">操作</a></td>
147 |           </tr>
148 |           <tr>
149 |             <td>表内容单元格</td>
150 |             <td>表内容单元格</td>
151 |             <td><a href="#">操作</a></td>
152 |           </tr>
153 |           <tr>
154 |             <td>表内容单元格</td>
155 |             <td>表内容单元格</td>
156 |             <td><a href="#">操作</a></td>
157 |           </tr>
158 |           <tr>
159 |             <td>表内容单元格</td>
160 |             <td>表内容单元格</td>
161 |             <td><a href="#">操作</a></td>
162 |           </tr>
163 |         </tbody>
164 |         <tfoot>
165 |           <tr>
166 |             <td>总计</td>
167 |             <td colspan="2">1000</td>
168 |           </tr>
169 |         </tfoot>
170 |       </table>
171 |     </article>
172 |     <aside>
173 |       <h2 id="article_4">这里以后是一个侧栏，这是侧栏的标题</h2>
174 |       <h2>侧栏注册窗口标题</h2>
175 |       <form action="" method="post">
176 |         <p>请输入邮箱地址：<input type="email" placeholder="这是一个文本输入框"/></p>
177 |         <p>邮箱地址请按要求格式输入</p>
178 |         <p>
179 |           请输入密码：<input type="password" minlength="6" maxlength="16" pattern="[A-Za-z0-9\-]*" placeholder="这是一个文本输入框"/>
180 |           请重复输入密码：<input type="password" minlength="6" maxlength="16" pattern="[A-Za-z0-9\-]*" placeholder="这是一个文本输入框"/>
181 |         </p>
182 |         <p>密码请为6-16位英文数字</p>
183 |         <p>
184 |           性别：<input type="radio" name="sex" id="man" checked="checked"/>
185 |                 <label for="man">男</label>
186 |                 <input type="radio" name="sex" id="woman"/>
187 |                 <label for="woman">女</label>
188 |           城市：<select>
189 |                   <option value="BJ">北京</option>
190 |                   <option value="SH">上海</option>
191 |                   <option value="GZ">广州</option>
192 |                 </select>
193 |           爱好：<input type="checkbox" id="sport"/>
194 |                 <label for="sport">运动</label>
195 |                 <input type="checkbox" id="art"/>
196 |                 <label for="art">艺术</label>
197 |                 <input type="checkbox" id="science"/>
198 |                 <label for="science">科学</label>
199 |           个人描述：<textarea placeholder="这是一个多行输入框，输入您的个人描述"></textarea>
200 |           <input type="submit" value="确认提交"/>
201 |         </p>
202 |       </form>
203 |     </aside>
204 |     <footer>
205 |       <span>版权所有&copy; 小笼包<a href="#">@红鲤鱼与绿鲤鱼与驴队</a></span>
206 |     </footer>
207 |   </body>
208 | </html>
209 | 


--------------------------------------------------------------------------------
/mission1_5/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <link rel="stylesheet" href="css/index.css" media="screen" title="no title" charset="utf-8">
  6 |   <title>Mission1_5</title>
  7 | </head>
  8 | <body>
  9 | <header class="header">
 10 |       <span>
 11 |         <a href="#">
 12 |           <img src="img/baidu-logo.png" alt="index-logo"/>
 13 |         </a>
 14 |       </span>
 15 |   <nav>
 16 |     <ul>
 17 |       <li>
 18 |         <a href="#article_1">导航链接一</a>
 19 |       </li>
 20 |       <li>
 21 |         <a href="#article_2">导航链接二</a>
 22 |       </li>
 23 |       <li>
 24 |         <a href="#article_3">导航链接三</a>
 25 |       </li>
 26 |       <li>
 27 |         <a href="#article_4">导航链接四</a>
 28 |       </li>
 29 |     </ul>
 30 |   </nav>
 31 | </header>
 32 | <aside>
 33 |   <h3 class="aside" id="article_4">  这里以后是一个侧栏，这是侧栏的标题</h3>
 34 |   <form action="" method="post">
 35 |     <div>
 36 |       <div class="input_message">请输入邮箱地址</div>
 37 |       <input class="bot" type="email" placeholder="这是一个文本输入框"/>
 38 |     </div>
 39 |     <div class="demand">邮箱地址请按要求格式输入</div>
 40 |     <div>
 41 |       <div class="input_message">请输入密码</div>
 42 |       <input class="bot" type="password" minlength="6" maxlength="16" pattern="[A-Za-z0-9\-]*" placeholder="这是一个文本输入框"/>
 43 |     </div>
 44 |     <div>
 45 |       <div class="input_message">请重复输入密码</div>
 46 |       <input class="bot" type="password" minlength="6" maxlength="16" pattern="[A-Za-z0-9\-]*" placeholder="这是一个文本输入框"/>
 47 |     </div>
 48 |     <div class="demand">密码请为6-16位英文数字</div>
 49 |     <div>
 50 |       <div class="input_messages">性别：</div>
 51 |       <input type="radio" name="sex" id="man" checked="checked"/>
 52 |       <label for="man">男</label>
 53 |       <input type="radio" name="sex" id="woman"/>
 54 |       <label for="woman">女</label>
 55 |     </div>
 56 |     <div>
 57 |       <div class="input_messages">城市：</div>
 58 |       <select>
 59 |         <option value="BJ">北京</option>
 60 |         <option value="SH">上海</option>
 61 |         <option value="GZ">广州</option>
 62 |       </select>
 63 |     </div>
 64 |     <div>
 65 |       <div class="input_messages">爱好：</div>
 66 |       <input type="checkbox" id="sport"/>
 67 |       <label for="sport">运动</label>
 68 |       <input type="checkbox" id="art"/>
 69 |       <label for="art">艺术</label>
 70 |       <input type="checkbox" id="science"/>
 71 |       <label for="science">科学</label>
 72 |     </div>
 73 |     <div>
 74 |       <div class="input_message">个人描述：</div>
 75 |       <textarea placeholder="这是一个多行输入框，输入您的个人描述"></textarea>
 76 |     </div>
 77 |     <div class="submit">
 78 |       <input type="submit" value="确认提交"/>
 79 |     </div>
 80 |   </form>
 81 | </aside>
 82 | <article>
 83 |   <header>
 84 |     <h2 id="article_1">文章一级标题</h2>
 85 |     <h3 class="color_gray">文章二级标题</h3>
 86 |   </header>
 87 |   <h5 class="color_gray">
 88 |     <p>
 89 |       <span>文章作者</span>
 90 |       <time>文章发布时间</time>
 91 |     </p>
 92 |   </h5>
 93 |   <p class="text_indent">
 94 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 95 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 96 |     这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
 97 |     <a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，<b>这里有个粗体字</b>
 98 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 99 |     这是一个很长很长的段落，这是一个很长很长的段落。
100 |   </p>
101 |   <img src="img/pic.jpg" width="20%" alt="好看的图片"/>
102 |   <p class="text_indent">
103 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
104 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
105 |     这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，
106 |     <a href="http://ife.baidu.com" target="_blank">这里有个链接点击后打开新窗口链接到http://ife.baidu.com</a>
107 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
108 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
109 |   </p>
110 | </article>
111 | <article>
112 |   <header>
113 |     <h2 id="article_2">另一篇文章的一级标题</h2>
114 |     <h2 class="color_gray">文章二级标题</h2>
115 |   </header>
116 |   <h5 class="color_gray">
117 |     <p>
118 |       <span>文章作者</span>
119 |       <time>文章发布时间</time>
120 |     </p>
121 |   </h5>
122 |   <p class="text_indent">
123 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
124 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
125 |     这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
126 |     <a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，<b>这里有个粗体字</b>
127 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
128 |     这是一个很长很长的段落，这是一个很长很长的段落。
129 |   </p>
130 |   <img src="img/pic.jpg" width="20%" alt="好看的图片"/>
131 |   <ul class="no_list">
132 |     <li>列表项目一</li>
133 |     <li>列表项目二</li>
134 |     <li>列表项目三</li>
135 |   </ul>
136 | </article>
137 | <article>
138 |   <h2>图片</h2>
139 |   <figure>
140 |     <figcaption>好看的图片</figcaption>
141 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
142 |   </figure>
143 |   <figure>
144 |     <figcaption>好看的图片</figcaption>
145 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
146 |   </figure>
147 |   <figure>
148 |     <figcaption>好看的图片</figcaption>
149 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
150 |   </figure>
151 |   <figure>
152 |     <figcaption>好看的图片</figcaption>
153 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
154 |   </figure>
155 |   <figure>
156 |     <figcaption>好看的图片</figcaption>
157 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
158 |   </figure>
159 |   <figure>
160 |     <figcaption>好看的图片</figcaption>
161 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
162 |   </figure>
163 |   <figure>
164 |     <figcaption>好看的图片</figcaption>
165 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
166 |   </figure>
167 |   <figure>
168 |     <figcaption>好看的图片</figcaption>
169 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
170 |   </figure>
171 |   <figure>
172 |     <figcaption>好看的图片</figcaption>
173 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
174 |   </figure>
175 |   <figure>
176 |     <figcaption>好看的图片</figcaption>
177 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
178 |   </figure>
179 | </article>
180 | <article>
181 |   <header>
182 |     <h2 id="article_3">最后一篇文章一级标题</h2>
183 |     <h2 class="color_gray">文章二级标题</h2>
184 |   </header>
185 |   <h5 class="color_gray">
186 |     <p>
187 |       <span>文章作者</span>
188 |       <time>文章发布时间</time>
189 |     </p>
190 |   </h5>
191 |   <ol>
192 |     <li>排名1</li>
193 |     <li>排名2</li>
194 |     <li>排名3</li>
195 |   </ol>
196 |   <div class="tab">
197 |     下面是一个表格，给表格加了一个border="1"好让你看出是一个表格
198 |     <table border="1">
199 |       <thead>
200 |       <tr>
201 |         <th align="left">表头</th>
202 |         <th align="left">表头</th>
203 |         <th align="left">表头</th>
204 |       </tr>
205 |       </thead>
206 |       <tbody>
207 |       <tr>
208 |         <td>表内容单元格</td>
209 |         <td>表内容单元格</td>
210 |         <td><a href="#">操作</a></td>
211 |       </tr>
212 |       </tbody>
213 |       <tbody>
214 |       <tr>
215 |         <td>表内容单元格</td>
216 |         <td>表内容单元格</td>
217 |         <td><a href="#">操作</a></td>
218 |       </tr>
219 |       </tbody>
220 |       <tbody>
221 |       <tr>
222 |         <td>表内容单元格</td>
223 |         <td>表内容单元格</td>
224 |         <td><a href="#">操作</a></td>
225 |       </tr>
226 |       </tbody>
227 |       <tbody>
228 |       <tr>
229 |         <td>表内容单元格</td>
230 |         <td>表内容单元格</td>
231 |         <td><a href="#">操作</a></td>
232 |       </tr>
233 |       </tbody>
234 |       <tfoot>
235 |       <tr>
236 |         <td>总计</td>
237 |         <td colspan="2">1000</td>
238 |       </tr>
239 |       </tfoot>
240 |     </table>
241 |   </div>
242 | </article>
243 | <footer>
244 |   <span>版权所有&copy; 小笼包<a class="name" href="#"> @红鲤鱼与绿鲤鱼与驴队</a></span>
245 | </footer>
246 | </body>
247 | </html>
248 | 


--------------------------------------------------------------------------------
/mission1_2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <link rel="stylesheet" href="css/index.css" media="screen" title="no title" charset="utf-8">
  6 |   <title>Mission1_2</title>
  7 | </head>
  8 | <body>
  9 | <header class="header">
 10 |       <span>
 11 |         <a href="#">
 12 |           <img src="img/baidu-logo.png" alt="index-logo"/>
 13 |         </a>
 14 |       </span>
 15 |   <nav>
 16 |     <ul>
 17 |       <li>
 18 |         <a href="#article_1">导航链接一</a>
 19 |       </li>
 20 |       <li>
 21 |         <a href="#article_2">导航链接二</a>
 22 |       </li>
 23 |       <li>
 24 |         <a href="#article_3">导航链接三</a>
 25 |       </li>
 26 |       <li>
 27 |         <a href="#article_4">导航链接四</a>
 28 |       </li>
 29 |     </ul>
 30 |   </nav>
 31 | </header>
 32 | <article>
 33 |   <header>
 34 |     <h2 id="article_1">文章一级标题</h2>
 35 |     <h3 class="color_gray">文章二级标题</h3>
 36 |   </header>
 37 |   <h5 class="color_gray">
 38 |     <p>
 39 |       <span>文章作者</span>
 40 |       <time>文章发布时间</time>
 41 |     </p>
 42 |   </h5>
 43 |   <p class="text_indent">
 44 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 45 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 46 |     这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
 47 |     <a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，<b>这里有个粗体字</b>
 48 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 49 |     这是一个很长很长的段落，这是一个很长很长的段落。
 50 |   </p>
 51 |   <img src="img/pic.jpg" width="20%" alt="好看的图片"/>
 52 |   <p class="text_indent">
 53 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 54 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
 55 |     这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，
 56 |     <a href="http://ife.baidu.com" target="_blank">这里有个链接点击后打开新窗口链接到http://ife.baidu.com</a>
 57 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 58 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
 59 |   </p>
 60 | </article>
 61 | <article>
 62 |   <header>
 63 |     <h2 id="article_2">另一篇文章的一级标题</h2>
 64 |     <h2 class="color_gray">文章二级标题</h2>
 65 |   </header>
 66 |   <h5 class="color_gray">
 67 |     <p>
 68 |       <span>文章作者</span>
 69 |       <time>文章发布时间</time>
 70 |     </p>
 71 |   </h5>
 72 |   <p class="text_indent">
 73 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 74 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 75 |     这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>这是一个很长很长的段落，这是一个很长很长的段落，
 76 |     <a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，<b>这里有个粗体字</b>
 77 |     这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
 78 |     这是一个很长很长的段落，这是一个很长很长的段落。
 79 |   </p>
 80 |   <img src="img/pic.jpg" width="20%" alt="好看的图片"/>
 81 |   <ul class="no_list">
 82 |     <li>列表项目一</li>
 83 |     <li>列表项目二</li>
 84 |     <li>列表项目三</li>
 85 |   </ul>
 86 | </article>
 87 | <article>
 88 |   <h2>图片</h2>
 89 |   <figure>
 90 |     <figcaption>好看的图片</figcaption>
 91 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
 92 |   </figure>
 93 |   <figure>
 94 |     <figcaption>好看的图片</figcaption>
 95 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
 96 |   </figure>
 97 |   <figure>
 98 |     <figcaption>好看的图片</figcaption>
 99 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
100 |   </figure>
101 |   <figure>
102 |     <figcaption>好看的图片</figcaption>
103 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
104 |   </figure>
105 |   <figure>
106 |     <figcaption>好看的图片</figcaption>
107 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
108 |   </figure>
109 |   <figure>
110 |     <figcaption>好看的图片</figcaption>
111 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
112 |   </figure>
113 |   <figure>
114 |     <figcaption>好看的图片</figcaption>
115 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
116 |   </figure>
117 |   <figure>
118 |     <figcaption>好看的图片</figcaption>
119 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
120 |   </figure>
121 |   <figure>
122 |     <figcaption>好看的图片</figcaption>
123 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
124 |   </figure>
125 |   <figure>
126 |     <figcaption>好看的图片</figcaption>
127 |       <img src="img/pic.jpg" width="70%" alt="好看的图片"/>
128 |   </figure>
129 | </article>
130 | <article>
131 |   <header>
132 |     <h2 id="article_3">最后一篇文章一级标题</h2>
133 |     <h2 class="color_gray">文章二级标题</h2>
134 |   </header>
135 |   <h5 class="color_gray">
136 |     <p>
137 |       <span>文章作者</span>
138 |       <time>文章发布时间</time>
139 |     </p>
140 |   </h5>
141 |   <ol>
142 |     <li>排名1</li>
143 |     <li>排名2</li>
144 |     <li>排名3</li>
145 |   </ol>
146 |   <div class="tab">
147 |     下面是一个表格，给表格加了一个border="1"好让你看出是一个表格,你们不用写html时候不用加
148 |     <table border="1">
149 |       <thead>
150 |       <tr>
151 |         <th align="left">表头</th>
152 |         <th align="left">表头</th>
153 |         <th align="left">表头</th>
154 |       </tr>
155 |       </thead>
156 |       <tbody>
157 |       <tr>
158 |         <td>表内容单元格</td>
159 |         <td>表内容单元格</td>
160 |         <td><a href="#">操作</a></td>
161 |       </tr>
162 |       </tbody>
163 |       <tbody>
164 |       <tr>
165 |         <td>表内容单元格</td>
166 |         <td>表内容单元格</td>
167 |         <td><a href="#">操作</a></td>
168 |       </tr>
169 |       </tbody>
170 |       <tbody>
171 |       <tr>
172 |         <td>表内容单元格</td>
173 |         <td>表内容单元格</td>
174 |         <td><a href="#">操作</a></td>
175 |       </tr>
176 |       </tbody>
177 |       <tbody>
178 |       <tr>
179 |         <td>表内容单元格</td>
180 |         <td>表内容单元格</td>
181 |         <td><a href="#">操作</a></td>
182 |       </tr>
183 |       </tbody>
184 |       <tfoot>
185 |       <tr>
186 |         <td>总计</td>
187 |         <td colspan="2">1000</td>
188 |       </tr>
189 |       </tfoot>
190 |     </table>
191 |   </div>
192 | </article>
193 | <aside>
194 |   <h3 class="aside" id="article_4">  这里以后是一个侧栏，这是侧栏的标题</h3>
195 |   <form action="" method="post">
196 |     <div>
197 |       <div class="input_message">请输入邮箱地址</div>
198 |       <input class="bot" type="email" placeholder="这是一个文本输入框"/>
199 |     </div>
200 |     <div class="demand">邮箱地址请按要求格式输入</div>
201 |     <div>
202 |       <div class="input_message">请输入密码</div>
203 |       <input class="bot" type="password" minlength="6" maxlength="16" pattern="[A-Za-z0-9\-]*" placeholder="这是一个文本输入框"/>
204 |     </div>
205 |     <div>
206 |       <div class="input_message">请重复输入密码</div>
207 |       <input class="bot" type="password" minlength="6" maxlength="16" pattern="[A-Za-z0-9\-]*" placeholder="这是一个文本输入框"/>
208 |     </div>
209 |     <div class="demand">密码请为6-16位英文数字</div>
210 |     <div>
211 |       <div class="input_messages">性别：</div>
212 |       <input type="radio" name="sex" id="man" checked="checked"/>
213 |       <label for="man">男</label>
214 |       <input type="radio" name="sex" id="woman"/>
215 |       <label for="woman">女</label>
216 |     </div>
217 |     <div>
218 |       <div class="input_messages">城市：</div>
219 |       <select>
220 |         <option value="BJ">北京</option>
221 |         <option value="SH">上海</option>
222 |         <option value="GZ">广州</option>
223 |       </select>
224 |     </div>
225 |     <div>
226 |       <div class="input_messages">爱好：</div>
227 |       <input type="checkbox" id="sport"/>
228 |       <label for="sport">运动</label>
229 |       <input type="checkbox" id="art"/>
230 |       <label for="art">艺术</label>
231 |       <input type="checkbox" id="science"/>
232 |       <label for="science">科学</label>
233 |     </div>
234 |     <div>
235 |       <div class="input_message">个人描述：</div>
236 |       <textarea placeholder="这是一个多行输入框，输入您的个人描述"></textarea>
237 |     </div>
238 |     <div class="submit">
239 |       <input type="submit" value="确认提交"/>
240 |     </div>
241 |   </form>
242 | </aside>
243 | <footer>
244 |   <span>版权所有&copy; 小笼包<a class="name" href="#"> @红鲤鱼与绿鲤鱼与驴队</a></span>
245 | </footer>
246 | </body>
247 | </html>
248 | 


--------------------------------------------------------------------------------
/mission1_6/css/index.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |   margin: 0;
  3 |   padding: 0;
  4 | }
  5 | body{
  6 |   font-family: "黑体";
  7 |   background: #ccc;
  8 | }
  9 | .main{
 10 |   width: 980px;
 11 |   height: 1386px;
 12 |   margin: 0 auto;
 13 |   background: #fff;
 14 | }
 15 | .top{
 16 |   width: 892px;
 17 |   height: 61px;
 18 |   margin: 0 auto;
 19 |   background: #fff;
 20 |   font-size: 12px;
 21 |   border-bottom: 2px solid #938e8c;
 22 | }
 23 | .top_bg{
 24 |   background: #d45d5c;
 25 |   display: inline-block;
 26 |   width: 110px;
 27 |   height: 61px;
 28 | }
 29 | .top_bg span{
 30 |   float: left;
 31 |   color: #fff;
 32 |   margin-top: 45px;
 33 |   margin-left: 4px;
 34 | }
 35 | .top_time{
 36 |   float:right;
 37 |   color: #d45d5c;
 38 |   margin-top: 45px;
 39 | }
 40 | .middle{
 41 |   margin: 44px;
 42 |   background: red;
 43 | }
 44 | .middle_left{
 45 |   position: relative;
 46 |   float: left;
 47 | }
 48 | .middle_right{
 49 |   position: relative;
 50 |   float: right;
 51 |   width: 203px;
 52 |   height: 300px;
 53 |   background: #fff;
 54 | }
 55 | .middle_right hr{
 56 |   height: 2px;
 57 |   background: #cc8091;
 58 | }
 59 | .About{
 60 |   font-size: 24px;
 61 |   color: #000;
 62 |   font-family: "微软雅黑";
 63 |   line-height: 40px;
 64 |   text-decoration: underline;
 65 |   font-variant: small-caps;
 66 |   text-transform: capitalize;
 67 | }
 68 | .detail{
 69 |   font-size: 12px;
 70 |   color: #676767;
 71 |   font-family: "楷体";
 72 |   line-height: 10px;
 73 |   font-style: oblique;
 74 | }
 75 | .seven{
 76 |   font-size: 116px;
 77 |   color:#75b86b;
 78 |   font-family: "微软雅黑";
 79 |   font-style: oblique;
 80 |   margin-left: -18px;
 81 | }
 82 | .num{
 83 |   font-size: 55px;
 84 |   color: #cc8091;
 85 |   font-family: "微软雅黑";
 86 |   position: absolute;
 87 |   bottom: -10px;
 88 |   left:0px;
 89 | }
 90 | .text_1{
 91 |   font-size: 21px;
 92 |   color: #cc8091;
 93 |   font-family: "微软雅黑";
 94 |   position: absolute;
 95 |   bottom: 10px;
 96 |   left:85px;
 97 | }
 98 | .text_2{
 99 |   font-size: 12px;
100 |   color: #ccc;
101 |   font-family: "微软雅黑";
102 |   position: absolute;
103 |   bottom: 0px;
104 |   left: 85px;
105 | }
106 | .cover_left{
107 |   position: absolute;
108 |   top: 0px;
109 |   left: 0px;
110 |   width: 191px;
111 |   height: 301px;
112 |   background: green;
113 |   opacity: 0.20;
114 | }
115 | .cover_right{
116 |   position: absolute;
117 |   top: 0px;
118 |   right:0px;
119 |   width: 191px;
120 |   height:301px;
121 |   background: red;
122 |   opacity: 0.20;
123 | }
124 | .middle_text{
125 |   margin:44px;
126 |   width: 888px;
127 |   float: left;
128 |   overflow: auto;
129 | }
130 | .what{
131 |   height: 28px;
132 |   font-size: 16px;
133 |   color: #418c59;
134 |   font-family: "微软雅黑";
135 |   font-weight: bold;
136 |   text-decoration: underline;
137 |   cursor: pointer;
138 | }
139 | .when{
140 |   height: 28px;
141 |   font-size: 16px;
142 |   color: #d2994f;
143 |   font-family: "微软雅黑";
144 |   font-weight: bold;
145 |   text-decoration: underline;
146 |   cursor: pointer;
147 | }
148 | .how{
149 |   height: 28px;
150 |   font-size: 16px;
151 |   color: #cc7680;
152 |   font-family: "微软雅黑";
153 |   font-weight: bold;
154 |   text-decoration: underline;
155 |   cursor: pointer;
156 | }
157 | .le{
158 |   width: 230px;
159 |   float: left;
160 |   margin-right: 20px;
161 | }
162 | .le p{
163 |   font-size: 12px;
164 |   color: #767777;
165 |   line-height: 16px;
166 |   font-family: "宋体";
167 | }
168 | .mi{
169 |   width: 210px;
170 |   float: left;
171 |   margin-right: 20px;
172 | }
173 | .mi p{
174 |   font-size: 12px;
175 |   color: #231815;
176 |   line-height: 16px;
177 |   font-family: "微软雅黑";
178 |   opacity: 0.7;
179 | }
180 | .ri{
181 |   width: 140px;
182 |   float: left;
183 |   margin-right: 20px;
184 | }
185 | .ri p{
186 |   font-size: 12px;
187 |   color: #231815;
188 |   line-height: 16px;
189 |   font-family: "微软雅黑";
190 |   margin-bottom: 50px;
191 | }
192 | ul{
193 |   list-style: none;
194 |   font-size: 12px;
195 |   color: #231815;
196 |   line-height: 16px;
197 |   font-family: "微软雅黑";
198 | }
199 | li{
200 |   margin-bottom: 5px;
201 | }
202 | .ri ul li span{
203 |   font-size: 12px;
204 |   color: #cd4a48;
205 |   font-style: oblique;
206 |   line-height: 16px;
207 |   opacity: 0.7;
208 | }
209 | .bottom{
210 |   float: left;
211 |   width: 892px;
212 |   margin: 0px 44px 0px 44px;
213 |   overflow: auto;
214 | }
215 | .left{
216 |   float: left;
217 |   width: 415px;
218 | }
219 | .left_up{
220 |   width: 415px;
221 | 	border-bottom: 2px solid #11456b;
222 | }
223 | .left_up .the{
224 |   font-size: 72px;
225 | 	color: #f5e327;
226 |   font-family: "黑体";
227 |   font-weight: bold;
228 | 	font-style: oblique;
229 | }
230 | .left_up p{
231 |   font-size: 42px;
232 | 	line-height: 50px;
233 | 	font-family: "黑体";
234 | 	color: #11456b;
235 | 	font-weight:bold;
236 | }
237 | .left_bottom{
238 |   padding: 10px 0px;
239 | 	margin-top: 20px;
240 | 	position: relative;
241 | }
242 | .left_bottom p{
243 |   font-size: 12px;
244 | 	color:#767777;
245 | 	font-family: "宋体";
246 | 	line-height: 16px;
247 |   text-indent: 2em;
248 | }
249 | .le_text p:first-letter{
250 |   float: left;
251 |   font-size:70px;
252 | 	color: #f5e327;
253 | 	font-family: "微软雅黑";
254 | 	line-height: 70px;
255 | }
256 | .le_text p{
257 |   clear: both;
258 |   text-indent: 0em;
259 | }
260 | .pic_2{
261 |   float: right;
262 | 	margin: 12px 0px 12px 0px;
263 | }
264 | .right{
265 |   float: right;
266 |   width: 458px;
267 |   height: 637px;
268 | }
269 | .rim{
270 |   width: 458px;
271 |   height: 275px;
272 |   position: relative;
273 | }
274 | .rim_text{
275 |   width: 458px;
276 |   height: 61px;
277 |   background: #000;
278 |   opacity: 0.6;
279 |   position: absolute;
280 |   bottom: 18px;
281 | }
282 | .rim_text p{
283 |   color: #fff;
284 |   font-size: 26px;
285 |   font-family: "微软雅黑";
286 |   margin-left: 50px;
287 |   line-height: 44px;
288 |   border-left: 3px solid #72b16a;
289 |   height: 44px;
290 |   margin-top: 10px;
291 |   text-indent: 0.5em;
292 | }
293 | .rim_text p span{
294 |   font-size: 12px;
295 |   color: #72b16a;
296 |   font-family: "微软雅黑";
297 |   font-style: oblique;
298 |   line-height: 140%;
299 |   margin-left: 5px;
300 | }
301 | .r_text{
302 |   width: 458px;
303 |   height: 318px;
304 |   background: #eeeed6;
305 |   margin-top: 18px;
306 |   position: relative;
307 | }
308 | .r_text_1 ul{
309 |   list-style-image: url("../img/triangle.png");
310 | }
311 | .r_text_1 ul li{
312 |   font-size: 16px;
313 |   color: #5a5b5b;
314 |   font-family: "宋体";
315 |   text-align: left;
316 |   margin-left: 50px;
317 |   padding-top: 20px;
318 | }
319 | .sp{
320 |   font-size: 12px;
321 |   font-family: "宋体";
322 |   font-style: oblique;
323 |   text-align: right;
324 |   line-height: 20px;
325 |   color: #5a5b5b;
326 | }
327 | .r_text_2{
328 |   width: 260px;
329 |   height: 160px;
330 |   background: #d55d5c;
331 |   position: absolute;
332 |   bottom: 0px;
333 |   left: 0px;
334 |   color: #fff;
335 | }
336 | .r_text_3{
337 |   font-size: 14px;
338 |   color: #5a5b5b;
339 |   font-family: "黑体";
340 |   font-style: oblique;
341 |   line-height: 16px;
342 |   text-indent: 3em;
343 | }
344 | .zero{
345 |   float: left;
346 |   font-size: 110px;
347 |   color: #fff;
348 |   font-family: "微软雅黑";
349 |   border-right: 2px solid #fff;
350 |   height: 86px;
351 |   line-height: 86px;
352 |   margin: 37px 10px;
353 | }
354 | .nums{
355 |   margin-top: 37px;
356 |   font-size: 21px;
357 |   font-family: "黑体";
358 |   font-style: oblique;
359 |   line-height: 24px;
360 | }
361 | .hello{
362 |   font-size: 12px;
363 |   font-family: "黑体";
364 |   line-height: 10px;
365 | }
366 | .r_text_3{
367 |   font-size: 14px;
368 |   color: #5a5b5b;
369 |   font-family: "黑体";
370 |   font-style: oblique;
371 |   line-height: 16px;
372 |   text-indent: 3em;
373 |   position: absolute;
374 |   right: 0px;
375 |   bottom: 0px;
376 |   width: 178px;
377 |   height: 160px;
378 |   margin-right: 10px;
379 | }
380 | .r_text_3 span{
381 |   font-size: 72px;
382 |   color: #d45d5c;
383 |   font-family: "黑体";
384 |   line-height: 30px;
385 | }
386 | .pu_left{
387 |   position: absolute;
388 |   bottom: 120px;
389 |   right: 150px;
390 |   font-style: normal;
391 | }
392 | .pu_right{
393 |   position: absolute;
394 |   bottom: 45px;
395 |   right: 0px;
396 |   font-style: normal;
397 | }
398 | footer{
399 |   clear: both;
400 |   margin: 0 auto;
401 |   width: 892px;
402 |   height: 59px;
403 |   border-top: 1px solid #938e8c;
404 | }
405 | footer p{
406 |   float: right;
407 |   font: 12px "黑体";
408 |   color: #d45d5c;
409 | }
410 | 


--------------------------------------------------------------------------------