小慕医生 – 责任、品质、关爱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小慕医生 - 责任、品质、关爱</title>
<meta name="Description" content="小慕医生是专业的医院，理念就是责任、品质、关爱">
<meta name="Keywords" content="美容，减脂，内科，外科">
</head>
<style type="text/css">
/* 设置页眉的样式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* 网页的主要内容 */
#tr11,#tr12,#tr13 {
float: left;
width: 30%;
padding: 10px;
}
/* 清除列之后的浮动 */
.content:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 创建堆叠而非并排的三列 */
@media screen and (max-width:600px) {
#tr11,#tr12 {
width: 100%;
}
#tr13 {
display: none;
}
}
</style>
<body>
<!-- 页面头部 -->
<div class="header">
<h1>Header</h1>
<p>请调整浏览器窗口的大小以查看响应效果。</p>
</div>
<!-- 网页的主要内容 -->
<section class="content">
<div id="tr11">
<samp>列表1</samp>
<p>列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1</p>
</div>
<div id="tr12">
<samp>列表2</samp>
<p>列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1</p>
</div>
<div id="tr13">
<samp>列表3</samp2>
<p>列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1列表1</p>
</div>
</section>
<!-- 页脚 -->
<footer>
</footer>
</body>
</html>