位置:设计主页 > 网站制作 > 网页制作 >

HTML和CSS实战:常用新闻列表以及图片列表制作

来源:设计前沿网 作者:恒创信息 时间:2019-01-07 10:49
HTML实战篇:常用新闻列表以及图片列表制作.jpg

 

本篇文章主要给大家介绍一下如何使用html+css完成新闻列表以及图片列表的制作。

1)新闻列表

首先呢一个通用的新闻列表页面一般是有左侧的一个图片缩略图,右侧有新闻的标题和简介,有的呢还包含有新闻发布的时间等,我们具体来看一下下面这张图片

HTML实战篇:常用新闻列表以及图片列表制作.jpg

 

从上边图片不难看出,整个新闻列表的布局就是由新闻图片、标题、简介以及时间组成。这个列表页的主要涵盖了以下几个知识点:

1)浮动元素float(图片要使用 float:left; 进行左对齐,而日期要使用 float:right; 进行右对齐);

小技巧:使用float:right;的元素要放到元素内容的最左侧,这样元素可以避免内容过多导致右浮动元素换行的问题。

2)标题以及简介元素配置(合理的使用css代码来调整标题以及简介元素,使主题结构清晰明了,这里要注意文字内容超出隐藏的问题)

具体的实现html代码以及css代码就如下图所示:

HTML实战篇:常用新闻列表以及图片列表制作.jpg

 

HTML实战篇:常用新闻列表以及图片列表制作.jpg

 

2)图片列表

图片列表跟新闻列表比较类似,一般也是由一张图片以及一个标题文字组成,我们具体来看一下下面这张图片

HTML实战篇:常用新闻列表以及图片列表制作.jpg

 

由此图片列表可以看出,本图片列表包含了一个图片的缩略图,还有一行文字,半透明的黑色背景并且浮动在图片的底部。这个图片列表页的主要涵盖了以下几个知识点:

1)浮动元素float(图片列表要使用 float:left; 进行左排列对齐);

2)标题元素的绝对定位(首先设置子元素position:relative;,然后设置标题绝对定位position:absolute;让其位于图片的底部)

3)背景半透明(使用css3的新属性background:rgba(0,0,0,0.5);最后一位0.5为元素的透明度,区间(0-1))

具体的实现html代码以及css代码就如下图所示:

HTML实战篇:常用新闻列表以及图片列表制作.jpg

 

HTML实战篇:常用新闻列表以及图片列表制作.jpg

 

为什么给大家放图片而不直接放源代码,就是为了想要让大家锻炼自己动手写的能力,只有自己能够熟练的运用才是王道。