大家好，这篇文章给大家分享怎么样做一个图文列表页的布局，这种布局常用于自媒体博客和资讯网站的文章列表页，左边是图片，右边是标题和文章详情，下面是我写的一个简单图文列表的效果图：

图文列表布局

大家在编写代码的时候先不要忙着去写，首先要思考用什么样的代码，怎样去布局，怎样用最简单的代码去实现同样的效果，下面贴上我自己写的html代码标签：<!--HTML-->

<div class="list">

<div class="left">

<a href="https://www.tpt360.com/" target="_blank"><img src="https://tpt360.com/tuimg/yan.png"></a>

</div>

<div class="right">

<h2>这是我的第一个网页</h2>

<p>BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面...</p>

</div>

</div>

知识点：

这里我用了一个class属性，它是用来定义当前标签的样式名，我这用list这个名去定义这个div的样式，如需定义多个名，可以用空格分开，那么在css样式表里面就用.list{}来表示。

a则是超文本链接标签，用href属性来描述链接的地址，target="_blank"表示用鼠标点击链接会从浏览器的新窗口去打开这个链接地址，我这里把img标签放在a标签里面表示点击这张图片就能够跳转这个链接地址。

其他的标签我已经在上一篇文章都详细介绍了，不是很明白的同学可以翻阅上篇文章。

从上面的代码看，我用了三个div来布局，第一个list可以控制整个区块的样式，left则是定义往左方布局，right就是定义往右方布局。

首先，我想给list整个区域限制一个宽度、高度、内边距和背景颜色，那么我们就应该这样写：.list {

width: 800px; /*宽度800像素*/

height: 80px; /*高度80像素*/

background: #f2f2f2; /*灰色的背景颜色*/

padding: 15px; /*15像素的内边距*/

}

接下来我让left也限制一个宽度，并往左边浮动：.left {

width: 120px; /*宽度120像素*/

float: left; /*往左边浮动*/

}

那么right就应该往右边浮动，并限制一个宽度，注意：左右两边的宽度不能大于整个区域的宽度.right {

width: 660px; /*宽度660像素*/

float: right; /*往右边浮动*/

}

接着左边图片我们需要定义一个大小.left img {

width: 120px; /*高度120像素*/

height: 80px; /*宽度80像素*/

}

最后右边的标题和文章简介也需要定义样式.right h2 {

font-size: 16px; /*16像素的字体大小*/

color: #333; /*字体颜色为黑色*/

line-height: 24px; /*24像素的行高*/

margin: 5px 0; /*上下为5像素的外边距*/

}

.right p {

font-size: 14px; /*14像素的字体大小*/

color: #999; /*字体颜色为浅黑色*/

line-height: 24px; /*24像素的行高*/

margin: 0 0 5px 0; /*下边为5像素的外边距*/

}

这样一个简单的图文列表布局就完成了，当然，布局的方式有很多种，这只是其中一个方法，也欢迎大家留言分享一下其他的布局方式，谢谢观看！！！