学习HTML+css
<p>以下是进一步美化的网页代码，增加了更复杂的设计元素和交互效果，同时保持页面的现代感和美观性：</p><h3 id="进一步美化后的代码">进一步美化后的代码：</h3>
<pre><code class="language-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>
/* 全局样式 */
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}
/* 头部样式 */
header {
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
padding: 80px 0;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 10%, transparent 10.01%);
background-size: 20px 20px;
animation: moveBackground 10s linear infinite;
opacity: 0.5;
}
@keyframes moveBackground {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(20px, 20px);
}
}
header h1 {
margin: 0;
font-size: 3rem;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 1;
}
/* 容器样式 */
.container {
width: 90%;
max-width: 1200px;
margin: 40px auto;
background-color: #fff;
padding: 40px;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
/* 标题样式 */
h2 {
color: #2575fc;
font-size: 2.2rem;
margin-bottom: 25px;
position: relative;
display: inline-block;
}
h2::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50%;
height: 3px;
background: linear-gradient(90deg, #2575fc, #6a11cb);
border-radius: 2px;
}
/* 列表样式 */
ul {
list-style-type: none;
padding: 0;
}
ul li {
background-color: #f4f4f4;
margin: 10px 0;
padding: 15px;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
ul li:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 12px;
text-align: left;
}
th {
background-color: #2575fc;
color: #fff;
font-weight: 600;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
/* 表单样式 */
form {
display: flex;
flex-direction: column;
}
form label {
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
form input, form textarea {
margin-bottom: 15px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
form input:focus, form textarea:focus {
border-color: #2575fc;
box-shadow: 0 0 8px rgba(37, 117, 252, 0.3);
outline: none;
}
form button {
padding: 12px;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
form button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(37, 117, 252, 0.3);
}
/* 响应式设计 */
@media (max-width: 768px) {
header h1 {
font-size: 2rem;
}
.container {
padding: 20px;
}
h2 {
font-size: 1.8rem;
}
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的博客</h1>
</header>
<div class="container">
<!-- 关于我模块 -->
<section id="about-me">
<h2>关于我</h2>
<p>你好！我是一名热爱编程和学习的开发者。我喜欢探索新技术，并且热衷于分享我的知识和经验。</p>
</section>
<!-- 我的技能模块 -->
<section id="my-skills">
<h2>我的技能</h2>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>数据库管理</li>
</ul>
</section>
<!-- 我的时间表模块 -->
<section id="my-schedule">
<h2>我的学习时间表</h2>
<table>
<thead>
<tr>
<th>时间</th>
<th>活动</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00 - 10:00</td>
<td>阅读技术文章</td>
</tr>
<tr>
<td>10:00 - 12:00</td>
<td>编程练习</td>
</tr>
<tr>
<td>12:00 - 13:00</td>
<td>午餐</td>
</tr>
<tr>
<td>13:00 - 15:00</td>
<td>项目开发</td>
</tr>
<tr>
<td>15:00 - 16:00</td>
<td>休息</td>
</tr>
<tr>
<td>16:00 - 18:00</td>
<td>学习新技能</td>
</tr>
</tbody>
</table>
</section>
<!-- 联系我模块 -->
<section id="contact-me">
<h2>联系我</h2>
<form action="#" method="post">
<label for="name">名称:</label>
<input type="text" id="name" name="name" required>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<label for="message">消息:</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">提交</button>
</form>
</section>
</div>
</body>
</html>
</code></pre>
<hr>
<h3 id="新增的美化技术和设计元素">新增的美化技术和设计元素：</h3>
<ol>
<li>
<p><strong>动态背景 (<code>header::before</code> 和 <code>@keyframes</code>)</strong>：</p>
<ul>
<li>使用 <code>radial-gradient</code> 创建了一个动态背景，通过 <code>@keyframes</code> 实现背景的移动效果，增加了页面的活力。</li>
</ul>
</li>
<li>
<p><strong>标题下划线渐变 (<code>h2::after</code>)</strong>：</p>
<ul>
<li>使用伪元素 <code>::after</code> 为标题添加了一个渐变下划线，提升了标题的视觉效果。</li>
</ul>
</li>
<li>
<p><strong>卡片悬停效果 (<code>ul li:hover</code>)</strong>：</p>
<ul>
<li>列表项在悬停时会向上移动并增加阴影，增强了交互感。</li>
</ul>
</li>
<li>
<p><strong>按钮渐变背景和悬停效果 (<code>form button</code>)</strong>：</p>
<ul>
<li>按钮使用了渐变背景，并在悬停时增加了微小的位移和阴影，使其更具吸引力。</li>
</ul>
</li>
<li>
<p><strong>输入框聚焦效果 (<code>form input:focus</code>, <code>form textarea:focus</code>)</strong>：</p>
<ul>
<li>输入框在聚焦时会显示渐变阴影，提升了用户体验。</li>
</ul>
</li>
<li>
<p><strong>响应式设计优化 (<code>@media</code>)</strong>：</p>
<ul>
<li>在小屏幕设备上调整了字体大小和容器内边距，确保页面在不同设备上都能良好显示。</li>
</ul>
</li>
<li>
<p><strong>字体和排版优化</strong>：</p>
<ul>
<li>使用了 <code>Poppins</code> 字体，使页面更具现代感。</li>
</ul>
</li>
</ol>
<hr>
<h3 id="美化后的效果">美化后的效果：</h3>
<ul>
<li>页面整体更加动态和现代。</li>
<li>动态背景和渐变效果增加了视觉吸引力。</li>
<li>交互效果（如悬停和聚焦）更加丰富和细腻。</li>
<li>响应式设计确保页面在不同设备上都能良好显示。</li>
</ul><br><br>
来源：https://www.cnblogs.com/zhaoyaxuan2024/p/18753690
頁:
[1]