HTML实战篇：常⽤新闻列表以及图⽚列表制作
用html和css制作百度页面
本篇⽂章主要给⼤家介绍⼀下如何使⽤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代码就如下图所⽰：
为什么给⼤家放图⽚⽽不直接放源代码，就是为了想要让⼤家锻炼⾃⼰动⼿写的能⼒，只有⾃⼰能够熟练的运⽤才是王道。
好了，本篇⽂章就给⼤家说到这⾥，⼤家⾃⼰动⼿写⼀下看能不能写出⼀样的页⾯效果出来，也可以举⼀反三看能写出其它的类似页⾯，如果有不理解或者有需要源码的可以直接私信我即可。
⼈⽣不要被过去所控制，决定你前⾏的是未来，⼈⽣不要被安逸所控制，决定你成功的是奋⽃。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。