练习:用HTML做一下百度新闻的结构
2020-07-18 05:30
351 查看
主要是练习对各个部分的划分!
要点:不可以浮躁!要不然就会划分的乱七八糟!将每一个大的部分逐渐划分成一小块一小块。(我只写了大概的框架,具体文字链接没有写)
1.首先将百度新闻的页面分为三个板块:
页面的头部
页面的中间部分
中间的各种新闻都当做一个整体
中间的部分大多是这样的结构,接把它当做一个大的部分。
页面的尾部
然后再依次将头、中、尾细分
2. 首先分析头部。
将头部再细分成3个部分。
头部的上部分
再细分为两部分
左边:
看成是一个无序列表中有六个超链接标签
右边:可以看成无序列表,但是要注意第二个里面还有三个超链接标签
头部的中部
分为三个部分:
第一个部分就是一个超链接图标;
第二部分是一个文本框+按钮;
第三部分是一个超链接文字
头部的下部
就是一个导航,每个导航是一个超链接
3.分析中部
用中部的其中一块区域作为例子
这三张图片就是其中的热点新闻的一块。我们对这一块进行分析。
左边
右边
右边有三部分内容:
第一部分是一个可以滑动图片的;
第二部分是热搜新闻词;
第三部分是百家号;
滑动图片
热搜新闻词
百家号
分析尾部
尾部很简单
相关文章推荐
- Html常用块级标签练习
- PowerDesigner 导出表结构到word html
- HTML表单练习~百度注册
- 【数据结构练习】基于链表结构实现的队列
- 【算法学习笔记】11.数据结构基础 二叉树初步练习4
- 3.1 HTML基本结构
- 树结构练习——排序二叉树的中序遍历
- HTML简介及基本结构
- HTML&CSS----练习(运算符)
- 用html语言写一个个人信息表(练习使用html标签)
- HTML - 文档结构与信息声明,单位
- HTML学习笔记【8】使用框架结构
- #小练习 SGMLParser 解析 HTML 分类: HTMLParser 2013-11-12 15:52 472人阅读 评论(0) 收藏
- OJ2128树结构练习——排序二叉树的中序遍历
- SDUT 2144 图结构练习——最小生成树 Kruskal
- HTML(2)网页基本结构
- HTML结构
- 树结构练习——判断给定森林中有多少棵树
- C语言基础练习之if与for结构
- Html文件基本结构