第6章盒子模型
阿新 • • 發佈：2019-02-17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中心開班資訊</title> <link rel="stylesheet" href="../css/中心開班資訊.css"> </head> <body> <div class="time"> <h1 id="kai">中心開班資訊</h1> <ul> <li><ahref="#">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>
.time{ width: 250px; border: 1px gray solid; border-radius: 20px; margin: 0px auto; background: -moz-linear-gradient(to top,white,#1F87CC); } #kai{ font-size: 15px; color: #FFFFFF; background:url("../image/bg.gif") 25px 2px no-repeat; padding: 5px 60px; border-bottom: 1px #FFFFFF solid; } li{ list-style: none; } .time ul li{ height: 30px; padding-left: 15px; padding-top: 3px; background: url("../image/dotBg.gif")left center no-repeat; } .time ul{ padding: 0px 6px; } body{ margin: 0px; } ul li a{ text-decoration: none; color: gray; } ul li a:hover{ color: red; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品分類列表頁面</title> <link rel="stylesheet" href="../css/商品分類列表.css"> </head> <body> <div> <p><a href="#">酒水、飲料</a></p> <p><a href="#">進口食品</a></p> <p><a href="#">休閒零食</a></p> <p><a href="#">地方特產</a></p> <p><a href="#">保健、衝調</a></p> <p><a href="#">糧油、生鮮</a></p> <p><a href="#">美容洗護</a></p> <p><a href="#">清潔洗滌</a></p> <p><a href="#">母嬰、紙品</a></p> <p class="jiu"><a href="#">家居百貨</a></p> </div> </body> </html>
div{ width: 230px; border: 2px orange solid; border-radius: 20px; } p{ padding: 10px 55px; border-bottom: 1px gray dashed; } .jiu{ border-bottom: 0px gray dashed; } a{ color: #000; text-decoration: none; font-weight: bold; } a:hover{ color: red; } p:nth-of-type(1){ background: url("../image/icon_01.jpg")left center no-repeat; } p:nth-of-type(2){ background: url("../image/icon_02.jpg")left center no-repeat; } p:nth-of-type(3){ background: url("../image/icon_03.jpg")left center no-repeat; } p:nth-of-type(4){ background: url("../image/icon_04.jpg")left center no-repeat; } p:nth-of-type(5){ background: url("../image/icon_05.jpg")left center no-repeat; } p:nth-of-type(6){ background: url("../image/icon_06.jpg")left center no-repeat; } p:nth-of-type(7){ background: url("../image/icon_07.jpg")left center no-repeat; } p:nth-of-type(8){ background: url("../image/icon_08.jpg")left center no-repeat; } p:nth-of-type(9){ background: url("../image/icon_09.jpg")left center no-repeat; } p:nth-of-type(10){ background: url("../image/icon_10.jpg")left center no-repeat; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>免費體驗登入頁面</title> <link rel="stylesheet" href="../css/免費體驗登入頁面.css"> </head> <body> <div> <form method="post" action=""> <ul> <li><p><span>*</span>姓名： <input type="text"name="name"/></p> </li> <li><p><span>*</span>郵箱： <input type="password" name="pass"/></p> </li> <li><p><span>*</span>電話： <input type="text"name="dian"/></p> </li> </ul> <p class="miao"> 性別： <select name="bmo"> <option value="get">請選擇</option> <option value="nan">男</option> <option value="nv">女</option> </select> <p class="miao"> 年齡： <select name="bmo"> <option value="age">請選擇</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select> </p> </form> </div> <img src="../image/btn.jpg"/> </body> </html>
body{ background: url("../image/bg.jpg")no-repeat; } li{ list-style: none; color: white; } span{ color: red; } ul{ padding-top: 60px; padding-left: 15px; } .miao{ padding-left: 20px; color: white; } img{ padding-left: 80px; }