上机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;}html （第四本书第九章参考）
原文地址：https://www.cnblogs.com/yunfeioliver/p/9370739.html