HTML-如何用代码做出图上文下的效果图

 时间:2024-11-11 08:25:15

在HTML中需要掌握各种图文排版的代码,今天我们看看图上文下的这种样式如何用代码实现。

工具/原料

华为MateBookD

Windows1010.3.3

DWCS6

HTML

方法/步骤

1、如图,我们先按照最原始的方法,建立一个图片Img然后下面是文字信息,分别用不同的框包裹

HTML-如何用代码做出图上文下的效果图

2、如图,在浏览器中效果是这样的,图片在上,文字在下,这就是最简单的图文搭配了

HTML-如何用代码做出图上文下的效果图

3、然后对list进行宽度宽度设置,这个宽度是根据想要在整个大框中建立几张图片所设醅呓择锗置的,我想在大框900的宽度中设置3张图片,然后中间有间隔,这个间隔设置为30px;

HTML-如何用代码做出图上文下的效果图

4、这样设置后,单张图片是这样的,如果有多张图片的时候,就会显示效果

HTML-如何用代码做出图上文下的效果图

5、然后对文字内容添加设置,字体大小、颜色以及位置关系

HTML-如何用代码做出图上文下的效果图

6、将文字居中后,效果如图所示

HTML-如何用代码做出图上文下的效果图

7、将一张图片的设置安排好后,可以对整个的小框架进行复制粘贴即可,最后更改下链接的图片和文字搭配

HTML-如何用代码做出图上文下的效果图

8、如图,这就是多张图片插入后的效果样式了。

HTML-如何用代码做出图上文下的效果图

html怎么让图片在左文字靠右 HTML怎样使图片居中 html怎么让三张图片并列显示 html如何文字居中与背景 如何在HTML中插入图片
热门搜索
好看的图片动漫 卡通蘑菇图片 淡水鱼的种类图片 科幻图片大全 关于运动的图片