html运行实例（cssref_media_2）-搜寻教程库

代码示例：（标识：cssref_media_2）
<!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 的样式 */
body {
  font-family: Arial;
  margin: 0;
}

/* 页眉/LOGO */
.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;
}

/* 创建两个并排的等列 */
/* Sidebar/left column */
.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;
}

/* 响应式布局 - 当屏幕宽度小于 700 像素时，使两列堆叠，而不是并排 */
@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>

<!-- Header -->
<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>