用HTML写一个新闻网站,用到盒子模型,有内容的盒子要有大有小
时间: 2023-05-27 10:08:07 浏览: 50
<!DOCTYPE html>
<html>
<head>
<title>新闻网站</title>
<style>
/* 盒子模型 */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
margin: 20px 0;
}
.col {
flex: 1;
margin: 0 10px;
background-color: #f2f2f2;
padding: 10px;
box-sizing: border-box;
}
.col.small {
flex-basis: 30%;
}
/* 样式 */
h1 {
text-align: center;
margin-top: 50px;
}
h2 {
margin-top: 30px;
font-size: 24px;
}
p {
line-height: 1.5;
margin-top: 10px;
text-indent: 2em;
}
img {
max-width: 100%;
height: auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>新闻网站</h1>
<div class="row">
<div class="col">
<h2>大标题</h2>
<p>这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。</p>
<img src="https://picsum.photos/400/200" alt="图片">
</div>
<div class="col small">
<h2>小标题1</h2>
<p>这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。</p>
</div>
<div class="col small">
<h2>小标题2</h2>
<p>这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。</p>
</div>
</div>
<div class="row">
<div class="col small">
<h2>小标题3</h2>
<p>这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。</p>
</div>
<div class="col">
<h2>大标题</h2>
<p>这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。</p>
<img src="https://picsum.photos/400/200" alt="图片">
</div>
<div class="col small">
<h2>小标题4</h2>
<p>这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。这是一段新闻内容。</p>
</div>
</div>
</div>
</body>
</html>