赶快回家网首页制作代码,服务器做云主机,vps和服务器有什么区别,境外买云主机,奥地利vps

🗣 Wd提问: 赶快回家网首页制作代码

🤖 Ai回答:
以下是简洁实用的赶快回家网站首页基础代码，直接复制保存为`index.html`即可运行：

html
<!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
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; background: f8f9fa; }
header {
background: linear-gradient(135deg, 6a11cb 0%, 2575fc 100%);
color: white;
padding: 2rem 0;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
nav {
display: flex;
justify-content: center;
gap: 2rem;
padding: 1.5rem 0;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
nav a {
color: 333;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
}
nav a:hover { color: 6a11cb; }
main {
padding: 3rem 0;
}
.hero {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 3rem;
}
.hero-text h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: 2c3e50;
}
.hero-text p {
font-size: 1.2rem;
color: 7f8c8d;
line-height: 1.6;
}
.btn {
display: inline-block;
background: 6a11cb;
color: white;
padding: 12px 24px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
margin-top: 1rem;
}
.btn:hover { background: 4a0e8e; transform: translateY(-3px); }
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s;
}
.feature-card:hover { transform: translateY(-5px); }
footer {
background: 2c3e50;
color: white;
text-align: center;
padding: 2rem 0;
margin-top: 3rem;
}
@media (max-width: 768px) {
.hero { flex-direction: column; text-align: center; }
.hero-text { margin-bottom: 2rem; }
nav { flex-wrap: wrap; }
}
</style
</head
<body
<header
<div class=container
<h1赶快回家</h1
<p安全回家路，温暖在身边</p
</div
</header

<nav
<a href=首页</a
<a href=回家路线</a
<a href=安全提示</a
<a href=紧急联系</a
<a href=关于我们</a
</nav

<main class=container
<section class=hero
<div class=hero-text
<h1安全回家，温暖相伴</h1
<p我们提供实时路况、安全提醒和回家路线规划，让您的回家之路更安心、更便捷。无论白天黑夜，我们始终守护您的归途。</p
<a href= class=btn立即规划路线</a
</div
<div class=hero-img style=width: 300px; height: 200px; background: e0e7ff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: 6a11cb; font-weight: bold;
[回家路线示意图]
</div
</section

<section class=features
<div class=feature-card
<h3实时路况</h3
<p获取最新道路信息，避开拥堵路段，节省回家时间</p
</div
<div class=feature-card
<h3安全提醒</h3
<p异常天气预警、危险区域提示，守护您的出行安全</p
</div
<div class=feature-card
<h3一键呼救</h3
<p遇到紧急情况，快速联系家人和警方，保障人身安全</p
</div
</section
</main

<footer
<p© 2023 赶快回家 | 安全回家，温暖相伴</p
<p客服热线：400-123-4567 | 服务时间：8:00-22:00</p
</footer
</body
</html

使用说明：
1、复制全部代码
2、新建文本文件，粘贴代码
3、保存为 `index.html`
4、用浏览器直接打开即可查看效果

特点：
完全响应式设计（适配手机/平板/电脑）
现代化渐变色设计 + 卡片式布局
包含完整页面结构（头部/导航/内容/页脚）
交互效果（悬停动画、按钮效果）
移动端适配优化
无需任何外部依赖

提示：实际使用时可替换图片和文字内容，如需添加地图功能可集成高德/百度地图API，需要进一步开发可随时补充说明。

Ai作答

📣 商家广告：