第一题:制作北大青鸟网站的中心开班信息模块。
h3{ font-size: 15px; color: #FFFFFF; border-bottom: 1px #FFFFFF solid; text-indent: 2.5em; padding: 5px; } h3:nth-of-type(1){ background: url("../../picture/bg.gif") 3px 3px no-repeat; } div{ width:250px; border:1px #aacbee solid; padding:0px 0px 10px 0px; background-color:#f5f9fc; margin:0px auto; background: linear-gradient(to bottom,#aacbee,#FFFFFF);/*颜色渐变*/ border-radius: 20px; } div a{ color: gray; text-decoration: none; font-size: 18px; list-style: none; padding: 10px; text-indent: 2em; padding-left: 20px; } div a:hover{ color:red; } div a:nth-of-type(1){ background: url(../../picture/dotBg.gif) 3px 3px no-repeat; } div a:nth-of-type(2){ background: url(../../picture/dotBg.gif) 3px 3px no-repeat; } div a:nth-of-type(3){ background: url(../../picture/dotBg.gif) 3px 3px no-repeat; } div a:nth-of-type(4){ background: url(../../picture/dotBg.gif) 3px 3px no-repeat; } div a:nth-of-type(5){ background: url(../../picture/dotBg.gif) 3px 3px no-repeat; } div a:nth-of-type(6){ background: url(../../picture/dotBg.gif) 3px 3px no-repeat; } div a:nth-of-type(7){ background: url(../../picture/dotBg.gif) 3px 3px no-repeat; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/中心开班.css" rel="stylesheet"> </head> <body> <div> <h3>中心开班信息</h3> <a href="#">8月12日:学历+技能班</a><br> <a href="#">8月16日:高考特招班</a><br> <a href="#">8月23日:Java精英班</a><br> <a href="#">8月31日:学士后强化班</a><br> <a href="#">9月5日:大学生就业班</a><br> <a href="#">9月9日:企业定向委培班</a><br> <a href="#">9月16日:网络营销强化班</a> </div> </body> </html>
第二题:制作商品分类列表页面:
div,a,ul,li{ padding: 0px; margin: 0px; } div{ width:250px; box-sizing: border-box; border:5px orange solid; background-color:#f5f9fc; border-radius: 20px; } div a{ font-weight: bold; color: black; text-decoration: none; font-size: 15px; } li{ list-style-type: none; border: 1px solid; padding: 15px; text-indent: 2em; padding-left: 20px; } div a:hover{ color: #FF6600; } div ul li:nth-of-type(1){ background: url(../../images/icon_01.jpg) 3px 3px no-repeat; } div ul li:nth-of-type(2){ background: url(../../images/icon_02.jpg) 3px 3px no-repeat; } div ul li:nth-of-type(3){ background: url(../../images/icon_03.jpg) 3px 3px no-repeat; } div ul li:nth-of-type(4){ background: url(../../images/icon_04.jpg) 3px 3px no-repeat; } div ul li:nth-of-type(5){ background: url(../../images/icon_05.jpg) 3px 3px no-repeat; } div ul li:nth-of-type(6){ background: url(../../images/icon_06.jpg) 3px 3px no-repeat; } div ul li:nth-of-type(7){ background: url(../../images/icon_07.jpg) 3px 3px no-repeat; } div ul li:nth-of-type(8){ background: url(../../images/icon_08.jpg) 3px 3px no-repeat; } div ul li:nth-of-type(9){ background: url(../../images/icon_09.jpg) 3px 3px no-repeat; } div ul li:nth-of-type(10){ background:url(../../images/icon_10.jpg) 3px 3px no-repeat; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/商品分类列表.css" rel="stylesheet"/> </head> <body> <div> <a></a> <ul> <li><a href="#">酒水、饮料</a><br></li> <li><a href="#">进口食品</a><br></li> <li><a href="#">休闲零食</a><br></li> <li><a href="#">地方特产</a><br></li> <li><a href="#">保健、冲调</a><br></li> <li><a href="#">粮油、生鲜</a><br></li> <li><a href="#">美容洗护</a><br></li> <li><a href="#">清洁洗涤</a><br></li> <li><a href="#">母婴、纸品</a><br></li> <li><a href="#">家居百货</a></li> </ul> </div> </body> </html>
第三题:制作权威课程免费体验登入页面:
div{ background: url("../../images/bg.jpg") 0px 0px no-repeat; padding-bottom: 40px; margin-left: 600px; border-radius: 10px; width: 300px; height: 310px; } ul{ color: #FFFFFF;padding-top:80px;padding-left: 20px; border-radius:10px; } li{ list-style: none; } span{ color: red; } a { margin-left: 80px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/免费体验登入.css" rel="stylesheet"> </head> <body> <div> <ul> <p> <li> <span>*</span> 姓名:<input type="text"> </li> </p> <p> <li> <span>*</span> 邮箱:<input type="email"> </li> </p> <p> <li> <span>*</span> 电话:<input type="tel"> </li> </p> <p> <li> 性别:<select name="bmon"> <option value="">请选择年份</option> <option value="">男</option> <option value="">女</option> </select> </li> </p> <p> <li> 年龄:<select name="bmon"> <option value="">请选择年份</option> </select> </li> </p> <li> <a href=""><input type="image" src="../images/btn.jpg"/> </li> </ul> </div> </body> </html>