WEB编程(二)拆解目标,分析页面结构
目录
- WEB编程(一)前言学习目标
- WEB编程(二)拆解目标,分析页面结构
- WEB编程(三)使用工具准备介绍
- WEB编程(四)HTML页面框架搭建
- WEB编程(五)CSS页面装修优化
- WEB编程(六)JS页面动态效果控制
前景回顾
上一篇我们已经确定了目标,要模仿百度的功能,那我们就先从百度的首页开始。
打开百度的工具们
要打开网页1,第一步,我们会找到电脑上已经安装的Chrome、 Safari、Firefox或者IE,这些工具统一叫做浏览器(也有可能是360、QQ、UC或者搜狗浏览器,这都不重要)。
推荐MacOS下用Safari,Windows下用Chrome,不多说没解释。
之后的文章里默认全是Chrome下进行的。
没安装的可以通过腾讯软件中心下载
https://pc.qq.com/detail/1/detail_2661.html
普通下载,安装即可
打开Chrome在地址地址栏中输入地址
https://www.baidu.com
下面这个长长条叫地址栏,在里写就行了
也有使用黄页的同学,作为一个开发人员,建议直接输入或使用收藏夹
普通人使用黄页,我们也使用黄页,开发人员最后的骄傲呢
为了让你们好记些,输入的简单些,各大厂都是花了大价钱买的域名啊
(以上内容为选看)
分析百度首页2
打开之后我们看到页面内容是这样的
在看到页面的时候,如上图所视,我们可以把页面从上到下拆分成4个部分
- 第一区域叫“页头”,一般用作导航功能,来跳转到其它页面
- 第二区域叫“内容”,是整个页面核心显示区域
- 第三区域叫“页尾”,一般用来放友情链接,资质证明啥的(不重要又必须有的东西)
百度这里是从上到下拆分,也有些是左右拆分的
比如小红书,见下图
下一章
这里我们先对页面有个大概的区域划分,下一章我们就打开工具开始实现它