白癜风诚信为民 http://www.gpitp.gd.cn/bing/20180430/73878.html本篇文章主要给大家介绍一下如何使用html+css完成新闻列表以及图片列表的制作。1）新闻列表首先呢一个通用的新闻列表页面一般是有左侧的一个图片缩略图，右侧有新闻的标题和简介，有的呢还包含有新闻发布的时间等，我们具体来看一下下面这张图片从上边图片不难看出，整个新闻列表的布局就是由新闻图片、标题、简介以及时间组成。这个列表页的主要涵盖了以下几个知识点：1）浮动元素float（图片要使用float:left;进行左对齐，而日期要使用float:right;进行右对齐）；小技巧：使用float:right;的元素要放到元素内容的最左侧，这样元素可以避免内容过多导致右浮动元素换行的问题。2）标题以及简介元素配置（合理的使用css代码来调整标题以及简介元素，使主题结构清晰明了，这里要注意文字内容超出隐藏的问题）具体的实现html代码以及css代码就如下图所示：2）图片列表图片列表跟新闻列表比较类似，一般也是由一张图片以及一个标题文字组成，我们具体来看一下下面这张图片由此图片列表可以看出，本图片列表包含了一个图片的缩略图，还有一行文字，半透明的黑色背景并且浮动在图片的底部。这个图片列表页的主要涵盖了以下几个知识点：1）浮动元素float（图片列表要使用float:left;进行左排列对齐）；2）标题元素的绝对定位（首先设置子元素position:relative;，然后设置标题绝对定位position:absolute;让其位于图片的底部）3）背景半透明（使用css3的新属性background:rgba(0,0,0,0.5);最后一位0.5为元素的透明度，区间（0-1））具体的实现html代码以及css代码就如下图所示：为什么给大家放图片而不直接放源代码，就是为了想要让大家锻炼自己动手写的能力，只有自己能够熟练的运用才是王道。好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以举一反三看能写出其它的类似页面，如果有不理解或者有需要源码的可以直接私信我即可。每日金句：人生不要被过去所控制，决定你前行的是未来，人生不要被安逸所控制，决定你成功的是奋斗。喜欢我的文章的小伙伴记得
转载请注明：http://www.aierlanlan.com/grrz/7483.html
