前端开发基础（HTML5 + CSS3）【第二篇】：列表、表格、表单标签 && 文本域、label标签、button按钮、div、span标签以及新闻列表和注册信息综合案例练习

在HTML5和CSS3的基础上，我们可以使用以下标签来创建列表、表格和表单，并对文本域和标签进行样式定制。

HTML部分：




<!DOCTYPE html>
<html>
<head>
    <title>前端开发基础</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- 无序列表 -->
    <ul class="my-list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
 
    <!-- 有序列表 -->
    <ol class="my-list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
 
    <!-- 表格 -->
    <table class="my-table">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
    </table>
 
    <!-- 表单 -->
    <form action="">
        <!-- 文本域 -->
        <label for="my-text">输入你的名字:</label>
        <input type="text" id="my-text" name="username">
 
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

CSS部分：




/* style.css */
.my-list {
    list-style-type: square; /* 实现自定义列表样式 */
}
 
.my-table {
    border-collapse: collapse; /* 实现表格的边框合并 */
    width: 100%;
}
 
.my-table th, .my-table td {
    border: 1px solid #ddd; /* 实现单元格边框样式 */
    padding: 8px;
}
 
.my-table tr:nth-child(even) {
    background-color: #f2f2f2; /* 实现行背景色的交替 */
}
 
.my-table tr:hover {
    background-color: #ddd; /* 鼠标悬浮行的背景色变化 */
}
 
input[type="submit"] {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
 
input[type="submit"]:hover {
    background-color: #45a049;
}

以上代码实现了无序列表、有序列表、表格和表单的基本结构，并通过CSS为它们添加了基本样式。同时，文本域和提交按钮也被添加到表单中，并通过label标签关联，以提高表单的可访问性。

前端开发基础（HTML5 + CSS3）【第二篇】：列表、表格、表单标签 && 文本域、label标签、button按钮、div、span标签以及新闻列表和注册信息综合案例练习

评论已关闭

推荐阅读