本次课作业内容为:
- 选择自己的简书作业网址为目标分析页面
- 提交页面结构分析
- 提交元素标签位置信息
课业工具:chrome
上次作业网址:http://www.jianshu.com/p/a1a2dabb4bc2
第一步分析网页结构
自己简单分析的网页结构如下:
![](https://img.haomeiwen.com/i4421285/0e73cb2d45bc5222.png)
- 在网页中,使用“检查”功能(快捷键ctr+shift+J),可以出现如下界面
![](https://img.haomeiwen.com/i4421285/db5bc3b673e19055.png)
- 右半边的小标题框elements,内含代码,鼠标在这些源代码点击,对应的网页板块会有提示。 我就按照这些提示去寻找的答案。
- 有些代码,点击后没有对应网页提示。
- 没找到对应代码的版块儿,我使用黄色标注。
第二步元素标签位置信息
元素标签位置信息,这个概念,我很模糊,是不是指网页的某个区,其对应的代码。 反正我就按照这个理解来,做作业。
-
全局顶部导航栏。
,这样的符号,是不是相当于注释功能啊。
![](https://img.haomeiwen.com/i4421285/bd0da611e2b2fc71.png)
![顶部导航栏对应的标签信息](https://img.haomeiwen.com/i4421285/6514ef92b009e661.png?
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
正文区
![](https://img.haomeiwen.com/i4421285/6717023bb1a75567.png)
![](https://img.haomeiwen.com/i4421285/66ab0d92280ce446.png)
class= "note" 是什么意思啊? note应该代表正文。
-
推荐笔记
![](https://img.haomeiwen.com/i4421285/77fed6f90aaf001a.png)
![](https://img.haomeiwen.com/i4421285/d651ae38e0af513f.png)
-
slide tool
![](https://img.haomeiwen.com/i4421285/962f9c3f950ac27e.png)
![](https://img.haomeiwen.com/i4421285/6d7327f91b16e17c.png)
其实快做完作业才发现,一个网页的格局好清晰,写作业时太看局部了。
![](https://img.haomeiwen.com/i4421285/19e973229ca71aac.png)
网友评论