-
Notifications
You must be signed in to change notification settings - Fork 0
/
task1_5_1.html
210 lines (191 loc) · 11.2 KB
/
task1_5_1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>task1_5_1</title>
<link rel="stylesheet" href="./css/task1_5_1.css" type="text/css"/>
<!--
*头部和底部的黑色区域始终是100%宽
*页面右侧部分为固定宽度，左侧保持与浏览器窗口变化同步自适应变化
*左侧的各个模块里面的内容宽度跟随左侧整体宽度同步自适应变化
*10张图片需要永远都完整展现，所以会随着宽度变窄，从两行变成三行甚至更多，也有可能随着宽度变宽，变成一行
-->
</head>
<body>
<header>
<div class="head_logo">
<img src="./image/baidu.jpg" height="60px" width="160px"/>
</div>
<ul class="box">
<li><a href="#">面向人群:</a></li>
<li><a href="#">难度：</a></li>
<li><a href="#">队友一</a></li>
<li><a href="#" id="spec">队友二</a></li>
</ul>
</header>
<div class="container_1">
<article>
<section>
<h2>任务一：零基础HTML编码</h2>
<h3>重要说明</h3>
<p class="auth">文章作者Mason 文章发表时间2016年3月21日</p>
<p class="firstpara">百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。</p>
<span>换行了</span><br/>
<p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案(<a href="http://ife.baidu.com">点击去到百度前端学院</a>)，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。<b>那些最终没有被我们采纳的方案</b>，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。</p>
</section>
<img src="./image/pic.jpg" width="300px" height="242px" alt="好看的妹子"/>
<section>
<p>百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。</p>
<p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案(<a href="http://ife.baidu.com" target="_blank">点击去到百度前端学院</a>)，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。<b>那些最终没有被我们采纳的方案</b>，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。</p>
</section>
</article>
</div>
<div class="container_1">
<article>
<section>
<h2>Web前端技术</h2>
<h3>Web前端课程</h3>
<p class="auth">文章作者Mason 文章发表时间2016年3月21日</p>
<p class="firstpara">前端技术作为距离用户最近的技术，其这几年的飞速成长离不开互联网本身的发展变化。在90年代末的web1.0时代，受限与网速与终端能力，网站上大部分是简单的图文信息呈现，在用户界面上的要求也比较低。但是随着许多高性能浏览器的出现、宽带速度的持续提升，特别是智能手机、4G、WiFi的普及，技术在用户界面上具有了越来越多的可能。
除了技术的进步，<a href="http://ife.baidu.com">前端技术的应用</a>领域也更加广泛，网站、手机APP、只能电视、智能手表、甚至机器人，只要是涉及到用户界面的产品，就有前端技术的用武之地。更重要的是，技术发展的脚步并未停歇，技术应用的领域也在持续扩大。
正是因为广阔的发展前景，前端技术开发领域也吸引了越来越多的自学者。互联网上也出现了浩如烟海的相关课程。但是信息过载下，初学者无从下手、一片迷茫，高阶者却苦于技术提升无门。</p>
<img src="./image/pic.jpg" width="300px" height="242px" alt="好看的妹子"/>
<ul type="none">
<li>这个妹子好看吗</li>
<li>不管你们了</li>
<li>我觉得挺好看</li>
</ul>
</section>
</article>
</div>
<div class="container_1">
<h2>好吧这里是一堆妹子</h2>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
<figure class="container_2">
<figcaption>好看的妹子</figcaption>
<img src="./image/pic.jpg" width="110px" height="90px" alt="好看的妹子"/>
</figure>
</div>
<div class="container_1" id="weibo">
<article>
<h2>微博四杰</h2>
<h3>哪个最屌</h3>
<p class="auth">文章作者Mason 文章发表时间2016年3月21日</p>
<ol type="1">
<li>赵日天</li>
<li>龙傲天</li>
<li>叶良辰</li>
</ol>
下面是一个表格，列出了微博四杰
<table class="table1">
<th>姓名</th><th>事迹</th><th>为他投票</th>
<tr><td>赵日天</td><td>小学一霸</td><td><a href="#">顶</a></td></tr>
<tr><td>龙傲天</td><td>小说一霸</td><td><a href="#">顶</a></td></tr>
<tr><td>叶良辰</td><td>宿舍一霸</td><td><a href="#">顶</a></td></tr>
<tr><td>福尔康</td><td>心机boy</td><td><a href="#">顶</a></td></tr>
<tr class="last_line"><td>票数总计</td><td colspan="2">1000</td></tr>
</table>
</article>
</div>
<aside>
<div class="container_aside_title">
<h2>怎么联系你？</h2>
</div>
<div class="container_aside_form">
<form action="#" method="post">
<table>
<tr>
<td class="odd">请输入邮箱地址</td>
<td></td>
<td><input type="text"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="hint">邮箱地址请按要求格式输入</td>
</tr>
<tr>
<td class="odd">请输入密码</td>
<td></td>
<td><input type="password"/></td>
</tr>
<tr>
<td class="odd">请重复输入密码</td>
<td></td>
<td><input type="password"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="hint">密码请为6-16位英文数字</td>
</tr>
<tr>
<td class="odd">性别</td>
<td></td>
<td><input type="radio" name="gender" checked="checked"/>男 <input type="radio" name="gender"/>女</td>
</tr>
<tr>
<td class="odd">城市</td>
<td></td>
<td>
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>其他</option>
</select>
</td>
</tr>
<tr>
<td class="odd">爱好</td>
<td></td>
<td><input type="checkbox" value="sports"/>运动 <input type="checkbox" value="art"/>艺术 <input type="checkbox" value="sciense"/>科学</td>
</tr>
<tr>
<td class="odd">个人描述</td>
<td></td>
<td><textarea cols="20"></textarea></td>
</tr>
</table>
</form>
</div>
<button class="submit">确认提交</button>
</aside>
</body>
<footer><p>版权所有©</p></footer>
</html>