<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0;
}
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
.navbar {
display: flex;
background-color: #333;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.row {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
@media (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<div style="background:yellow;padding:5px">
<h4 style="text-align:center">请调整浏览器窗口的大小以查看响应效果。</h4>
</div>
<div class="header">
<h1>我的网站</h1>
<p>拥有<b>弹性</b>布局。</p>
</div>
<div class="navbar">
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
</div>
<div class="row">
<div class="side">
<h2>关于我</h2>
<h5>我的照片:</h5>
<div class="fakeimg" style="height:200px;">图像</div>
<p>hello world!</p>
<h3>更多文本</h3>
<p>Welcome to Shanghai!</p>
<div class="fakeimg" style="height:60px;">图像</div><br>
<div class="fakeimg" style="height:60px;">图像</div><br>
<div class="fakeimg" style="height:60px;">图像</div>
</div>
<div class="main">
<h2>标题</h2>
<h5>标题描述, Dec 7, 2021</h5>
<div class="fakeimg" style="height:200px;">图像</div>
<p>一些文本..</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<br>
<h2>标题</h2>
<h5>标题描述, Sep 2, 2021</h5>
<div class="fakeimg" style="height:200px;">图像</div>
<p>一些文本..</p>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
</div>
</div>
<div class="footer">
<h2>页脚</h2>
</div>
</body>
</html>