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="data:image/1.jpg">
<img src="data:image/2.jpg">
<img src="data:image/3.jpg">
<img src="data:image/4.jpg">
<img src="data:image/5.jpg">
<img src="data:image/6.jpg">
<img src="data:image/7.jpg">
<img src="data:image/8.jpg">
<img src="data:image/9.jpg">
<img src="data: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:;
}
img:nth-of-type(even){
width: 200px;
}
img:nth-of-type(odd){
width: 300px;
}
img:nth-child(1){
top:;
left: 300px;
transform: rotate(-15deg);
}
img:nth-child(2){
top: -50px;
left: 600px;
transform: rotate(-20deg);
}
img:nth-child(3){
bottom:;
right:;
transform: rotate(15deg);
}
img:nth-child(4){
bottom:;
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:;
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="data:image/rss.png" /></a></li>
<li><a href="#"><img src="data:image/delicious.png" /></a></li>
<li><a href="#"><img src="data:image/facebook.png" /></a></li>
<li><a href="#"><img src="data:image/twitter.png"/></a></li>
<li><a href="#"><img src="data: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="data:image/1.jpg">
<img src="data:image/2.jpg">
<img src="data:image/3.jpg">
<img src="data:image/4.jpg">
<img src="data:image/5.jpg">
<img src="data:image/6.jpg">
<img src="data:image/7.jpg">
<img src="data:image/8.jpg">
<img src="data:image/9.jpg">
<img src="data: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:;
}
img:nth-of-type(even){
width: 200px;
}
img:nth-of-type(odd){
width: 300px;
}
img:nth-child(1){
top:;
left: 300px;
transform: rotate(-15deg);
}
img:nth-child(2){
top: -50px;
left: 600px;
transform: rotate(-20deg);
}
img:nth-child(3){
bottom:;
right:;
transform: rotate(15deg);
}
img:nth-child(4){
bottom:;
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:;
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="data:image/1.bmp"/>
</div>
<div id="second">
<p><span>彩贝抢霸</span><br/>每天10点更新</p>
<img src="data:image/2.bmp"/>
</div>
<div id="third">
<p><span> 热门优惠劵</span><br/>全场免费领取</p>
<img src="data:image/3.bmp"/>
</div>
<div id="fourth">
<p><span>促销活动</span><br/>汇集全网优惠</p>
<img src="data:image/4.bmp"/>
</div>
<div id="fifth">
<p><span>精挑细选</span><br/>给你最好的选择</p>
<img src="data: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:;
}
#third img{
position: absolute;
bottom: 20px;
right: 5px;
}
#fourth img{
position: absolute;
bottom: 5px;
right: 10px;
}
#fifth img{
position: absolute;
bottom: 5px;
right:;
}
上机 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="data:image/logo_170x46.png"/>
<ul>
<li>返回商城</li>
<li>商旅频道</li>
<li>积分商城</li>
<li>商旅频道</li>
<li>了解彩贝</li>
<li>彩贝活动</li>
<li>个人中心</li>
</ul>
<img src="data:image/iconsB_11.gif"/>
<img src="data:image/iconsB_12.gif"/>
<img src="data:image/iconsB_13.png"/>
<nav id="first"></nav>
<nav id="second"></nav>
</div>
</body>
</html>
css
*{
margin:;
}
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:;
}
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:;}
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:;
}
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:;
height:;
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:;
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="data:image/toolbar_05.png"/></li>
<li><img src="data:image/toolbar_10.png"/></li>
<li><img src="data:image/toolbar_15.png"/></li>
<li><img src="data: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:;
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:;
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:;
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="data: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:;
}
@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:;
}
#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:;
}
#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:;
}
html （第四本书第九章参考）的更多相关文章
- java编程思想第四版第九章总结
1. 策略设计模式 参考这篇文章:http://blog.csdn.net/chenjie19891104/article/details/6396458 讲的很清楚,策略设计模式.并且举了一个例子, ...
- java编程思想第四版第九章习题
第三题 package net.mindview.interfaces; abstract class Base{ public Base(){ print(); } abstract void pr ...
- html （第四本书第八章参考）
上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- 谭浩强第四版第九章课后习题12>>>建立一个链表，每个节点包括：学号、姓名、性别、年龄。输入一个年龄，若链表 中的结点所包含的年龄等于此年龄，则删除此结点。
#include<stdio.h> #include<stdlib.h> #define N sizeof(link) typedef struct lin { struct ...
- 谭浩强C语言第四版第九章课后习题7--9题（建立，输出，删除，插入链表处理）
#include<stdio.h> #include<stdlib.h> #define N sizeof(link) typedef struct stu { struct ...
- 精通Web Analytics 2.0 （11） 第九章： 新兴分析—社交，移动和视频
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第九章: 新兴分析-社交,移动和视频 网络在过去几年中发生了不可思议的发展变化:从单向对话到双向对话的转变; 由视频,Ajax和 ...
- [转]Windows Shell 编程 第九章 【来源：http://blog.csdn.net/wangqiulin123456/article/details/7987969】
第九章 图标与Windows任务条 如果问一个非程序人员Windows最好的特色是什么,得到的答案应该是系统最有吸引力的图标.无论是Windows98现在支持的通用串行总线(USB)还是WDM(看上去 ...
- 《Django By Example》第九章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag 注:哈哈哈,第九章终于来啦 ...
- Android群英传笔记——第九章：Android系统信息和安全机制
Android群英传笔记--第九章:Android系统信息和安全机制 本书也正式的进入尾声了,在android的世界了,不同的软件,硬件信息就像一个国家的经济水平,军事水平,不同的配置参数,代表着一个 ...
随机推荐
- 弹指之间 -- Slow Soul
CHAPTER 16 慢灵魂乐 Slow Soul (8Beat) Slow Soul每小节内几乎都是以8分音符弹奏,又称之为8Beat节奏,80左右的速度最能表现此节奏特色. 示例曲目: 拥抱
- python数据分析scipy和matplotlib（三）
Scipy 在numpy基础上增加了众多的数学.科学及工程常用的库函数: 线性代数.常微分方程求解.信号处理.图像处理.稀疏矩阵等: Matplotlib 用于创建出版质量图表的绘图工具库: 目的是为 ...
- Django中Celery http请求异步处理（四）
Django中Celery http请求异步处理 本章延续celery之前的系列 1.settings配置 2.编写task jib_update_task任务为更新salt jid数据 3.url设 ...
- 手机安全卫士-——Splash总结
1.在AndroidManifest.xml文件的application中配置,应用的主题:不带标题的主题 android:theme="@android:style/Theme.Black ...
- Spark记录-SparkSQL
Spark SQL的一个用途是执行SQL查询.Spark SQL也可以用来从现有的Hive安装中读取数据.有关如何配置此功能的更多信息,请参阅Hive表部分.从另一种编程语言中运行SQL时,结果将作为 ...
- Spring RedisTemplate操作-哈希操作（3）
@Autowired @Resource(name="redisTemplate") private RedisTemplate<String, String> rt; ...
- [转载]详解主流浏览器多进程架构：Chrome、IE
http://www.cnbeta.com/articles/109595.htm 随着Web浏览器重要性的日益突出,恶意软件.木马.间谍软件等网络攻击也呈现逐渐的上升.而面对 如此众多的潜在威胁,为 ...
- Web性能优化系列（2）：剖析页面绘制时间
本文由 伯乐在线 - J.c 翻译,sunbiaobiao 校稿.未经许可,禁止转载!英文出处:www.deanhume.com.欢迎加入翻译小组. 最近,我参加了在伦敦举办的Facebook移动开发 ...
- HTML5 移动开发 （HTML5标签和属性）
第一阶 1.如何使用HTML5中的新标签及属性 2.HTML5中的其它变化 3.HTML5的移动支持 4.使用HTML5开发移动WEB引用的理由 第二阶 HTML5 ...
- python垃圾回收二
由于循环引用的存在,我们在删除了a跟b之后,引用计数是1,这样,现有的垃圾回收机制是永远不可能把她们删除了.他们将永远存在于内存中. 我们当然不能对这种情况置之不理,于是,我们又添加了两种新的回收机制 ...