请参照网址https://www.17sucai.com/pins/2329.html中的示例图片,写一个html网页并给出代码
时间: 2023-05-29 16:07:38 浏览: 166
<!DOCTYPE html>
<html>
<head>
<title>示例网页</title>
<style>
body{
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
header{
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
margin-bottom: 20px;
}
h1{
margin: 0;
font-size: 36px;
}
nav{
background-color: #666;
color: #fff;
padding: 10px;
margin-bottom: 20px;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul li{
margin: 0 10px;
font-size: 20px;
font-weight: bold;
}
main{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
article{
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
flex-basis: calc(33.33% - 20px);
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
}
article h2{
margin: 0;
font-size: 24px;
margin-bottom: 10px;
}
article p{
margin: 0;
font-size: 18px;
line-height: 1.5;
}
article img{
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
footer{
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<header>
<h1>示例网页</h1>
</header>
<nav>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</nav>
<main>
<article>
<img src="https://via.placeholder.com/400x250" alt="图片1">
<h2>文章标题1</h2>
<p>这是一段文章内容,可以包含多个段落。</p>
</article>
<article>
<img src="https://via.placeholder.com/400x250" alt="图片2">
<h2>文章标题2</h2>
<p>这是一段文章内容,可以包含多个段落。</p>
</article>
<article>
<img src="https://via.placeholder.com/400x250" alt="图片3">
<h2>文章标题3</h2>
<p>这是一段文章内容,可以包含多个段落。</p>
</article>
<article>
<img src="https://via.placeholder.com/400x250" alt="图片4">
<h2>文章标题4</h2>
<p>这是一段文章内容,可以包含多个段落。</p>
</article>
<article>
<img src="https://via.placeholder.com/400x250" alt="图片5">
<h2>文章标题5</h2>
<p>这是一段文章内容,可以包含多个段落。</p>
</article>
<article>
<img src="https://via.placeholder.com/400x250" alt="图片6">
<h2>文章标题6</h2>
<p>这是一段文章内容,可以包含多个段落。</p>
</article>
</main>
<footer>
版权所有 © 2021 示例网页
</footer>
</body>
</html>
阅读全文