发表于： 2017-03-22 23:08:52
1 1756
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
制作web小课堂课件CSS-02-How to use github to build your own personal website.html
了解到CSS制作流程图；
了解 CSS模拟表单元素；
了解响应式布局
明天计划的事情：（一定要写非常细致的内容）
继续任务10
遇到的问题：（遇到什么困难，怎么解决的）
步骤进度条的使用场景很多，比如说购物流程 、订单流程、面试流程等都要用到它。网上常见的做法是使用CSS图片精灵，该做法的优点是兼容性强，但缺点也很明显：难以自适应设备，而且会加载额外的 图片资源。更好的办法是使用纯CSS来制作步骤进度条。
实现方法是使用:before选择器在每一步对应li元素添加圆形步骤数字，使用:after选择器在其后面添加连接线。步骤进度条一般有三种状态：
已经完成的状态
当前正在进行的状态
未完成的状态
我们将已经完成的状态和正在进行的状态设置成同样的样式：数字及连接线变绿，将对于未完成的状态数字及连接线变灰。当前步骤对应steps li.active，那么已经完成的步骤则对应steps li.active ~ li。此处用到CSS3中的~选择器来匹配当前 元素之后的所有li兄弟元素。
什么是CSS模拟表单元素?
收获：（通过今天的学习，学到了什么知识）
了解了html主要的表单元素及其作用
HTML <form> 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
HTML 主要的表单元素
| 元素 | 相关DOM接口 | 作用描述 |
|---|---|---|
<button> | HTMLButtonElement | button元素表示一个可点击的按钮。 |
<datalist> | HTMLDataListElement | datalist元素包含一组 |
<fieldset> | HTMLFieldSetElement | fieldset元素用于将几个表单元素分组到一个form。 |
<form> | HTMLFormElement | form元素表示文档的一部分，包含使用户通过web浏览器提交信息的交互元素。 |
<input> | HTMLInputElement |
|
<keygen> | HTMLKeygenElement | keygen元素促进key material的产生，以及公共密钥作为HTML表单的提交。 |
<label> | HTMLLabelElement | label元素表示用户界面中的一个条目的标题。 |
<legend> | HTMLLegendElement | legend元素表示它的父级 |
<meter> | HTMLMeterElement | meter元素表示一个可知范围的标量值或分数值。 |
<optgroup> | HTMLOptGroupElement | optgroup元素创建 |
<option> | HTMLOptionElement | option元素用来创建一个控件，表示 |
<output> | HTMLOutputElement | output元素表示计算结果。 |
<progress> | HTMLProgressElement | progress元素用来查看任务的完成进展。 |
<select> | HTMLSelectElement | select元素表示展示选项菜单的控件。 |
<textarea> | HTMLTextAreaElement | textarea元素表示一个多行明文可编辑控件。 |
所有表单元素，作为HTML元素，支持HTMLElementDOM接口。
返回列表
评论