WEB编程(二)拆解目标,分析页面结构

目录
  1. WEB编程(一)前言学习目标
  2. WEB编程(二)拆解目标,分析页面结构
  3. WEB编程(三)使用工具准备介绍
  4. WEB编程(四)HTML页面框架搭建
  5. WEB编程(五)CSS页面装修优化
  6. 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个部分

  • 第一区域叫“页头”,一般用作导航功能,来跳转到其它页面
  • 第二区域叫“内容”,是整个页面核心显示区域
  • 第三区域叫“页尾”,一般用来放友情链接,资质证明啥的(不重要又必须有的东西)

百度这里是从上到下拆分,也有些是左右拆分的
比如小红书,见下图
在这里插入图片描述

下一章

这里我们先对页面有个大概的区域划分,下一章我们就打开工具开始实现它


  1. 网页是构成网站的基本元素,用浏览器查看都是网页,看到的图片,文字都是叫网页的内容。 ↩︎

  2. 网站的入口网页,一个网站打开后看到的第一个页面 ↩︎

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值