html （第四本书第九章参考）
2024-05-09 01:55:48
上机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: 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="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: 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="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: 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="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: 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="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: 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="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: 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;
}转载于:https://www.cnblogs.com/yunfeioliver/p/9370739.html
html （第四本书第九章参考）相关推荐
- 【西电—英美国家概况（英美概况/英美文化）2023第一学期】第九章参考课后答案
[西电-英美国家概况(英美概况/英美文化)2023第一学期]第九章参考课后答案
- Java编程思想第四版第九章练习
这一章讲的是接口, 其中抽象和C++中的纯虚函数特别相似,我会在Java编程思想专栏做完以后,专门写一篇文章来对比C++和Java的不同. 1.修改第8章练习9中的Rodent,使其成为一个抽象类.只 ...
- 谭浩强C语言第四版第九章课后习题7--9题（建立，输出，删除，插入链表处理）...
1 #include<stdio.h> 2 #include<stdlib.h> 3 #define N sizeof(link) 4 typedef struct stu 5 ...
- 第一本书 第九章 使用对象吃货联盟
如果有一天,能做到让程序自学习就好了:发呆发呆(｀・ω・´):这个小项目我写了5个小时: 优化了好多天:希望大家珍惜:谢谢 by 阿飞~ ~ package com.opp.opp.bookone ...
- Python中的图像处理（第九章）Python图像增强
Python中的图像处理(第九章)Python图像增强 前言 一. Python准备 二. Python仿真 三. 小结 前言 随着人工智能研究的不断兴起,Python的应用也在不断上升,由于Pyth ...
- 自动控制原理[厉玉鸣]7~9章参考答案【第九章】
第九章 前言 鉴于厉玉鸣等主编的这本<自动控制原理>的答案在网上很难找,我也只能找到用手机拍摄的7-9章部分作业习题(在百度文库),最近正好在学这本书的后半部分,所以把平时做的习题分享出来 ...
- SRPG游戏开发（四十一）第九章 战斗系统 - 三 战斗动画（Combat Animation）
返回总目录 第九章 战斗系统(Combat System) 在SRPG中,大多数情况是指角色与角色之间的战斗.而这种战斗一般有两种模式: 地图中直接战斗: 有专门的战斗场景. 这两种模式的战斗在数据上 ...
- 【西电—英美国家概况（英美概况/英美文化）2023第一学期】第四章参考课后答案
[西电-英美国家概况(英美概况/英美文化)2023第一学期]第四章参考课后答案 提示:第四题注意不要看错了!
- 【西电—英美国家概况（英美概况/英美文化）2023第一学期】第十四章参考课后答案
[西电-英美国家概况(英美概况/英美文化)2023第一学期]第十四章参考课后答案
- SRPG游戏开发（四十二）第九章 战斗系统 - 四 计算战斗数据II（Calculate Combat Data II）
返回总目录 第九章 战斗系统(Combat System) 在SRPG中,大多数情况是指角色与角色之间的战斗.而这种战斗一般有两种模式: 地图中直接战斗: 有专门的战斗场景. 这两种模式的战斗在数据上 ...
最新文章
- Memtest86-7.1内存测试工具
- android libc 有哪些函数_35K成功入职：腾讯视频面试Android经历！「含面试题+答案」...
- PHP GD库解析一张简单图片并输出
- Centos开机自己主动挂载windows中的ntfs磁盘
- 前端 HTML 常用标签 head标签相关内容 script标签
- python下载论文_Python实现一个论文下载器的过程
- mysql系统变量_MySQL系统变量
- spring事务的传播属性和事务隔离级别及配置事务（注解方式）
- php 5.4 mysql 5.7_致命错误：在将PHP 5.4.22和MySQL 5.5与Apache 2.4.7连接时调用未定义的函数mysqli_connect()...
- 函数 strcmp_【函数分享】每日PHP函数分享(2020630)
- html5广告条滚动特效代码,js实现随屏幕滚动的带缓冲效果的右下角广告代码
- 苹果手机设置信任软件
- “强省会”从产业开始，长沙市智能汽车产业促进会正式授牌
- 淘宝优惠券商城赚钱是真的吗？购物最便宜的app
- 宝塔面板+小鸟云服务器安全设置
- 知名网络漫画XKCD被黑客攻击，约56万用户数据被泄露
- DW1000学习之路（三）--------DW1000的中断处理问题
- php exchange,Windows-使用PHP访问Exchange的最佳方法？
- tomcat 乱码问题
- Ubuntu14.04下配置并使用MTK flash tool