html仿百度页面代码_HTML实战篇：html仿百度新闻版块制作

本篇文章主要给大家介绍一下使用html+css来模仿制作百度新闻的版块。我们来分析一下下边的这张百度新闻图片，来简单的思考下我们要如何制作这个页面。

大体观察该页面我们可以看出本页面包含有以下几个元素，头部的一个标题，底下分为3个模块，有2个新闻列表页和一个图片文件。接下来我们简单说一下制作所用到的核心知识。

1)制作页面所需知识点

1、左浮动(float) 我们需要让下方的三个子元素进行左浮动来让元素左边对齐；

2、列表标签(ul li标签)的使用，使用ul和li来完成列表的制作，这里注意第一模块左边有个小方块图标，我们可以使用一个span标签来制作即可。

3、鼠标经过(hover)的使用，在百度新闻页面，鼠标经过文字列表会有下划线，以及新闻图片文字的时候会改变背景颜色。

2)代码实操演练

我们在制作的时候注意要合理的使用标签，尽量将相同的模块存放到一个div中，这样便于我们管理和后期的维护。比如以上我们可以大体按照下边的图片来进行拆解。