Compiled a homepage of the website, referring to online examples. The interface is as follows
code show as below:
<!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>flexible layout display</title>
</head>
<style type="text/css">
* {
box-sizing: border-box;
}
/* Set the style of the body element */
body {
font-family: arial;
margin: 0;
}
/* Title / LOGO */
.header {
padding: 10px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Set the top navigation bar style */
.navbar {
display: flex;
background-color: #333;
}
/* Set the navigation bar link demo */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change the color when the mouse is hovered */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create side-by-side non-equal columns */
/* Sidebar / Left column */
.side {
flex: 30%;
background-color: white;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 10px;
text-align: center;
background: #ddd;
}
/* Responsive layout-when the screen is less than 700 pixels wide, let the two columns stack instead of side by side */
@media screen and (max-width:700px) {
.row,
.navbar {
flex-direction: column;
}
}
</style>
<body>
<div id="" class="header">
<h3>My website</h3>
<p>With <b>flexible</b> layout, please adjust the browser window to see the corresponding effect</p>
</div>
<div id="" class="navbar">
<a href="#">Site Introduction</a>
<a href="#">Important information</a>
<a href="#">关于</a>
<a href="#">Contact information</a>
</div>
<div class="row">
<div class="side">
<h3>About me</h3>
<h5>My photos</h5>
<div class="fakeimg" style="height: 100px;">
image
</div>
<p>About me</p>
<h3>More Text</h3>
<p>More information can be written here.</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>Title</h3>
<h5>Title description, January 1, 2021</h5>
<div class="fakeimg" style="height:100px;">图像</div>
<p>Some text...</p>
<p>Some introduction about images.
</p>
<br>
<h3>Title</h3>
<h5>Title description, January 2, 2021</h5>
<div class="fakeimg" style="height:100px;">图像</div>
<p>Some text...</p>
<p>The introduction of the second image can be used as news. The introduction of the second image can be used as news. The introduction of the second image can be used as news.
</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
<script>
var app = Vue.createApp ({
data() {
return {
message: 'yufuchang.com '
}
},
template: "<h2>{ {message}}</h2>"
})
var vm = app.mount("#app")
</script>
</html>