练习:用HTML做一下百度新闻的结构

主要是练习对各个部分的划分!
要点:不可以浮躁!要不然就会划分的乱七八糟!将每一个大的部分逐渐划分成一小块一小块。(我只写了大概的框架,具体文字链接没有写)

1.首先将百度新闻的页面分为三个板块:

在这里插入图片描述

页面的头部

在这里插入图片描述

页面的中间部分

中间的各种新闻都当做一个整体
在这里插入图片描述
在这里插入图片描述
中间的部分大多是这样的结构,接把它当做一个大的部分。

页面的尾部

在这里插入图片描述
然后再依次将头、中、尾细分

2. 首先分析头部。

在这里插入图片描述
将头部再细分成3个部分。
在这里插入图片描述

头部的上部分

在这里插入图片描述
再细分为两部分
在这里插入图片描述
左边在这里插入图片描述
看成是一个无序列表中有六个超链接标签
在这里插入图片描述
右边:可以看成无序列表,但是要注意第二个里面还有三个超链接标签在这里插入图片描述
在这里插入图片描述

头部的中部

分为三个部分:
第一个部分就是一个超链接图标;
第二部分是一个文本框+按钮;
第三部分是一个超链接文字
在这里插入图片描述
在这里插入图片描述

头部的下部

在这里插入图片描述
就是一个导航,每个导航是一个超链接
在这里插入图片描述

3.分析中部

用中部的其中一块区域作为例子
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这三张图片就是其中的热点新闻的一块。我们对这一块进行分析。
在这里插入图片描述

左边

在这里插入图片描述
在这里插入图片描述

右边

右边有三部分内容:
第一部分是一个可以滑动图片的;
第二部分是热搜新闻词;
第三部分是百家号;
在这里插入图片描述

滑动图片

在这里插入图片描述
在这里插入图片描述

热搜新闻词

在这里插入图片描述
在这里插入图片描述

百家号

在这里插入图片描述
在这里插入图片描述

分析尾部

尾部很简单
在这里插入图片描述
在这里插入图片描述

  • 10
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天金小麻花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值