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

最终效果图