当前位置：首页 > news >正文

datawhale玩转通义四大新模型 202509 第6次作业

news 2025/9/25 16:48:24

探索Qwen3-30B-A22B的玩法

作业：帮我用 HTML/CSS 设计一个响应式的作品集网站

prompt:

帮我用 HTML/CSS 设计一个响应式的作品集网站

当然可以！下面是一个简洁、现代且响应式的个人作品集网站（Portfolio Website）的完整 HTML/CSS 代码。它包含：

响应式导航栏
首页介绍
作品展示区
关于我
联系方式
使用 Flexbox 和媒体查询实现移动端适配

✅ 文件结构：

portfolio/
├── index.html
└── style.css

📄 `index.html`

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>我的作品集</title><link rel="stylesheet" href="style.css" />
</head>
<body><!-- 导航栏 --><nav class="navbar"><div class="container nav-container"><a href="#" class="logo">MyPortfolio</a><ul class="nav-menu"><li><a href="#home">首页</a></li><li><a href="#projects">作品</a></li><li><a href="#about">关于我</a></li><li><a href="#contact">联系</a></li></ul><div class="hamburger"><span class="bar"></span><span class="bar"></span><span class="bar"></span></div></div></nav><!-- 主内容 --><main><!-- 首页 --><section id="home" class="hero"><div class="container"><h1>你好，我是 <span>小明</span></h1><p>前端开发者 & UI设计师</p><a href="#projects" class="btn">查看我的作品</a></div></section><!-- 作品展示 --><section id="projects" class="projects"><div class="container"><h2>我的作品</h2><div class="project-grid"><div class="project-item"><img src="https://via.placeholder.com/300x200" alt="项目1" /><h3>电商网站设计</h3><p>使用 React 和 Tailwind CSS 构建的现代电商平台。</p></div><div class="project-item"><img src="https://via.placeholder.com/300x200" alt="项目2" /><h3>移动App界面</h3><p>Figma 设计的健康类 App 界面原型。</p></div><div class="project-item"><img src="https://via.placeholder.com/300x200" alt="项目3" /><h3>博客系统开发</h3><p>Node.js + MongoDB 后端支持的个人博客平台。</p></div></div></div></section><!-- 关于我 --><section id="about" class="about"><div class="container"><h2>关于我</h2><div class="about-content"><div class="about-text"><p>我是一名热爱设计与编程的全栈开发者，拥有3年前端开发经验。我喜欢创造美观且用户友好的数字产品。</p><p>技能包括：HTML/CSS, JavaScript, React, Figma, Node.js 等。</p></div><div class="skills"><h3>技能</h3><ul><li>HTML/CSS</li><li>JavaScript</li><li>React</li><li>Figma</li><li>Node.js</li></ul></div></div></div></section><!-- 联系 --><section id="contact" class="contact"><div class="container"><h2>联系我</h2><form class="contact-form"><input type="text" placeholder="你的名字" required /><input type="email" placeholder="你的邮箱" required /><textarea rows="5" placeholder="你的消息..." required></textarea><button type="submit" class="btn">发送消息</button></form></div></section></main><!-- 页脚 --><footer><div class="container"><p>&copy; 2025 小明. 版权所有.</p><div class="social-links"><a href="#">GitHub</a><a href="#">LinkedIn</a><a href="#">Behance</a></div></div></footer><script>// 简单的汉堡菜单切换功能const hamburger = document.querySelector(".hamburger");const navMenu = document.querySelector(".nav-menu");hamburger.addEventListener("click", () => {hamburger.classList.toggle("active");navMenu.classList.toggle("active");});// 点击导航项后收起菜单（移动端）document.querySelectorAll(".nav-menu a").forEach(link => {link.addEventListener("click", () => {hamburger.classList.remove("active");navMenu.classList.remove("active");});});</script>
</body>
</html>

`style.css`

/* 全局样式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333;background-color: #f9f9f9;
}.container {width: 90%;max-width: 1200px;margin: 0 auto;padding: 20px;
}h1, h2, h3 {color: #222;
}.btn {display: inline-block;padding: 12px 24px;background: #007bff;color: white;text-decoration: none;border-radius: 6px;margin-top: 20px;transition: background 0.3s ease;
}.btn:hover {background: #0056b3;
}/* 导航栏 */
.navbar {background: white;box-shadow: 0 2px 10px rgba(0,0,0,0.1);position: fixed;top: 0;width: 100%;z-index: 1000;
}.nav-container {display: flex;justify-content: space-between;align-items: center;padding: 15px 0;
}.logo {font-size: 1.8rem;font-weight: bold;color: #007bff;text-decoration: none;
}.nav-menu {display: flex;list-style: none;gap: 2rem;
}.nav-menu a {text-decoration: none;color: #333;font-weight: 500;transition: color 0.3s;
}.nav-menu a:hover {color: #007bff;
}.hamburger {display: none;cursor: pointer;
}.bar {display: block;width: 25px;height: 3px;margin: 5px auto;background: #333;transition: all 0.3s ease-in-out;
}/* 主体区域 */
.hero {padding: 120px 0 80px;text-align: center;background: linear-gradient(135deg, #6e8efb, #a777e3);color: white;
}.hero h1 span {color: #fff;font-weight: bold;
}.hero p {font-size: 1.2rem;margin: 15px 0;
}/* 作品区 */
.projects {padding: 80px 0;background: #fff;
}.projects h2 {text-align: center;margin-bottom: 40px;font-size: 2rem;
}.project-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;
}.project-item {background: #f4f4f4;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 8px rgba(0,0,0,0.1);transition: transform 0.3s ease;
}.project-item:hover {transform: translateY(-10px);
}.project-item img {width: 100%;height: 200px;object-fit: cover;
}.project-item h3 {padding: 15px;font-size: 1.3rem;
}.project-item p {padding: 0 15px 15px;color: #666;
}/* 关于我 */
.about {padding: 80px 0;background: #f0f4f8;
}.about h2 {text-align: center;margin-bottom: 40px;font-size: 2rem;
}.about-content {display: flex;flex-wrap: wrap;gap: 30px;justify-content: center;
}.about-text, .skills {flex: 1;min-width: 300px;background: white;padding: 20px;border-radius: 10px;box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}.skills ul {list-style: none;
}.skills li {padding: 8px 0;border-bottom: 1px solid #eee;
}/* 联系 */
.contact {padding: 80px 0;background: #fff;
}.contact h2 {text-align: center;margin-bottom: 40px;font-size: 2rem;
}.contact-form {max-width: 600px;margin: 0 auto;display: flex;flex-direction: column;gap: 15px;
}.contact-form input,
.contact-form textarea {padding: 12px;border: 1px solid #ddd;border-radius: 6px;font-size: 1rem;
}.contact-form button {margin-top: 10px;
}/* 页脚 */
footer {background: #222;color: #ccc;padding: 30px 0;text-align: center;
}footer p {margin-bottom: 15px;
}.social-links a {color: #007bff;margin: 0 10px;text-decoration: none;
}.social-links a:hover {text-decoration: underline;
}/* 响应式设计 */
@media (max-width: 768px) {.nav-menu {position: fixed;left: -100%;top: 70px;flex-direction: column;background-color: white;width: 100%;text-align: center;transition: 0.3s;box-shadow: 0 10px 10px rgba(0,0,0,0.1);padding: 20px 0;}.nav-menu.active {left: 0;}.hamburger {display: block;}.hamburger.active .bar:nth-child(2) {opacity: 0;}.hamburger.active .bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}.hamburger.active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}.hero h1 {font-size: 2rem;}.about-content {flex-direction: column;}
}@media (max-width: 480px) {.container {width: 95%;}.project-grid {grid-template-columns: 1fr;}
}

显示如下：