HTML实战篇:html仿百度新闻版块制作

     发布时间:2020-11-17

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

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

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

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

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

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

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

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

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

  当你付出的劳动没有得到金钱和物质上的回报时,一定可以得到等值的精神愉悦。返回搜狐,查看更多