写出css: <div class="box3"> <div class="box3-item"> <img src="image.jpg"> <h3>Subtitle</h3> <h2>Title</h2> <p>Text</p> <button>Button</button> </div> <div class="box3-item"> <img src="image.jpg"> <h3>Subtitle</h3> <h2>Title</h2> <p>Text</p> <button>Button</button> </div> <div class="box3-item"> <img src="image.jpg"> <h3>Subtitle</h3> <h2>Title</h2> <p>Text</p> <button>Button</button> </div> </div>使三个小盒子在大盒子里面水平居中,在同一水平线上
时间: 2024-02-14 08:11:28 浏览: 21
可以使用以下 CSS 代码实现:
```
.box3 {
display: flex;
justify-content: center;
}
.box3-item {
margin: 0 10px;
}
```
这里使用了 Flexbox 布局,将大盒子 `.box3` 设置为 Flex 容器,并使用 `justify-content: center` 让其中的子元素水平居中对齐。而每个小盒子 `.box3-item` 的外边距设置为 `0 10px`,用于让它们之间留有一定的间隔。
相关问题
使用html和css写一个景点排行网页,要求纵向多行,一行一个景点
好的,以下是一个简单的景点排行榜网页示例,纵向多行,一行一个景点:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>景点排行榜</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>景点排行榜</h1>
</header>
<main>
<section>
<h2>第一行</h2>
<ul>
<li>
<div class="img-container">
<img src="image1.jpg" alt="景点1">
</div>
<div class="text-container">
<h3>景点1</h3>
<p>介绍景点1的信息和特点。</p>
</div>
</li>
<li>
<div class="img-container">
<img src="image2.jpg" alt="景点2">
</div>
<div class="text-container">
<h3>景点2</h3>
<p>介绍景点2的信息和特点。</p>
</div>
</li>
<li>
<div class="img-container">
<img src="image3.jpg" alt="景点3">
</div>
<div class="text-container">
<h3>景点3</h3>
<p>介绍景点3的信息和特点。</p>
</div>
</li>
</ul>
</section>
<section>
<h2>第二行</h2>
<ul>
<li>
<div class="img-container">
<img src="image4.jpg" alt="景点4">
</div>
<div class="text-container">
<h3>景点4</h3>
<p>介绍景点4的信息和特点。</p>
</div>
</li>
<li>
<div class="img-container">
<img src="image5.jpg" alt="景点5">
</div>
<div class="text-container">
<h3>景点5</h3>
<p>介绍景点5的信息和特点。</p>
</div>
</li>
<li>
<div class="img-container">
<img src="image6.jpg" alt="景点6">
</div>
<div class="text-container">
<h3>景点6</h3>
<p>介绍景点6的信息和特点。</p>
</div>
</li>
</ul>
</section>
<section>
<h2>第三行</h2>
<ul>
<li>
<div class="img-container">
<img src="image7.jpg" alt="景点7">
</div>
<div class="text-container">
<h3>景点7</h3>
<p>介绍景点7的信息和特点。</p>
</div>
</li>
<li>
<div class="img-container">
<img src="image8.jpg" alt="景点8">
</div>
<div class="text-container">
<h3>景点8</h3>
<p>介绍景点8的信息和特点。</p>
</div>
</li>
<li>
<div class="img-container">
<img src="image9.jpg" alt="景点9">
</div>
<div class="text-container">
<h3>景点9</h3>
<p>介绍景点9的信息和特点。</p>
</div>
</li>
</ul>
</section>
</main>
<footer>
<p>© 2021 景点排行榜,版权所有。</p>
</footer>
</body>
</html>
```
CSS代码:
```css
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: "微软雅黑", sans-serif;
background-color: #f5f5f5;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
}
/* 主体样式 */
main {
width: 80%;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 50px;
}
section h2 {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
li {
width: calc(33.33% - 20px);
margin-right: 20px;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}
.img-container {
width: 100%;
height: 200px;
overflow: hidden;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-container {
padding: 20px;
}
h3 {
margin: 0;
}
p {
line-height: 1.5;
}
/* 底部样式 */
footer {
text-align: center;
background-color: #333;
color: #fff;
padding: 10px;
}
```
以上代码实现了一个简单的景点排行榜网页,使用了HTML和CSS实现。每行有三个景点,使用了Flex布局实现自适应排列。你可以根据自己的需要进行修改和完善,实现更复杂的排行榜效果。
帮我做一个css+div的关于汽车的网页
好的,我可以给你提供一个简单的示例代码,但由于汽车网页的复杂性和多样性,具体的设计和内容需要根据你的需求和想法进行调整和扩展。请注意,以下代码仅供参考。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>汽车网页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>汽车品牌</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">车型</a></li>
<li><a href="#">购车</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<section id="intro">
<h2>品牌介绍</h2>
<p>这是一段品牌介绍的文字内容,可以随意修改。</p>
<a href="#" class="btn">了解更多</a>
</section>
<section id="models">
<h2>车型展示</h2>
<div id="model-list">
<div class="model-item">
<img src="image/model1.jpg" alt="车型1">
<h3>车型1</h3>
<p>这是车型1的描述信息,可以随意修改。</p>
</div>
<div class="model-item">
<img src="image/model2.jpg" alt="车型2">
<h3>车型2</h3>
<p>这是车型2的描述信息,可以随意修改。</p>
</div>
<div class="model-item">
<img src="image/model3.jpg" alt="车型3">
<h3>车型3</h3>
<p>这是车型3的描述信息,可以随意修改。</p>
</div>
</div>
</section>
<section id="buy">
<h2>购车指南</h2>
<p>这是一段购车指南的文字内容,可以随意修改。</p>
<a href="#" class="btn">查看详情</a>
</section>
</main>
<footer>
<p>版权信息 © 2021 汽车品牌. All Rights Reserved.</p>
</footer>
</body>
</html>
```
CSS 代码:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #fff;
}
header {
background-color: #c00;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
font-size: 32px;
font-weight: 700;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: #fff;
color: #c00;
}
main {
margin: 20px;
}
#intro {
text-align: center;
}
#intro h2 {
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
}
#intro p {
margin-bottom: 30px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #c00;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.btn:hover {
background-color: #fff;
color: #c00;
}
#models {
margin-top: 50px;
}
#models h2 {
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
}
#model-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.model-item {
flex-basis: 30%;
margin-bottom: 30px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.model-item img {
display: block;
width: 100%;
margin-bottom: 20px;
border-radius: 5px;
}
.model-item h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
}
#buy {
margin-top: 50px;
text-align: center;
}
#buy h2 {
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
}
#buy p {
margin-bottom: 30px;
}
footer {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
footer p {
margin: 0;
font-size: 14px;
color: #999;
}
```
上面的代码实现了一个简单的汽车品牌网页,包括导航栏、品牌介绍、车型展示、购车指南和页脚等基本元素。你可以根据自己的需求和想法来修改和扩展这些元素,例如增加更多的页面区块、优化样式和布局、添加交互效果等等。