主页界面代码然后有返回按钮在右上角其中显示的文本是中文中文文本居中有页头与中间内容板块与页尾与菜单导航栏可以插入背景图片
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<style>
body {
background-image: url("背景图片.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.header {
text-align: center;
font-size: 36px;
margin-top: 50px;
}
.menu {
background-color: #333;
color: #fff;
padding: 10px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.menu li {
margin: 0 20px;
}
.content {
margin-top: 100px;
text-align: center;
font-size: 24px;
}
.footer {
text-align: center;
font-size: 18px;
margin-top: 50px;
}
.return-btn {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="return-btn">返回</button>
<div class="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</div>
<div class="header">中文文本居中</div>
<div class="content">中间内容板块</div>
<div class="footer">页尾</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hgrx 著作权归作者所有。请勿转载和采集!