编写了一个网站首页，参照网上的例子。界面如下
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@next"></script>
<title>弹性布局展示</title>
</head>
<style type="text/css">
* {
box-sizing: border-box;
}
/* 设置 body 元素的样式 */
body {
font-family: arial;
margin: 0;
}
/* 标题 / LOGO */
.header {
padding: 10px;
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: white;
padding: 20px;
}
/* 主列 */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* 伪图像，仅供示例 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 页脚 */
.footer {
padding: 10px;
text-align: center;
background: #ddd;
}
/* 响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排 */
@media screen and (max-width:700px) {
.row,
.navbar {
flex-direction: column;
}
}
</style>
<body>
<div id="" class="header">
<h3>我的网站</h3>
<p>拥有<b>弹性</b>布局,请调整浏览器窗口来查看相应效果</p>
</div>
<div id="" class="navbar">
<a href="#">网站简介</a>
<a href="#">重要信息</a>
<a href="#">关于</a>
<a href="#">联系方式</a>
</div>
<div class="row">
<div class="side">
<h3>关于我</h3>
<h5>我的照片</h5>
<div class="fakeimg" style="height: 100px;">
图像
</div>
<p>关于我的简介</p>
<h3>More Text</h3>
<p>更多的信息可以写到这里.</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">
<h3>标题</h3>
<h5>标题描述，2021 年 1 月 1 日</h5>
<div class="fakeimg" style="height:100px;">图像</div>
<p>一些文本..</p>
<p>关于图像的一些简介.
</p>
<br>
<h3>标题</h3>
<h5>标题描述，2021 年 1 月 2 日</h5>
<div class="fakeimg" style="height:100px;">图像</div>
<p>一些文本..</p>
<p>第二个图像的简介，可以当作新闻使用.第二个图像的简介，可以当作新闻使用.第二个图像的简介，可以当作新闻使用.
</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h2>页脚</h2>
</div>
</body>
<script>
var app = Vue.createApp({
data() {
return {
message: 'yufuchang.com '
}
},
template: "<h2>{ {message}}</h2>"
})
var vm = app.mount("#app")
</script>
</html>