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

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

1）制作页面所需知识点

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

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

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

2）代码实操演练

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

接下来我们就可以来书写我们的html代码了。具体的实现html代码就如下图所示：

根据图片格式我们写完html代码后，剩下的就是书写css代码，来完成图片所示布局样式。那么我们的css代码就如下图所示：

好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信【网站源码】即可。

每日金句：当你付出的劳动没有得到金钱和物质上的回报时，一定可以得到等值的精神愉悦。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。