主页界面代码然后有返回按钮在右上角其中显示的文本是中文中文文本居中由页头与中间内容板块与页尾与菜单导航栏四部分组成可以插入背景图片
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<pre><code> .header {
text-align: center;
font-size: 36px;
color: #fff;
margin-top: 50px;
}
.content {
text-align: center;
font-size: 24px;
color: #fff;
margin-top: 100px;
}
.footer {
text-align: center;
font-size: 18px;
color: #fff;
margin-top: 50px;
}
.menu {
position: fixed;
top: 0;
right: 0;
background-color: #333;
padding: 10px;
color: #fff;
}
.menu a {
color: #fff;
text-decoration: none;
margin-right: 10px;
}
.back-button {
position: fixed;
top: 0;
left: 0;
padding: 10px;
color: #fff;
}
.back-button a {
color: #fff;
text-decoration: none;
}
</style>
</code></pre>
</head>
<body>
<div class="back-button">
<a href="#">返回</a>
</div>
<div class="menu">
<a href="#">菜单1</a>
<a href="#">菜单2</a>
<a href="#">菜单3</a>
</div>
<div class="header">
<h1>欢迎来到主页</h1>
</div>
<div class="content">
<p>这里是主页的中间内容板块</p>
</div>
<div class="footer">
<p>版权所有 © 2021</p>
</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hgrN 著作权归作者所有。请勿转载和采集!