1.制作图北大青鸟网站的中心开班信息模块。要求如下：
<页面宽度250px，整体居中显示，背景使用线性渐变及1px的灰色圆角边框。
<标题左侧的小图标以背景图片的方式实现，标题颜色为白色。
<使用无序实现开班信息列表，列表前的小三角箭头和下方的虚线均使用背景图像的方式实现。
<列表超链接文本颜色为灰色，无下划线，当鼠标悬浮在超链接文本上是，字体颜色改变无下划线。
<页面中涉及的盒子模型解析方式都使用border-box。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中心开班信息</title>
<style>
/*外部边框 内边框置零*/
body,ul,li{margin: 0px;padding:0px;}
/*设置框架高度，居中，背景颜色渐变，弧形边*/
div{margin: 0px;width: 250px;height:310px;margin: auto;box-sizing:border-box;background: linear-gradient(to bottom , #388DFF,white,#FFFFED);
border-radius:8px ;border: 1px solid gray}
/*背景图片定位，不平铺，字体大小，文本缩进，实体线，下内边距*/
.sss{background: url("bg.gif")10px no-repeat; font-size:15px;text-indent:2.5em;border-bottom:1px solid white;color: white;padding:10px}
/*背景图片定位不平铺，左右内边距5px，*/
li{background: url("dotBg.gif")0px 5px no-repeat; padding-left: 5px;padding-right: 5px;text-indent:1em;list-style-type: none;line-height: 35px;height: 35px}
/*无下划线，灰色*/ /* 悬浮鼠标无下划线 红色*/
a{text-decoration: none;color: gray} li a:hover{text-decoration: none;color: crimson}
ul{width: 240px}
</style>
</head>
<body>
<div>
<h1 class="sss" >中心开班信息</h1>
<ul>
<li><a href="#">8月12日 ：学历+技能班</a> </li>
<li><a href="#">8月16日 ：高考特招班</a> </li>
<li><a href="#">8月23日 ：Java精英班</a> </li>
<li><a href="#">8月31日 ：学士后强化班</a> </li>
<li><a href="#">9月5日 ：大学生就业班</a> </li>
<li><a href="#">9月9日 ：企业定向委培班</a> </li>
<li><a href="#">9月16日 ：网络营销强化班</a> </li>
</ul>
</div>
</body>
</html>
2.制作图商品分类列表页面。
<商品列表放在一个div中，<div>的四边框均为2px的橙色实线圆角边框。
<用结构伪类选择器选择每个列表并为其加上背景图每个列表下方1px的灰色虚线边框，但是最后一个列表项没有。
<文本超链接为黑色粗体，当鼠标悬浮在超链接文本上变色，平切无下划线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品分类列表</title>
<style>
/*设置宽度 圆角变框 颜色*/
div{width: 200px;border-radius:8px;border:2px solid #F26522}
/*删除黑圆点，行高，点线，字体大小*/
li {list-style-type: none;line-height:45px;border-bottom: 1px dotted;font-size: 15px;}
/*外边距，内边距像素点*/ /*无下划线，黑色，加粗*/
ul{margin: 5px;padding: 0px} a{text-decoration: none;color: black;font-weight: bold}
/*鼠标悬浮无下划线，显示颜色*/
a:hover{color: #2ecd7b;text-decoration: none}
/*结构仿类选择器，背景图片，不平铺，内边距上下0 左右50*/
ul li:nth-of-type(1){background: url("icon_01.jpg") 0px -2px no-repeat;padding: 0px 50px}
ul li:nth-of-type(2){background: url("icon_02.jpg")no-repeat;padding: 0px 50px}
ul li:nth-of-type(3){background: url("icon_03.jpg")no-repeat;padding: 0px 50px}
ul li:nth-of-type(4){background: url("icon_04.jpg")no-repeat;padding: 0px 50px}
ul li:nth-of-type(5){background: url("icon_05.jpg")no-repeat;padding: 0px 50px}
ul li:nth-of-type(6){background: url("icon_06.jpg")no-repeat;padding: 0px 50px}
ul li:nth-of-type(7){background: url("icon_07.jpg")no-repeat;padding: 0px 50px}
ul li:nth-of-type(8){background: url("icon_08.jpg")no-repeat;padding: 0px 50px}
ul li:nth-of-type(9){background: url("icon_09.jpg")no-repeat;padding: 0px 50px}
ul li:nth-of-type(10){background: url("icon_10.jpg")no-repeat;padding:0px 50px}
</style>
</head>
<body>
<div>
<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>
<li><a href="#"/> 粮油、生鲜</a></li>
<li><a href="#"/> 美容洗护</a></li>
<li><a href="#"/> 清洁洗涤</a></li>
<li><a href="#"/> 母婴、纸品</a></li>
<li style="border: none"><span><a href="#"/> 家居百货</span></a></li>
</ul>
</div>
</body>
</html>
3.制作权威课程免费体验登录页面。
<页面文本颜色为白色，*的字体颜色为红色。
<使用无序列表排版单元素。
<无序列表内容在页面中居中显示。
<“免费体验”按钮使用背景图像的方式实现。
<按语义化使用表单元素，且是圆角边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>免费体检登录页面</title>
<style>
/*外边距，内边距清零*/
body,form,ul,li{margin: 0px;padding: 0px}
/*背景图片，不平铺 宽度*/
body{background: url("bg.jpg")no-repeat;width: 312px}
/*删除黑圆点，水平居中，颜色*/
li{list-style-type: none;text-align: center;color: white;}
/*内上边距，行高*/
ul {padding-top:80px;line-height:35px;}
select{border-radius: 5px;}
ul li:nth-of-type(4),ul li:nth-of-type(5){padding-right: 120px;}
/*红色*/
span{color: red}
/*圆边框*/
input{border-radius: 5px;}
</style>
</head>
<body>
<form method="post" action="#">
<ul>
<li><span>* </span>姓名 ：
<input type="text"/>
</li>
<li><span>* </span>邮箱 ：
<input type="email"/>
</li>
<li><span>* </span>电话 ：
<input type="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})
-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))"/>
</li>
<li>性别 ：
<select>
<option value="1">请选择</option>
<option value="2">男</option>
<option value="3">女</option>
</select></li>
<li>年龄 ：
<select>
<option value="4">请选择</option>
<option value="5">20</option>
<option value="6">21</option>
</select></li>
<p style="text-align: center;">
<input type="image" src="btn.jpg"/>
</p>
</ul>
</form>
</body>
</html>