Web网页制作（静态网页）：千年之恋

一、是用的PyCharm来写的代码

二、代码中所用到的知识点（无 js）

这段HTML代码展示了一个简单的注册页面，包含了多个HTML元素和CSS样式的应用。

这段HTML代码展示了一个典型的注册页面，包含了常见的HTML元素和表单控件。通过CSS样式表，可以进一步美化页面布局和样式。虽然代码中没有直接使用JavaScript，但可以通过添加JavaScript来实现更复杂的交互功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>千年之恋</title>
    <link href="css/style06.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="head">
    <img src="images/logo.jpg"/>
</div>
<div id="nav_bg">
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">会员</a></li>
        <li><a href="#">活动</a></li>
        <li><a href="#">直播</a></li>
        <li><a href="#">视频</a></li>
        <li><a href="#" class="bg">注册</a></li>
    </ul>
</div>
<div id="banner">
    <img src="images/banner.jpg"/>
</div>
<div id="content">
    <h2 class="step">注册步骤：</h2>
    <form action="#" method="post" class="one">
        <h3>您的帐号信息：</h3>
        <table class="content">
            <tr>
                <td class="left">注册方式：</td>
                <td>
                    <label for="one"><input type="radio" name="sex" id="one"/>E-mail注册</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    <label for="two"><input type="radio" name="sex" id="two"/>手机号码注册</label>
                </td>
            </tr>
            <tr>
                <td class="left">注册邮箱：</td>
                <td><input type="text" class="right" /></td>
            </tr>
            <tr>
                <td class="left">注册手机：</td>
                <td><input type="text" class="right" /></td>
            </tr>
            <tr>
                <td class="left">登陆密码：</td>
                <td><input type="password" maxlength="8" class="right" /></td>
            </tr>
            <tr>
                <td class="left">昵称：</td>
                <td><input type="text" class="right" /></td>
            </tr>
        </table>
        <h3>您的个人信息：</h3>
        <table class="content">
            <tr>
                <td class="left">性别：</td>
                <td>
                    <label for="boy"><input type="radio" name="sex" id="boy" />男</label>&nbsp;&nbsp;&nbsp;&nbsp;
                    <label for="girl"><input type="radio" name="sex" id="girl" />女</label>
                </td>
            </tr>
            <tr>
                <td class="left">学历：</td>
                <td>
                    <select>
                        <option>-请选择-</option>
                        <option>中职/高中</option>
                        <option>专科/本科</option>
                        <option>硕士研究生</option>
                        <option>博士研究生</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="left">所在城市：</td>
                <td>
                    <select>
                        <option>-请选择-</option>
                        <option selected="selected">北京</option>
                        <option>上海</option>
                        <option>广州</option>
                        <option>深圳</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="left">兴趣爱好：</td>
                <td>
                    <input type="checkbox" />足球&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" />篮球&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" />游泳&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" />唱歌&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" />跑步&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" />瑜伽
                </td>
            </tr>
            <tr>
                <td class="left">自我介绍：</td>
                <td>
                    <textarea cols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" class="btn" /></td>
            </tr>
        </table>
    </form>
</div>
<div id="footer">
    <p>Copyright &copy 2020-2030 QIANNIANZHLIANcom, All rights reserved.<br />2020-2030,版权所有千年之恋 85CP 备 3333</p>
</div>
</body>
</html>

1. HTML文档结构

<!DOCTYPE html>：声明文档类型为HTML5。
<html lang="en">：定义HTML文档的根元素，并设置语言为英语。
<head>：包含文档的元数据，如字符集、标题和外部样式表链接。
<body>：包含网页的可见内容。

2. 元数据

<meta charset="UTF-8">：指定文档的字符编码为UTF-8。
<title>千年之恋</title>：设置网页的标题，显示在浏览器的标签页上。
<link href="css/style06.css" type="text/css" rel="stylesheet">：链接外部CSS样式表文件style06.css，用于定义页面的样式。

3. 页面结构

头部 (<div id="head">)
- 包含一个图片 (<img src="images/logo.jpg"/>)，用于显示网站的Logo。
导航栏 (<div id="nav_bg">)
- 使用无序列表 (<ul>) 创建导航栏，每个列表项 (<li>) 包含一个链接 (<a>)，指向不同的页面或功能。
- 最后一个链接 (<a href="#" class="bg">注册</a>) 有一个额外的类bg，可能是用于特殊样式。
横幅 (<div id="banner">)
- 包含一个图片 (<img src="images/banner.jpg"/>)，用于显示网站的横幅广告或宣传图。
内容区域 (<div id="content">)
- 包含一个表单 (<form>)，用于用户注册。
- 表单分为两个部分：
  - 账号信息：包括注册方式（邮箱或手机）、注册邮箱、注册手机、登录密码和昵称。
  - 个人信息：包括性别、学历、所在城市、兴趣爱好和自我介绍。
- 使用表格 (<table>) 来布局表单内容，每个表行 (<tr>) 包含表头 (<td class="left">) 和输入字段 (<td>)。
页脚 (<div id="footer">)
- 包含版权信息 (<p>)，显示网站的版权声明和备案信息。

4. 表单元素

单选按钮 (<input type="radio">)
- 用于选择注册方式（邮箱或手机）和性别（男或女）。
- name="sex" 用于将单选按钮分组，确保同一组中只能选择一个选项。
文本输入框 (<input type="text">)
- 用于输入注册邮箱、注册手机和昵称。
密码输入框 (<input type="password">)
- 用于输入登录密码，输入内容会被隐藏。
下拉菜单 (<select>)
- 用于选择学历和所在城市。
- <option> 定义下拉菜单中的选项，selected="selected" 设置默认选中的选项。
复选框 (<input type="checkbox">)
- 用于选择兴趣爱好，用户可以多选。
文本域 (<textarea>)
- 用于输入自我介绍，用户可以输入多行文本。
按钮 (<input type="button">)
- 用于提交表单，但当前代码中没有指定按钮的文本或功能。

5. CSS类

class="bg"：可能用于为“注册”链接添加特殊样式。
class="one"：可能用于为表单添加样式。
class="left" 和 class="right"：可能用于对齐表格中的内容。
class="btn"：可能用于为按钮添加样式。

6. HTML属性

id：用于唯一标识元素，如id="head"、id="nav_bg"等。
name：用于表单元素的名称，如name="sex"。
maxlength：限制输入框的最大字符数，如maxlength="8"限制密码长度为8个字符。
cols 和 rows：定义文本域的列数和行数。

7. HTML实体

©：显示版权符号（©）。
 ：表示不换行空格，用于在文本中插入空格。

8. CSS样式

虽然代码中链接了外部样式表 (style06.css)，但具体的样式规则没有在代码中展示。样式表可能定义了页面布局、颜色、字体等样式。

9. JavaScript交互

代码中没有直接使用JavaScript，但可以通过<input type="button">或其他事件触发JavaScript函数，实现表单验证或提交功能。

三、CSS代码（内有注释详解）

/* 全局样式：重置所有元素的外边距、内边距、列表样式、轮廓线、边框和背景 */
* {
    margin: 0; 
    padding: 0; 
    list-style: none; /* 去除列表项的项目符号 */
    outline: none; /* 去除元素聚焦时的轮廓线 */
    border: 0; /* 去除所有元素的边框 */
    background: none; /* 去除所有元素的背景 */
}

/* 页面整体样式：设置默认字体和字体大小 */
body {
    font-family: "微软雅黑"; /* 设置页面默认字体为“微软雅黑” */
    font-size: 14px; /* 设置页面默认字体大小为14像素 */
}

/* 链接样式：设置未访问和已访问链接的样式 */
a:link, a:visited {
    text-decoration: none; /* 去除链接的下划线 */
    color: #fff; /* 设置链接文字颜色为白色 */
    font-size: 16px; /* 设置链接文字大小为16像素 */
}

/* 头部样式：设置页面头部的宽度、高度、居中和顶部内边距 */
#head {
    width: 980px; /* 设置头部宽度为980像素 */
    height: 70px; /* 设置头部高度为70像素 */
    margin: 0 auto; /* 水平居中 */
    padding-top: 20px; /* 设置顶部内边距为20像素 */
}

/* 导航栏背景样式：设置导航栏背景的宽度、高度和背景颜色 */
#nav_bg {
    width: 100%; /* 宽度占满父容器 */
    height: 48px; /* 设置高度为48像素 */
    background: #fe668f; /* 设置背景颜色为粉色 */
}

/* 导航栏内容样式：设置导航栏内容的宽度和居中 */
.nav {
    width: 980px; /* 设置宽度为980像素 */
    margin: 0 auto; /* 水平居中 */
}

/* 导航栏列表项样式：设置列表项左浮动（横向排列） */
.nav li {
    float: left; /* 左浮动，使列表项横向排列 */
}

/* 导航栏链接样式：设置链接的显示方式、高度、内边距和文字垂直居中 */
a {
    display: inline-block; /* 将链接设置为行内块元素 */
    height: 48px; /* 设置高度为48像素 */
    padding: 0 50px; /* 设置左右内边距为50像素 */
    line-height: 48px; /* 设置行高为48像素，使文字垂直居中 */
}

/* 特殊链接样式：为特定链接（如“注册”）设置背景颜色 */
.bg {
    background: #fe9ab5; /* 设置背景颜色为浅粉色 */
}

/* 链接悬停样式：设置鼠标悬停时链接的背景颜色 */
a:hover {
    background: #fe9ab5; /* 鼠标悬停时背景颜色变为浅粉色 */
}

/* 横幅样式：设置横幅的宽度和居中 */
#banner {
    width: 980px; /* 设置宽度为980像素 */
    margin: 0 auto; /* 水平居中 */
}

/* 内容区域样式：设置内容区域的宽度、高度、背景图片、居中和左侧内边距 */
#content {
    width: 830px; /* 设置宽度为830像素 */
    height: 934px; /* 设置高度为934像素 */
    background: url(../images/content_bg.jpg) no-repeat; /* 设置背景图片，不重复 */
    margin: 0 auto; /* 水平居中 */
    padding-left: 150px; /* 设置左侧内边距为150像素 */
}

/* 注册步骤标题样式：设置标题的宽度、高度、字体大小、颜色、背景图片和文字垂直居中 */
.step {
    width: 454px; /* 设置宽度为454像素 */
    height: 80px; /* 设置高度为80像素 */
    font-size: 20px; /* 设置字体大小为20像素 */
    font-weight: 100; /* 设置字体粗细为100（较细） */
    color: #dd8787; /* 设置文字颜色为浅红色 */
    background: url(../images/step.jpg) center right no-repeat; /* 设置背景图片，居中靠右，不重复 */
    line-height: 80px; /* 设置行高为80像素，使文字垂直居中 */
}

/* 表单标题样式：设置表单标题的宽度、高度、字体大小、颜色、下边框和文字垂直居中 */
h3 {
    width: 444px; /* 设置宽度为444像素 */
    height: 45px; /* 设置高度为45像素 */
    font-size: 20px; /* 设置字体大小为20像素 */
    font-weight: 100; /* 设置字体粗细为100（较细） */
    color: #dd8787; /* 设置文字颜色为浅红色 */
    line-height: 45px; /* 设置行高为45像素，使文字垂直居中 */
    border-bottom: 1px solid #dd8787; /* 设置底部边框为1像素浅红色实线 */
}

/* 表格单元格样式：设置单元格的高度和文字颜色 */
td {
    height: 50px; /* 设置高度为50像素 */
    color: #dd8787; /* 设置文字颜色为浅红色 */
}

/* 左侧单元格样式：设置左侧单元格的宽度和文字右对齐 */
.left {
    width: 120px; /* 设置宽度为120像素 */
    text-align: right; /* 文字右对齐 */
}

/* 右侧输入框样式：设置右侧输入框的宽度、高度和边框 */
.right {
    width: 320px; /* 设置宽度为320像素 */
    height: 28px; /* 设置高度为28像素 */
    border: 1px solid #dd8787; /* 设置边框为1像素浅红色实线 */
}

/* 输入框垂直对齐样式：设置输入框内容垂直居中 */
input {
    vertical-align: middle; /* 垂直居中 */
}

/* 下拉菜单样式：设置下拉菜单的宽度、边框和文字颜色 */
select {
    width: 171px; /* 设置宽度为171像素 */
    border: 1px solid #dd8787; /* 设置边框为1像素浅红色实线 */
    color: #dd8787; /* 设置文字颜色为浅红色 */
}

/* 文本域样式：设置文本域的宽度、边框、禁止调整大小、字体大小、颜色和内边距 */
textarea {
    width: 380px; /* 设置宽度为380像素 */
    border: 1px solid #dd8787; /* 设置边框为1像素浅红色实线 */
    resize: none; /* 禁止用户调整文本域大小 */
    font-size: 12px; /* 设置字体大小为12像素 */
    color: #aaa; /* 设置文字颜色为灰色 */
    padding: 20px; /* 设置内边距为20像素 */
}

/* 按钮样式：设置按钮的宽度、高度和背景图片 */
.btn {
    width: 408px; /* 设置宽度为408像素 */
    height: 76px; /* 设置高度为76像素 */
    background: url(../images/btn.jpg) right center no-repeat; /* 设置背景图片，靠右居中，不重复 */
}

/* 页脚样式：设置页脚的宽度、高度、背景颜色、文字颜色、居中和顶部内边距 */
#footer {
    width: 100%; /* 宽度占满父容器 */
    height: 68px; /* 设置高度为68像素 */
    line-height: 26px; /* 设置行高为26像素 */
    background: #fe668f; /* 设置背景颜色为粉色 */
    color: #fff; /* 设置文字颜色为白色 */
    text-align: center; /* 文字居中 */
    padding-top: 40px; /* 设置顶部内边距为40像素 */
}