html （第四本书第六章盒子模型参考）
上机1
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>北大青鸟课程导航</title> <style> body, ul, li, h1 { padding: 0px; margin: 0px; } li { list-style: none; } div { width: 220px; border: 1px #aacbee solid; padding: 0px 0px 10px 0px; background-color: #f5f9fc; margin: 0px auto; } h1 { background: url(image/title_icon.gif) 5px 8px no-repeat; padding-left: 25px; color: #1f376d; font-size: 14px; line-height: 30px; height: 30px; } ul { padding: 0px 5px; } li { height: 30px; background: url(image/submenu.gif) right center no-repeat; line-height: 30px; padding-left: 5px; border-top: 1px #cfe2f5 solid; } a { text-decoration: none; color: #000000; } a:hover { text-decoration: none; color: #FF6215; } </style> </head> <body> <div> <h1>课程导航</h1> <ul> <li><a href="#">ACCP 软件工程师</a></li> <li><a href="#">BTEST 软件测试工程师</a></li> <li><a href="#">BENET 网络工程师</a></li> <li><a href="#">JBNS 网站工程师</a></li> <li><a href="#">ACCP 启蒙星</a></li> <li><a href="#">ANDROID 软件工程师</a></li> <li><a href="#">JAVA 软件工程师</a></li> <li><a href="#">.NET 软件工程师</a></li> <li><a href="#">网络营销</a></li> </ul> </div> </body> </html>
上机2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>商品分类</title> <style> h1, dl, dt, dd { margin: 0px; padding: 0px; } body { background-color: #D5D5D5; } div { width: 230px; background-color: #fff; } h1 { font-size: 16px; font-weight: bold; color: #FFF; background-color: #000; text-indent: 1em; line-height: 35px; } dt { padding-left: 27px; line-height: 35px; height: 35px; font-size: 14px; font-weight: bold; } dd { font-size: 12px; color: #666666; line-height: 20px; border-bottom: 1px #666666 dashed; padding-left: 27px; } dt:nth-of-type(1) { background: url(image/icon_01.gif) 0px 0px no-repeat; } dt:nth-of-type(2) { background: url(image/icon_02.gif) 0px 2px no-repeat; } dt:nth-of-type(3) { background: url(image/icon_03.gif) 0px 4px no-repeat; } dt:nth-of-type(4) { background: url(image/icon_04.gif) 0px 2px no-repeat; } dt:nth-of-type(5) { background: url(image/icon_05.gif) 0px 0px no-repeat; } dt:nth-of-type(6) { background: url(image/icon_06.gif) 0px 0px no-repeat; } dt:nth-of-type(7) { background: url(image/icon_07.gif) 0px 0px no-repeat; } dt:nth-of-type(8) { background: url(image/icon_08.gif) 0px 0px no-repeat; } dt:nth-of-type(9) { background: url(image/icon_09.gif) 0px 0px no-repeat; } dd:last-of-type { border-bottom: 0px; } </style> </head> <body> <div> <h1>全部分类</h1> <dl> <dt>护肤</dt> <dd> 洁面 化妆水 喷雾 美容液 眼霜<br/> 眼部精华 眼膜 面膜 面膜贴<br/> 水洗面膜 免洗面膜 精华 精油<br/> 凝露 乳液 面霜 日霜 晚霜 </dd> <dt>彩妆</dt> <dd> 卸妆 防晒 隔离 BB霜 粉底 粉饼<br/> 睫毛膏 眼影 唇彩 腮红 眼线笔<br/> 底妆 遮瑕 蜜粉 眉笔 美甲 </dd> <dt>香氛</dt> <dd>男香 女香 小Q装 中性香水</dd> <dt>身体护理</dt> <dd> 洗发 护发 沐浴 身体乳 手足护理<br/> 护手霜 纤体 身体精油 颈部护理<br/> 个人护理 卫生用品 脱毛 </dd> <dt>礼盒套装</dt> <dd> 护肤套装 身体护理套装 彩妆套装 <br/> 旅行装 香水套装 男士套装 </dd> <dt>美容工具</dt> <dd> 护肤 彩妆 美发 美体 美甲 <br/> 美容仪器 其他美容工具 </dd> <dt>母婴专区</dt> <dd>奶粉 尿裤湿巾 母婴洗护</dd> <dt>男士专区</dt> <dd> 洁面 爽肤水 面霜 男香<br/> 眼霜 凝胶 乳液 精华 沐浴 </dd> <dt>食品保健</dt> <dd>瘦身类 保健类 美容类 食品类</dd> </dl> </div> </body> </html>
上机3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>京东快报</title> <style> * { padding: 0; margin: 0; } body { margin: 30px; } a { text-decoration: none; } div { border: 1px #e4e4e4 solid; width: 230px; box-sizing: border-box; } h2 { padding-left: 10px; line-height: 43px; height: 43px; border-bottom: 2px #E8E8E7 dotted; font-size: 16px; color: #666; font-weight: normal; background: linear-gradient(to bottom,#CCCCFF,#FFFFFF); } ul { list-style: none; padding-top: 5px; padding-bottom: 5px; } li { line-height: 26px; padding-left: 10px; padding-right: 10px; } a { font-size: 12px; color: #666; text-decoration: none; } a:hover { color: #b20000; } span { font-weight: bold; } </style> </head> <body> <div> <h2>京东快报</h2> <ul> <li><a href=""><span>[特惠]</span>海飞丝去屑又去油 超清爽</a></li> <li><a href=""><span>[公告]</span>京东公益支持鲁甸新动作</a></li> <li><a href=""><span>[特惠]</span>4688元抢iPhone 6</a></li> <li><a href=""><span>[公告]</span>小米电视携豪礼高调入驻京东</a></li> </ul> </div> </body> </html>
上机4
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>美容热点产品</title> <style> p, ul, li { margin:0px; padding:0px; } ul, li { list-style-type:none; } body { background-color:#eee7e1; font-size:12px; } div { width:260px; background:#FFF; } p { font-size:14px; font-weight:bold; color:#FFF; background-color:#e9185a; height:35px; line-height:35px; padding-left:10px; } li { border-bottom:1px #a8a5a5 dashed; height:30px; line-height:30px; padding-left:2px; } a { color:#666666; text-decoration:none; } a:hover { color:#e9185a; } a span { color:#FFF; font-weight:bold; margin-right: 10px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #373b3c; line-height: 20px; text-align: center; } a:hover span { background: #e9185a; } </style> </head> <body> <div> <p>大家都喜欢买的美容品</p> <ul> <li><a href="#"><span>1</span>雅诗兰黛即时修护眼部精华霜15ml</a></li> <li><a href="#"><span>2</span>伊丽莎白雅顿显效复合活肤霜 75ml</a></li> <li><a href="#"><span>3</span>OLAY玉兰油多效修护霜 50g</a></li> <li><a href="#"><span>4</span>巨型一号丝瓜水320ML</a></li> <li><a href="#"><span>5</span>倩碧保湿洁肤水2号 200ml</a></li> <li><a href="#"><span>6</span>比度克细肤淡印霜 30g</a></li> <li><a href="#"><span>7</span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li> <li><a href="#"><span>8</span>SK-II护肤精华露 215ml</a></li> <li><a href="#"><span>9</span>欧莱雅青春密码活颜精华肌底液</a></li> </ul> </div> </body> </html>
上机5
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>爱奇异视频播放列表</title> <style> *{ padding: 0; margin: 0; } div{ width: 1000px; margin: 40px auto; } h3{ font-size: 18px; line-height: 40px; } li{ display: inline-block; padding: 10px; margin-right: 5px; } li:hover{ border-radius: 10px; box-shadow: 0 5px 5px rgba(0,0,0,0.1),0 0 10px 0 rgba(0,0,0,0.2); } h4:nth-of-type(1){ font-size: 16px; color: #4d4d4d; line-height: 30px; } p:nth-of-type(1){ color: #640000; font-size: 14px; } p:nth-of-type(2){ font-size: 12px; color: blue; } </style> </head> <body> <div> <h3>热播</h3> <ul> <li> <img src="image/img1.png" alt=""/> <h4>神武赵子龙</h4> <p>怒，林更新不抱网红抱女神</p> <p>点击次数：242445次</p> </li> <li> <img src="image/img2.png" alt=""/> <h4>旋风十一人</h4> <p>胡歌变教练在撩前女友</p> <p>点击次数：242445次</p> </li> <li> <img src="image/img3.png" alt=""/> <h4>太阳的后裔</h4> <p>宋慧乔吃嫩草</p> <p>点击次数：242445次</p> </li> <li> <img src="image/img4.png" alt=""/> <h4>山海经之赤影传说</h4> <p>娜扎张翰再度联手</p> <p>点击次数：242445次</p> </li> </ul> </div> </body> </html>
课后3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>中心开班信息</title> <style> body{ padding: 0; margin: 0; } div{ width:250px; border:1px rgb(202, 202, 220) solid; border-radius: 8px; margin: 0 auto; background: linear-gradient(to bottom, rgb(47, 206, 251),white,white,white); box-sizing: border-box; } h1{ background: url("image/bg.gif") 8px 7px no-repeat; font-size: 14px; font-weight: bold; color:white; line-height:35px; height:35px; padding-left:45px; padding-top:3px; padding-bottom:3px; margin:0; border-bottom:1px white solid ; } ul{ padding-left:0; margin-top: 10px; margin-bottom: 10px; } li{ background: url("image/dotBg.gif") left center no-repeat; line-height: 30px; height:30px; font-size: 17px; padding:0 0 0 18px; list-style: none; margin-right: 18px; } a{ color: rgb(93, 93, 101); text-decoration: none; } a:hover{ text-decoration: none; color:orangered; } </style> </head> <body> <div> <h1>中心开班信息</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>
课后4
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>商品分类列表页</title> <style> body{ padding: 0; margin: 0; } div{ padding: 0 2px 2px; margin:12px; width:210px; border:2px orange solid; border-radius: 10px; box-sizing: border-box; } p:first-child{ background: url("image/icon_01.jpg") 3px no-repeat; } p:nth-of-type(2){ background: url("image/icon_02.jpg") 3px no-repeat; } p:nth-of-type(3) { background: url("image/icon_03.jpg") 3px no-repeat; } p:nth-of-type(4){ background: url("image/icon_04.jpg") 3px no-repeat; } p:nth-of-type(5){ background: url("image/icon_05.jpg") 3px no-repeat; } p:nth-of-type(6){ background: url("image/icon_06.jpg") 3px no-repeat; } p:nth-of-type(7){ background: url("image/icon_07.jpg") 3px no-repeat; } p:nth-of-type(8){ background: url("image/icon_08.jpg") 3px no-repeat; } p:nth-of-type(9){ background: url("image/icon_09.jpg") 3px no-repeat; } p:last-child{ background: url("image/icon_10.jpg") 3px 2px no-repeat; } p{ line-height:30px; height:30px; font:bold 14px "黑体"; padding-left:52px; padding-top:18px; margin:0; border-bottom:1px gray dotted; } a{ color:black; text-decoration: none; } a:hover{ text-decoration: none; color:red; } p:last-of-type { border-bottom: 0; } </style> </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><a href="">家居百货</a></p> </div> </body> </html>
课后5
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>免费登录登录页面</title> <style> *{ margin: 0; padding: 0; } body{ width: 312px; background: url("image/bg.jpg") no-repeat; } ul{ margin-top: 80px; padding-left: 25px; padding-right: 25px; list-style: none; } li{ color: white; font-size: 14px; line-height: 37px; } span{ color: red; } input[type=text],input[type=email],select{ border: solid 1px grey; border-radius: 4px; height: 20px; } li:last-child{ text-align: center; } </style> </head> <body> <form method="post"> <ul> <li><span>*</span> 姓名： <input type="text" name="name" size="23"/></li> <li><span>*</span> 邮箱： <input type="email" name="email" size="23"/></li> <li><span>*</span> 电话： <input type="text" name="num" size="23"/></li> <li> 性别：<select name="gen"> <option>请选择</option> <option>男</option> <option>女</option> </select> </li> <li> 年龄：<select name="age"> <option>请选择</option> <option>30</option> <option>31</option> </select> </li> <li><input type="image" src="image/btn.jpg"/></li> </ul> </form> </body> </html>
