利用 HBuilderX 制作新闻列表页以及制作注册页面

一、制作新闻中心板块样式

实践任务：制作新闻列表页
1、在web2项目文件夹中，创建一个空白网页文件，命名为news.html
2、网页文件用于展示一些新闻标题的列表，其中包含标题标签和列表标签
3、新闻的标题创建超链接斜体样式
字体样式属性：
font-style用于规定斜体文本；normal文本正常显示；italic文本斜体显示；oblique文本倾斜显示
font-variant用于将元素中所有的小写字母都转换为大写，仅作用于英文字符，不经常使用
font-weight用于设置文本粗细
font-size 用于设置文本的大小
font-family 用于定义文本的字体系列

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>字体展示</title><style type="text/css">p{font-style: italic;}p{font-weight: bold;}body { font-size:24px;}p{font-family: "方正楷体","微软雅黑";}</style></head><body><p>逝者如斯夫，不舍昼夜。</p></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>新闻中心</title></head><body><h2>新闻中心</h2><ul><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></ul></body>
</html>

二、制作注册页面

1、在web项目文件夹中，创建一个空白网页文件，命名为register.html
2、设计会员注册的表单页面，综合使用表格标签和表单标签

表格边框：使用CSS样式中的border属性来设置表格边框样式，其中border-collapse属性值有collapse（合并）和separate（分离），默认的属性值为separate。

表格宽度与高度：通过 width 和 height 属性定义表格的宽度和高度。

表格文本对齐：
表格颜色：文字颜色使用color属性；表格边框颜色使用border属性；背景色使用background(或background-color)属性。

表单样式：使用边框、背景、高度、宽度、文字颜色等样式属性直接应用到对应的表单对象上对于元素，如果只想设置特定输入类型的样式，则可以使用属性选择器

表单案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>登录页面</title></head><body><form action="action_page.php"><label for="aname">用户名</label><input type="text" id="aname"><label for="pw">密码</label><input type="password" id="pw"><input type="submit" value="登陆"></form></body>
</html>

制作注册页面源代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>会员注册</title></head><body><h2>会员注册</h2><form action="#" method="get"><table><tr><td colspan="2">账户信息</td></tr><tr><td><span>*</span>用户名：</td><td><input type="text" placeholder="由字母组成，长度3-12位"></td></tr><tr><td><span>*</span>密码：</td><td><input type="password" placeholder="密码由字母开头，6-18位"></td></tr><tr><td><span>*</span>确认密码</td><td><input type="password" placeholder="密码由字母开头，6-18位"></td></tr><tr><td><span>*</span>电子邮箱：</td><td><input type="email"></td></tr><tr><td colspan="2">个人基本信息</td></tr><tr><td><span>*</span>国家/地区</td><td><select name="ad_nationality"><option value="">请选择</option><option value="中国" selected>中国</option><option value="美国">美国</option><option value="英国">英国</option></select></td></tr><tr><td><span>*</span>真实姓名：</td><td><input type="text"></td></tr><tr><td><span>*</span>证件类型：</td><td><select id="ad_cert_type" name="ad_cert_type"><option value="">请选择</option><option value="4529" selected>中国居民身份证</option><option value="4530">护照</option></select></td></tr><tr><td><span>*</span>证件号码：</td><td><input type="text"></td></tr><tr><td><span>*</span>性别：</td><td><input type="radio" name="gender" value="1" checked="checked">男<input type="radio" name="gender" value="0" checked="checked">女</td></tr><tr><td><span>*</span>出生日期：</td><td><input type="date"></td></tr><tr><td><span>*</span>服务区域：</td><td><input type="text"></td></tr><tr><td rowspan="2">服务类别：</td><td><input type="checkbox" value="青年志愿者">青年志愿者<input type="checkbox" value="医疗志愿者">医疗志愿者<input type="checkbox" value="文化志愿者">文化志愿者</td></tr><tr><td><input type="checkbox" value="社区志愿者">社区志愿者<input type="checkbox" value="教育志愿者">教育志愿者<input type="checkbox" value="巾帼志愿者">巾帼志愿者</td></tr><tr><td colspan="2"><input type="submit" value="申请成为会员"></td></tr></table></form></body>
</html>

运行界面：