Pro022-从零开始HTML[#022]——10分钟- 作业&小结

标签

#022_Ent_Assignment

    首先解释一下昨天没有更新HTML的原因，因为教程我是第一次做，在上基本没有人看，估计是写得太烂，只有之前一直跟着我公众号学习的人有反应，所以我只在公众号布置了作业，起码保证他们之前的课程全部都学懂了。

---

逐项解析

作业的 HTML 文档

    因为内容很简单，每个人基本上都完成到了这一步，将所有需要显示的文字内容，按照【标题 h1、h3】、【段落 p】、【无序列表 ul / li】、【引用 blockquote】的内容构建出来了。

    除去 css 部分，每个人都实现了这个效果——

白板基础效果图

    所以这一部分的样式，主要在 css 上。

---

样式编辑

    其他 css 设置一直是沿用了之前的样式设置，这次作业种，只加入了两样样式

本次新加入的样式

    .assignment （注意有个小点）是 #020 课程中教过的，利用 class 对 div 块元素进行定义，定义块元素 div 的宽度为 500px ，对齐/布局模式为 auto 自动。

    blockquote 这个就没有专门教过，但是在表格一课上已经初见端倪—— border="1"

    这个源于另一种写法——

另一种写法

    我们可以看到，第二种写法是省略型的，border : 1px solid white 代替了 border-width 等三个属性设置，虽然这个写法很简单，但是尽量不要用（虽然大部分浏览器还是能识别），不过之后我们回学习到 XHTML ，到时候会解释为什么不要用这种简略的写法。

    以上，只要在原来的基础上，在 css 加上这两个设置，就可以实现最终效果了。

---

最终效果

    除了css样式里面的颜色搭配没有什么严格要求，只需要自己的审美，其他至少要做到，可以做得比作业要求更好，但是不能再差，这已经是最简单的页面效果了。（我这个颜色也是没有搭配好）

最终效果图