HTML5和CSS3開發第六章課後作業
阿新 • • 發佈:2019-01-02
1,製作北大青鳥網站的中心開班模組。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中心開班資訊</title> <style> h2,ul,li{ padding: 0px; margin: 0px; } div{ width: 250px; box-sizing: border-box; margin: auto; border: 1px gray solid; border-radius: 8px; background: linear-gradient(to bottom,#5EC2F9,#FFFFFF,white); } h2{ color: white; font-size: 15px; border-bottom: white 1px solid; padding: 8px; background: url("images/homework3/bg.gif")10px no-repeat; text-indent: 2.2em; } li{ font-size: 15px; list-style-type: none; background: url("images/homework3/dotBg.gif")0px 5px no-repeat; padding: 8px 18px; /*border: 1px solid;*/ } ul{ width: 215px; } ul li:last-of-type{ margin-bottom: 10px; } a{ text-decoration: none; color: gray; } a:hover{ color: #FF3300; } </style> </head> <body> <div> <h2>中心開班資訊</h2> <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,製作商品分類列表頁面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品分類列表頁</title> <style> ul,li{padding: 0px;margin: 0px;} div{ border: 2px solid orange; border-radius: 8px; width: 200px; box-sizing: border-box; } li{ list-style-type: none; font-size: 15px; font-weight: bold; padding: 15px 50px; border-bottom: 1px gray dotted; } li:nth-of-type(1){ background: url("images/homework4/icon_01.jpg")0px 3px no-repeat; } li:nth-of-type(2){ background: url("images/homework4/icon_02.jpg")0px 1px no-repeat; } li:nth-of-type(3){ background: url("images/homework4/icon_03.jpg")no-repeat; } li:nth-of-type(4){ background: url("images/homework4/icon_04.jpg")0px 2px no-repeat; } li:nth-of-type(5){ background: url("images/homework4/icon_05.jpg")0px 2px no-repeat; } li:nth-of-type(6){ background: url("images/homework4/icon_06.jpg")no-repeat; } li:nth-of-type(7){ background: url("images/homework4/icon_07.jpg")0px 1px no-repeat; } li:nth-of-type(8){ background: url("images/homework4/icon_08.jpg")0px 3px no-repeat; } li:nth-of-type(9){ background: url("images/homework4/icon_09.jpg")0px 3px no-repeat; } li:nth-of-type(10){ background: url("images/homework4/icon_10.jpg")0px 2px no-repeat; border-bottom:none; } </style> </head> <body> <div> <ul> <li>酒水、飲料</li> <li>進口食品</li> <li>休閒零食</li> <li>地方特產</li> <li>保健、衝調</li> <li>糧油、生鮮</li> <li>美容洗護</li> <li>清潔洗滌</li> <li>母嬰、紙品</li> <li>家居百貨</li> </ul> </div> </body> </html>
3,製作權威課程免費體驗登陸頁面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>免費體驗登入頁面</title> <style> body{background: url("images/homework5/bg.jpg") no-repeat;} body,div,form,p{padding: 0px;margin: 0px} body div:first-of-type{ width: 312px; box-sizing: border-box; text-align: center; margin-top: 35px; padding: 50px 25px 50px 0px; color: white; font-size: 14px; } span{color: red;} p{ padding:8px; } input{ border-radius: 5px; } select{border-radius: 5px;} form p:nth-of-type(4),form p:nth-of-type(5){ padding-right: 140px; } </style> </head> <body> <div> <form method="post" action="#"> <p> <span>*</span>姓名:<input type="text"> </p> <p> <span>*</span>郵箱:<input type="email"> </p> <p> <span>*</span>電話:<input type="number"> </p> <P> 性別: <select> <option selected>請選擇</option> <option>男</option> <option>女</option> </select></P> <P> 年齡: <select> <option selected>請選擇</option> <option>20</option> <option>21</option> </select></P> <P><input type="image" src="images/homework5/btn.jpg"></P> </form> </div> </body> </html>