3月4日进度条

学习时间4小时
代码行数：190行
具体知识点：外部样式表、盒模型规范、字体和排版等。

---

关于我

姓名：丁明辉

性别：男

专业：软件工程

没有自拍照，随便放了张图片

---

    <hr color="red">
    <h2>我的技能</h2>
    <ul>
        <li>HTML/CSS</li>
        <li>JavaScript</li>
        <li>Java</li>
        <li>Python</li>
    </ul>
    <hr color="red">
    
    <hr color="blue">
    <h2>我的时间表</h2>
    <table>
        <thead>
            <tr>
                <th>时间</th>
                <th>活动</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>08:00 - 09:00</td>
                <td>早餐和准备</td>
            </tr>
            <tr>
                <td>09:00 - 13:00</td>
                <td>学习编程</td>
            </tr>
            <tr>
                <td>13:00 - 14:00</td>
                <td>午餐</td>
            </tr>
            <tr>
                <td>14:00 - 18:00</td>
                <td>项目开发</td>
            </tr>
            <tr>
                <td>18:00 - 19:00</td>
                <td>晚餐</td>
            </tr>
            <tr>
                <td>19:00 - 21:00</td>
                <td>复习和学习新知识</td>
            </tr>
            <tr>
                <td>21:00 - 22:00</td>
                <td>休息</td>
            </tr>
        </tbody>
    </table>
    <hr color="blue">
    
    <hr color="orange">
    <h2>联系我</h2>
    <form>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
        
        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" placeholder="请输入您的电子邮件" required>
        
        <label for="message">消息:</label>
        <textarea id="message" name="message" rows="5" placeholder="请输入您的消息" required></textarea>
        
        <input type="submit" value="提交">
    </form>
    <hr color="orange">
</div>

/* 基本样式 */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f9f9f9; color: #333; line-height: 1.6; }

.container {
max-width: 800px;
margin: 40px auto;
background: #fff;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

/* 标题样式 /
h1, h2 {
color: #2c3e50;
margin-bottom: 10px;
/ 设置字体为柳体 */
font-family: 'Liu Jian Mao Cao', cursive;
}

/* 段落样式 */
p {
margin-bottom: 15px;
font-family: 'Liu Jian Mao Cao', cursive;
}

/* 图片样式 */
img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 20px;
}

/* 列表样式 */
ul {
list-style-type: none;
padding: 0;
}

li {
background: #f4f4f4;
margin-bottom: 5px;
padding: 10px;
border-radius: 4px;
}

/* 表格样式 */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}

th {
background-color: #f2f2f2;
font-weight: bold;
}

/* 表单样式 */
form {
margin-top: 20px;
}

input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}

input[type="submit"] {
background-color: #2980b9;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
background-color: #2471a3;
}