html （第四本书第九章参考）
上机1
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>照片墙</title> <link href="css/上机练习1.css" rel="stylesheet" type="text/css"> </head> <body> <div> <img src="image/1.jpg"> <img src="image/2.jpg"> <img src="image/3.jpg"> <img src="image/4.jpg"> <img src="image/5.jpg"> <img src="image/6.jpg"> <img src="image/7.jpg"> <img src="image/8.jpg"> <img src="image/9.jpg"> <img src="image/10.jpg"> </div> </body> </html>
css
div{ width: 960px; margin: 200px auto; position: relative; } img{ border: 1px solid #ddd; padding: 10px; position: absolute; background: white; z-index: 1; } img:nth-of-type(even){ width: 200px; } img:nth-of-type(odd){ width: 300px; } img:nth-child(1){ top: 0; left: 300px; transform: rotate(-15deg); } img:nth-child(2){ top: -50px; left: 600px; transform: rotate(-20deg); } img:nth-child(3){ bottom: 0; right: 0; transform: rotate(15deg); } img:nth-child(4){ bottom: 0; right: 340px; transform: rotate(-20deg); } img:nth-child(5){ top: -230px; left: 10px; transform: rotate(-30deg); } img:nth-child(6){ top: 20px; left: 10px; transform: rotate(20deg); } img:nth-child(7){ top: 5px; right: -65px; transform: rotate(20deg); } img:nth-child(8){ top: -160px; left: 235px; transform: rotate(25deg); } img:nth-child(9){ top: 95px; right: 85px; transform: rotate(15deg); } img:nth-child(10){ top: 50px; left: 190px; transform: rotate(-10deg); } img:hover{ z-index: 2; box-shadow: 5px 5px 5px #ddd; transform: rotate(0deg) scale(1.5); }
上机 2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转按钮</title> <style type="text/css"> h2{ padding-left: 15px; } li { float: left; margin: 0 10px; list-style: none; } li:hover { transform: rotate(360deg) scale(1.5); } </style> </head> <body> <h2>顺时针旋转360度放大1.2倍</h2> <ul> <li><a href="#"><img src="image/rss.png" /></a></li> <li><a href="#"><img src="image/delicious.png" /></a></li> <li><a href="#"><img src="image/facebook.png" /></a></li> <li><a href="#"><img src="image/twitter.png"/></a></li> <li><a href="#"><img src="image/yahoo.png" /></a></li> </ul> </body> </html>
css
无
上机 3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>照片墙</title> <link href="css/上机练习3.css" rel="stylesheet" type="text/css"> </head> <body> <div> <img src="image/1.jpg"> <img src="image/2.jpg"> <img src="image/3.jpg"> <img src="image/4.jpg"> <img src="image/5.jpg"> <img src="image/6.jpg"> <img src="image/7.jpg"> <img src="image/8.jpg"> <img src="image/9.jpg"> <img src="image/10.jpg"> </div> </body> </html>
css
div{ width: 960px; margin: 200px auto; position: relative; } img{ border: 1px solid #ddd; padding: 10px; position: absolute; background: white; z-index: 1; } img:nth-of-type(even){ width: 200px; } img:nth-of-type(odd){ width: 300px; } img:nth-child(1){ top: 0; left: 300px; transform: rotate(-15deg); } img:nth-child(2){ top: -50px; left: 600px; transform: rotate(-20deg); } img:nth-child(3){ bottom: 0; right: 0; transform: rotate(15deg); } img:nth-child(4){ bottom: 0; right: 340px; transform: rotate(-20deg); } img:nth-child(5){ top: -230px; left: 10px; transform: rotate(-30deg); } img:nth-child(6){ top: 20px; left: 10px; transform: rotate(20deg); } img:nth-child(7){ top: 5px; right: -65px; transform: rotate(20deg); } img:nth-child(8){ top: -160px; left: 235px; transform: rotate(25deg); } img:nth-child(9){ top: 95px; right: 85px; transform: rotate(15deg); } img:nth-child(10){ top: 50px; left: 190px; transform: rotate(-10deg); } img:hover{ z-index: 2; box-shadow: 5px 5px 5px #ddd; transform: rotate(0deg) scale(1.5); transition: transform 0.6s ease-in-out; }
上机 4
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>QQ彩贝热销时装</title> <link href="css/上机练习4.css" rel="stylesheet" type="text/css"> </head> <body> <div id="first"> <p><span>超级信用卡</span><br/>线上线下课累计彩贝积分</p> <img src="image/1.bmp"/> </div> <div id="second"> <p><span>彩贝抢霸</span><br/>每天10点更新</p> <img src="image/2.bmp"/> </div> <div id="third"> <p><span> 热门优惠劵</span><br/>全场免费领取</p> <img src="image/3.bmp"/> </div> <div id="fourth"> <p><span>促销活动</span><br/>汇集全网优惠</p> <img src="image/4.bmp"/> </div> <div id="fifth"> <p><span>精挑细选</span><br/>给你最好的选择</p> <img src="image/5.bmp"/> </div> </body> </html>
css
p{ font-size: 12px; line-height: 36px; margin-left: 20px; } span{ font-weight: bold; color: gray; font-size: 14px; } img:hover{ transform: translate(-12px,0); transition: all 1s ease-out; } #first{ border: 1px solid gainsboro; position: absolute; left: 50px; top: 20px; width: 226px; height: 286px; } #second{ border-top: 1px solid gainsboro; border-bottom: 1px solid gainsboro; position: absolute; left: 276px; top: 20px; width: 230px; height: 143px; } #third{ border: 1px solid gainsboro; position: absolute; left: 506px; top: 20px; width: 230px; height: 143px; } #fourth{ border-bottom: 1px solid gainsboro; position: absolute; left: 276px; top: 164px; width: 230px; height: 143px; } #fifth{ border: 1px solid gainsboro; position: absolute; left: 506px; top: 164px; width: 230px; height: 143px; } #first img{ position: absolute; bottom: 38px; right: 20px; } #second img{ position: absolute; bottom: 15px; right: 0; } #third img{ position: absolute; bottom: 20px; right: 5px; } #fourth img{ position: absolute; bottom: 5px; right: 10px; } #fifth img{ position: absolute; bottom: 5px; right: 0; }
上机 5
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>QQ彩贝导航</title> <link href="css/上机练习5.css" rel="stylesheet" type="text/css"> </head> <body> <div> <img src="image/logo_170x46.png"/> <ul> <li>返回商城</li> <li>商旅频道</li> <li>积分商城</li> <li>商旅频道</li> <li>了解彩贝</li> <li>彩贝活动</li> <li>个人中心</li> </ul> <img src="image/iconsB_11.gif"/> <img src="image/iconsB_12.gif"/> <img src="image/iconsB_13.png"/> <nav id="first"></nav> <nav id="second"></nav> </div> </body> </html>
css
*{ margin: 0; } div{ position: relative; height: 90px; background: linear-gradient(to bottom,white, rgb(240, 240, 240)) ; } img:nth-of-type(1){ position: absolute; top: 33%; left: 110px; } img:nth-of-type(2){ position: absolute; top: 43%; left: 1010px; } img:nth-of-type(2):hover{ transform: rotate(360deg); transition: transform 0.3s linear; } img:nth-of-type(3){ position: absolute; top: 43%; left: 1050px; } img:nth-of-type(3):hover{ transform: rotate(360deg); transition: transform 0.3s linear; } img:nth-of-type(4){ position: absolute; top: 43%; left: 1090px; } img:nth-of-type(4):hover{ transform: rotate(360deg); transition: transform 0.3s linear; } #first{ background: url("../image/header_03.png") 0 0 no-repeat; width: 66px; height: 23px; position: absolute; top: 25%; left: 335px; } #first:hover{ animation:flash 0.3s linear both ; background: url("../image/header_05.png") 0 0 no-repeat; } #second{ background: url("../image/header_07.png") 0 0 no-repeat; width: 66px; height: 23px; position: absolute; top: 25%; left: 525px; } #second:hover{ animation:flash 0.3s linear both ; background: url("../image/header_09.png") 0 0 no-repeat; } ul{ position: absolute; left: 320px; top: 45px; padding: 0; } li{ list-style: none; float: left; border-right: 1px solid; padding: 0 15px; line-height: 18px; } li:nth-of-type(7){ border-right: none; } @keyframes flash { 0%{width:0;} 33%{width:23px;} 66%{width:46px;} 100%{width:69px;} }
课后3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>QQ彩贝高级搜索</title> <link href="css/本章作业3.css" rel="stylesheet" type="text/css"> </head> <body> <form method="post"> <h3>高级搜索</h3> <div></div> <p><input type="search" placeholder=" 请输入关键字"/></p> <p><input type="submit" value="搜索"/><p> <div> <select> <option>场合</option> </select> <select> <option>性别</option> </select> <select> <option>风格</option> </select> <select> <option>色系</option> </select> <select> <option>价格</option> </select> <select> <option>年龄</option> </select> <select> <option>季节</option> </select> </div> </form> </body> </html>
css
*{ margin: 0; } form{ margin: 200px auto; padding: 0 10px; border: 1px gainsboro solid; width: 162px; text-align: center; } h3{ text-align: left; margin:8px 0; } div:nth-of-type(1){ background-color: red; height: 5px; margin-bottom: 20px; } p{ margin-bottom: 10px; } p:nth-of-type(1) input{ height: 35px; width: 162px; } p:nth-of-type(2) input{ height: 30px; width: 70px; } div:nth-of-type(2){ opacity: 0; height: 0; margin-bottom: 16px; text-align: left; padding-left: 6px; } div:nth-of-type(2):hover{ animation: flash 2s linear forwards; } select{ width: 60px; margin: 4px 4px; color: #85857e; border: 1px solid #dbdbcf; height: 22px; font-size: 13px; } @keyframes flash { 100% { opacity: 1; height: 100%; } }
课后4
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>百度糯米购物信息导航</title> <link href="css/本章作业4.css" rel="stylesheet" type="text/css"> </head> <body> <div> <ul id="pic"> <li><img src="image/toolbar_05.png"/></li> <li><img src="image/toolbar_10.png"/></li> <li><img src="image/toolbar_15.png"/></li> <li><img src="image/toolbar_19.png"/></li> </ul> <ul id="txt"> <li>购物车</li> <li>我的关注</li> <li>我的足迹</li> <li>我的消息</li> </ul> </div> </body> </html>
css
body { width: 1220px; height: 2405px; background: url("../image/img.bmp") no-repeat center; background-size: 130%; } #pic { position: fixed; right: 0; bottom: 30%; list-style: none; } #pic li { background: #5f5f5f; margin: 5px 0; padding: 9px 7px 5px; border-radius: 5px 0 0 5px; } #txt { position: fixed; right: 0; bottom: 30%; list-style: none; } #txt li { margin: 4px 0; padding: 7px 18px 7px 0; border-radius: 5px 0 0 5px; width: 90px; font-size: 13px; line-height: 21px; text-align: center; color: white; opacity: 0; border: solid 1px; } #txt li:hover { animation: flash 1s ease-in forwards; } @keyframes flash { 0% { background: #5f5f5f; transform: translateX(80px); transition: transform; } 100% { opacity: 0.8; background: #d80000; } }
课后5
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>城市场景动画</title> <link href="css/本章作业5.css" rel="stylesheet" type="text/css"> </head> <body> <div id="father"> <img src="image/balloon.png"/> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
css
* { margin: 0; } @keyframes sky { 0% { background: #0e0e42 } 33% { background: #78706d } 50% { background: #fad6bf } 66% { background: #b6ffde } 100% { background: #0e0e42 } } @keyframes balloon { 0% { transform: rotate(10deg); transition: transform; } 25% { transform: translateX(-400px) rotate(30deg); transition: transform; } 50% { transform: translateX(-720px) rotate(60deg); transition: transform; } 75% { transform: translateX(-1000px) rotate(40deg); transition: transform; } 100% { transform: translateX(-1400px); transition: transform; } } #father { position: relative; height: 600px; width: 1300px; animation: sky 30s linear infinite; } img{ position: absolute; right: -70px; top: 30px; animation: balloon 30s linear infinite alternate; } #father div:nth-of-type(1) { background: url(../image/beans.png); width: 88px; height: 201px; position: absolute; left: 655px; bottom: 180px; } #father div:nth-of-type(2) { background: url(../image/skyline.png); width: 1300px; height: 147px; position: absolute; bottom: 156px; } #father div:nth-of-type(3) { background: url(../image/groundBack.png) 65px; width: 1300px; height: 281px; position: absolute; bottom: 0; } #father div:nth-of-type(4) { background: url(../image/Glockenspiel.png); width: 137px; height: 263px; position: absolute; left: 518px; bottom: 155px; } #father div:nth-of-type(5) { background: url("../image/Planetarium.png"); width: 347px; height: 285px; position: absolute; left: 832px; bottom: 108px; } #father div:nth-of-type(6) { background: url("../image/dowEventCenter.png"); width: 520px; height: 229px; position: absolute; left: 67px; bottom: 125px; } #father div:nth-of-type(7) { background: url("../image/groundMid.png"); width: 1300px; height: 299px; position: absolute; bottom: 0; } #father div:nth-of-type(8) { background: url("../image/friendshipShell.png"); position: absolute; width: 231px; height: 370px; left: 262px; bottom: 108px; } #father div:nth-of-type(9) { background: url("../image/groundFront.png") 255px; width: 1300px; height: 301px; position: absolute; bottom: 0; }
