摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。
Task02的演示DEMO：https://amnova.github.io/New-...
整个项目的GitHub地址：https://github.com/amnova/New...
Task 02的GitHub地址：https://github.com/amnova/New...
起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。
这个专栏将持续更新。
作为一个刚刚入门不久，正在摸爬滚打中的学习者，我明白动手写项目的重要性和意义。
现在我把自己完成的小项目的源码在Github上分享出来，希望可以帮到广大前端初学者们。
小的项目也包含着大智慧。毕竟复杂页面就是小的组件构建起来的。
记录，记忆，练习，整理，学习的不二法门，就在于精准的刻意练习。
这个DEMO我主要磨练掌握的技能下面是我在task02完成过程中复习到的知识点的整理。
导航栏制作的复习（设置line-height实现文字垂直居中对齐的小技巧）
HTML5 新标签
怎么做一个好看的表格？
怎么根据要求对齐表单控件？
页面整体的布局练习
小乐趣：给网页标题前加一个可爱的小图标
这个DEMO涉及的我的知识盲区1.点击链接后，如何在新的窗口打开相应链接？简单把曾经遗忘的东西记录一下，下一次打开时我就会轻松忆起往昔的痛苦和迷茫
我是一个贱萌贱萌的链接2.box-shadow怎么用来着？
忘记了box-shadow怎么玩起来？下面是box-shadow的标志性用法
div{
box-shadow: 5px 5px 5px rgba(0,0,0,.6);
}
3.border-radius也忘了？
典型用法
input[type="submit"] {
border-radius: 10px;
}
(掌握基本的经典用法就好啦，这个就是最常用的，其他复杂的参数了解就好，没必要一蹴而就的全都死记硬背。毕竟人的精力有限啊，况且记忆力也并不可靠)
4.深度学习带标题的图像https://www.w3.org/Style/Exam...
HTML:
新年快乐
CSS:
article figure {
border: 1px solid #999;
width: 100px;
padding:10px;
text-align: center;
}
article figure img {
width: 100px;
}
5.掌握好看的表格
跨列和跨行 colspan , rowspan
6.掌握好看的表单label有两种用法，通过给label设置for属性，或者直接用
运用 fieldset 和 legend 组合表单控件们
HTML:
7.表单控件怎么对齐？
用浮动标题的方法对齐表单控件们（详见CSS代码注释部分）
用display:inline-block 实现对控件的名称部分（对应HTML 是
inline-block 产生神秘间距的小秘密
点击我
上面链接的原文地址：
http://www.zhangxinxu.com/wor...
相关内容的扩展阅读（有关display：inline-block)
http://www.zhangxinxu.com/wor...
是的，就是因为忽略了这一点，我为表单设置居中效果失败了。
而当为form设置了width:800px;我不仅得到了效果，而且惊喜的解决了之前么有理解的问题，就是收缩视窗之后，内容不会变形，不会流动起来，而是维持原样。原来这才是流式布局和冻结布局的巧妙运用！
之前学习整理的几种经典布局不仅是对整个页面，页面中的某一部分也可以异曲同工之妙的运用起来。把某个div当做是body一样的运用！ 这里就是这样的，我对form其实是运用起来了之前学习到的冻结布局，实现了我想要的效果！
9.为网页标签的标题前加一个有趣的icon？文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115470.html
摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。 Task02的演示DEMO：https://amnova.github.io/New-... 整个项目的GitHub地址：https://github.com/amn...
任务描述 参考以下示例代码，补充其中的JavaScript功能，完成一个JavaScript代码的编写本任务完成的功能为：用户可以在输入框中输入任何内容，点击确认填写按钮后，用户输入的内容会显在您输入的值是文字的右边 IFE JavaScript Task 01 请输入北京今天空气质量： 确认填写 您输入的值是：尚无录入 (function...
摘要：任务描述参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑比如空气质量大于进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上污染城市列表第一名福州样例，第二名福州样例，北京上海福州广州成都西安在注 任务描述 参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示...
摘要：任务目的学习与实践的基本语法语言特性初步了解的事件是什么初步了解中的是什么任务描述如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空有一个输入框，以及个操作按钮点击左侧入，将中输入的数字从左侧插入队列中点击右侧入，将中输入的数字从右 任务目的学习与实践JavaScript的基本语法、语言特性初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任务...
摘要：任务目的学习与实践的基本语法语言特性初步了解的事件是什么初步了解中的是什么任务描述如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空有一个输入框，以及个操作按钮点击左侧入，将中输入的数字从左侧插入队列中点击右侧入，将中输入的数字从右 任务目的学习与实践JavaScript的基本语法、语言特性初步了解JavaScript的事件是什么初步了解JavaScript中的DOM是什么任务...
阅读 2026·2021-11-02 14:48
阅读 2741·2019-08-30 14:19
阅读 2914·2019-08-30 13:19
阅读 1235·2019-08-29 16:17
阅读 3198·2019-08-26 14:05
阅读 2965·2019-08-26 13:58
阅读 3024·2019-08-23 18:10
阅读 1078·2019-08-23 18:04
