使用html写一个使用CSS美化的、符合最新潮流的手机版信息目录显示网页
<!DOCTYPE html>
<html>
<head>
<title>手机版信息目录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 15px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
margin: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 45%;
max-width: 350px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width: 100%;
height: 200px;
object-fit: cover;
}
.card h3 {
padding: 10px;
font-size: 22px;
text-align: center;
}
.card p {
padding: 10px;
font-size: 18px;
text-align: justify;
}
@media screen and (max-width: 600px) {
.card {
width: 90%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>手机版信息目录</h1>
</div>
<div class="container">
<div class="card">
<img src="https://picsum.photos/200/300">
<h3>文章标题</h3>
<p>这是一段文章内容，可以包含一些简短的描述信息。</p>
</div>
<div class="card">
<img src="https://picsum.photos/200/300">
<h3>文章标题</h3>
<p>这是一段文章内容，可以包含一些简短的描述信息。</p>
</div>
<div class="card">
<img src="https://picsum.photos/200/300">
<h3>文章标题</h3>
<p>这是一段文章内容，可以包含一些简短的描述信息。</p>
</div>
<div class="card">
<img src="https://picsum.photos/200/300">
<h3>文章标题</h3>
<p>这是一段文章内容，可以包含一些简短的描述信息。</p>
</div>
<div class="card">
<img src="https://picsum.photos/200/300">
<h3>文章标题</h3>
<p>这是一段文章内容，可以包含一些简短的描述信息。</p>
</div>
<div class="card">
<img src="https://picsum.photos/200/300">
<h3>文章标题</h3>
<p>这是一段文章内容，可以包含一些简短的描述信息。</p>
</div>
</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hkRm 著作权归作者所有。请勿转载和采集!