您的位置:首页 > Web前端 > HTML

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

2020-07-18 05:30 351 查看

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

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

页面的头部

页面的中间部分

中间的各种新闻都当做一个整体


中间的部分大多是这样的结构,接把它当做一个大的部分。

页面的尾部


然后再依次将头、中、尾细分

2. 首先分析头部。


将头部再细分成3个部分。

头部的上部分


再细分为两部分

左边
看成是一个无序列表中有六个超链接标签

右边:可以看成无序列表,但是要注意第二个里面还有三个超链接标签

头部的中部

分为三个部分:
第一个部分就是一个超链接图标;
第二部分是一个文本框+按钮;
第三部分是一个超链接文字

头部的下部


就是一个导航,每个导航是一个超链接

3.分析中部

用中部的其中一块区域作为例子



这三张图片就是其中的热点新闻的一块。我们对这一块进行分析。

左边


右边

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

滑动图片


热搜新闻词


百家号


分析尾部

尾部很简单

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: