这个网站的主页设计采用了HTML和CSS,实现了一个简洁而实用的布局。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站名称</title>
<style>
@media (min-aspect-ratio: 4/3) {
.container { width: 100%; padding-top: 75%; background-position: center; background-repeat: no-repeat; background-size: cover; }
}
.container { text-align: center; word-break: keep-all; height: 100%; width: 100%; background: white; font-size: 14px; min-height: 450px; position: relative; margin: auto; }
.content { width: 100%; height: 100%; padding: 2rem; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.logo { display: block; text-align: center; margin-bottom: 2rem; }
.intercepted { margin-top: 3.5rem; margin-bottom: 1.5rem; font-size: 20px; line-height: 1.6; color: #333; text-align: center; }
.intercepted-item { margin: 8px 0; color: #666; font-weight: bold; text-decoration: none; }
.footer { position: fixed; bottom: 2rem; right: 2rem; width: calc(100% - 10rem); text-align: center; font-size: 14px; opacity: 0.5; color: #ccc; transition: all ease-in-out 0.3s; z-index: 999; cursor: pointer; user-select: none; transform: translateX(1rem); transition-property: transform; transition-duration: calc(var(--p,0))s ease-in-out; transition-timing-function: var(--t,ease); transition-delay: calc(var(--d,0))s; transition-iteration-count: var(--i,infinite); transition-direction: var(--dir,normal); box-shadow: none!important; outline: none!important; border-radius: initial!important; overflow-wrap: break-word!important;">回到顶部</div>
</style>
</head>
<body>
<div class="container">
<div class="logo">网站Logo</div>
<div class="content">
<h1>网站标题</h1>
<p>网站简介</p>
</div>
</div>
</body>
</html>
该网站使用了HTML作为页面结构的基础，通过CSS样式来定义页面的布局、颜色、字体等外观元素。页面中的主要内容包括一个居中的容器(.container),其中包含一个内容区(.content),用于展示网站的标题和简介。此外，还包含一个固定位置在右侧的页脚(.footer)。整个页面的高度设置为100%,以确保其占据整个可视区域。整体风格简洁大方，适用于各种场景。
