用html写一个一行占四个图片的图片显示列表
时间: 2024-05-24 14:11:59 浏览: 6
<!DOCTYPE html>
<html>
<head>
<title>图片显示列表</title>
<style>
.img-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.img-list li {
flex: 0 0 25%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.img-list img {
display: block;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<ul class="img-list">
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
<li><img src="image5.jpg"></li>
<li><img src="image6.jpg"></li>
<li><img src="image7.jpg"></li>
<li><img src="image8.jpg"></li>
</ul>
</body>
</html>
相关问题
html一行显示四个图片
你可以使用HTML的flexbox属性来实现一行显示四个图片。以下是一个简单的示例代码:
```html
<div style="display: flex;">
<img src="image1.jpg" style="width: 25%;" />
<img src="image2.jpg" style="width: 25%;" />
<img src="image3.jpg" style="width: 25%;" />
<img src="image4.jpg" style="width: 25%;" />
</div>
```
在这个示例中,我们使用了一个包含四个图片的div元素,并将其CSS display属性设置为flex。然后,我们为每个图片设置了一个相同的宽度(25%),这样它们就能够均匀地分配到一行中。你可以根据需要调整图片的宽度和样式。
用html语言写一个图文列表显示主页
好的,以下是一个简单的图文列表显示主页的 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>图文列表显示主页</title>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>最新消息</h2>
<ul>
<li>
<h3>消息标题1</h3>
<p>消息内容1</p>
</li>
<li>
<h3>消息标题2</h3>
<p>消息内容2</p>
</li>
</ul>
</section>
<section>
<h2>产品展示</h2>
<ul>
<li>
<h3>产品名称1</h3>
<img src="product1.jpg" alt="产品1图片">
<p>产品介绍1</p>
</li>
<li>
<h3>产品名称2</h3>
<img src="product2.jpg" alt="产品2图片">
<p>产品介绍2</p>
</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 我的网站</p>
</footer>
</body>
</html>
```
在这个示例中,我们在主体部分使用了 `<section>` 标签来分隔不同的内容区域,然后在每个区域中使用 `<ul>` 和 `<li>` 标签来创建图文列表。列表中的每个图文项包括一个标题 `<h3>`、一张图片 `<img>` 和一段文本 `<p>`。您可以根据需要进行修改和扩展。