HTML/CSS 设计一个网页

接下来我们通过 HTML/CSS 来创建一个简单的响应式网页。

在学习之前我们可以先看下效果：images/2021/07/13/06/2021071306241012461390.htm

CSS 代码

* {    box-sizing: border-box;} /* body 样式 */body {    font-family: Arial;    margin: 0;} /* 标题 */.header {    padding: 80px;    text-align: center;    background: #1abc9c;    color: white;} /* 标题字体加大 */.header h1 {    font-size: 40px;} /* 导航 */.navbar {    overflow: hidden;    background-color: #333;} /* 导航栏样式 */.navbar a {    float: left;    display: block;    color: white;    text-align: center;    padding: 14px 20px;    text-decoration: none;} /* 右侧链接*/.navbar a.right {    float: right;} /* 鼠标移动到链接的颜色 */.navbar a:hover {    background-color: #ddd;    color: black;} /* 列容器 */.row {      display: -ms-flexbox; /* IE10 */    display: flex;    -ms-flex-wrap: wrap; /* IE10 */    flex-wrap: wrap;} /* 创建两个列 *//* 边栏 */.side {    -ms-flex: 30%; /* IE10 */    flex: 30%;    background-color: #f1f1f1;    padding: 20px;} /* 主要的内容区域 */.main {       -ms-flex: 70%; /* IE10 */    flex: 70%;    background-color: white;    padding: 20px;} /* 测试图片 */.fakeimg {    background-color: #aaa;    width: 100%;    padding: 20px;} /* 底部 */.footer {    padding: 20px;    text-align: center;    background: #ddd;} /* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */@media screen and (max-width: 700px) {    .row {           flex-direction: column;    }} /* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */@media screen and (max-width: 400px) {    .navbar a {        float: none;        width: 100%;    }}