一、制作新闻中心板块样式
实践任务：制作新闻列表页
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>
运行界面：
