3.3
Web课，css的用法，
我的博客界面，优化界面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的博客主页</title>
<style>
body {font-family: Arial, sans-serif;background-color: #f4f4f9;}
th {background-color: #9cf4bf; color: white;}
.header{ text-align: center; padding: 40px 20px; background-color: #5fba7d; color: white;}
.container {width: 90%; margin:auto; overflow:hidden; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.1);}
.about, .skills, .schedule, .contact-form {margin-bottom: 30px; padding: 20px; border-radius: 8px; background-color: #eef2f7;}
/* 改进表格样式 */
table {width: 100%; border-collapse: collapse; margin-top: 20px;}
th, td {padding: 15px; text-align: left; border: 1px solid #d1d1d1;}
th {background-color: #9cf4bf; color: white;}
/* 表单样式 */
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {width: calc(100% - 22px); padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px;}
.contact-form input[type="submit"] {background-color: #5fba7d; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;}
.contact-form input[type="submit"]:hover {background-color: #5fba7d;}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>欢迎来到我的博客主页</h1>
</div>
<!-- 关于我模块 -->
<div class="about">
<h2>关于我</h2>
<p>这是一个关于我个人的简短介绍。</p>
<p> hello！我是王凯旋，来自信2305-1班。</p>
</div>
<!-- 我的技能模块 -->
<div class="skills">
<h2>我的技能</h2>
<ul>
<li>唱歌</li>
</ul>
</div>
<!-- 我的时间表模块 -->
<div class="schedule">
<h2>我的时间表</h2>
<table>
<tr><th>时间</th><th>活动</th></tr>
<tr><td>9:00 - 11:00</td><td>学习编程</td></tr>
<tr><td>13:00 - 15:00</td><td>上课</td></tr>
<tr><td>16:00 - 17:00</td><td>阅读书籍</td></tr>
</table>
</div>
<!-- 联系我模块 -->
<div class="contact-form">
<h2>联系我</h2>
<form action="/submit-your-form-url" method="post">
<label for="name">姓名:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">电子邮件:</label><br>
<input type="email" id="email" name="email"><br>
<label for="message">消息:</label><br>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="提交">
</form>
</div>
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步