第9章课后作业

第3题 QQ彩贝高级搜索

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ彩贝高级搜索</title>
<style>
.div{
width: 400px;
/*height: 200px;*/
margin: auto;
border: gray solid 1px;
padding: 15px;
}
h1{
border-bottom: 4px solid;
padding-bottom: 20px;
}
select{
width: 150px;
height: 40px;
margin-left: 30px;
margin-top: 20px;
}
.div1{
transition: all 2s linear;
height: 0px;
opacity: 0;
transition: all 0.1s linear;
}
.div:hover .div1{
opacity: 1;
height: 250px;
}
</style>
</head>
<body>
<div class="div">
<h1>高级搜索</h1>
<form method="post" action="#"/>
<input type="search" style="width: 400px;height: 40px;margin: auto;font-size: 20px;text-indent: 1em;border: 1px solid gray" placeholder="请输入关键字">
<input type="submit" value="搜索" style="width: 100px;height: 30px;margin-left: 150px;margin-top: 20px;font-size: 20px">
<div class="div1">
<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>
</div>
</body>

</html>

第4题百度糯米

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度糯米</title>
<style>
.div div img{
background: black;
vertical-align: middle;
z-index: 2;
right: 0px;
}
.div div span{
display: inline-block;
border: solid 1px #c9321a;
border-radius: 5px;
color: white;
width: 90px;
text-align: center;
opacity: 0;
background: #c9321a;
float: right;
position: relative;
left: 90px;
}
@keyframes name {
0%{
opacity: 0;
left: 0px;
}
33%{
opacity: 0.3;
left: -30px;
}
66%{
opacity: 0.6;
left: -60px;
}
100%{
opacity: 1;
left: -90px;
}
}
.div{
position: fixed;
right: 0px;
top: 200px;
}
.div div{
margin-top: 50px;
position: relative;
left: 90px;
}
.div div:hover span{
animation: name 0.1s linear both;
}
</style>
</head>
<body>
<div>
<img src="data:image/img.bmp">
<div class="div">
<div><span>购物车</span><img src="data:image/toolbar_05.png"></div>
<div><span>我的关注</span><img src="data:image/toolbar_10.png"></div>
<div><span>我的足迹</span><img src="data:image/toolbar_15.png"></div>
<div><span>我的消息</span><img src="data:image/toolbar_19.png"></div>
</div>
</div>
</body>

</html>

第5题城市街景动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市街景动画</title>
<style>
body{
background: gray;
z-index: 99;
}

.div{

width: 1181px;
height: 780px;

margin: auto;
background: #212636;
animation: name 15s ease-in-out infinite alternate;
}
@keyframes name {
0%{
background: #212636;
}
20%{
background: #A68575;
}
40%{
background: #F7CCB5;
}
60%{
background: #DCECEC;
}
80%{
background: #B4C0CE;
}
100%{background: #6D5E80;
}
}
.d1{
position: absolute;
top: 500px;
z-index: 10;

}
.d2{
position: absolute;
top: 500px;
left: 350px;
z-index: 13;
}
.d3{
position: absolute;
top: 500px;
right: -400px;
z-index: 13;
}
.d4{
position: absolute;
top: 500px;
left: -400px;
z-index: 13;
}
.d5{
position: absolute;
top: 490px;
left: 100px;
z-index: 12;
}
.d6{
position: absolute;
top: 490px;
right: -300px;
z-index: 12;
}
.d7{
position: absolute;
top: 420px;
left: 750px;
z-index: 1;
}
.d8{
position: absolute;
top: 430px;
left: 160px;
z-index: 11;
}
.d9{
position: absolute;
top: 330px;
left: 360px;
z-index: 12;
}
.d10{
position: absolute;
top: 360px;
left: 610px;
z-index: 10;
}
.d11{
position: absolute;
top: 480px;
left: 160px;
z-index: 9;
}
.d12{
position: absolute;
top: 480px;
left: 380px;
z-index: 9;
}
.d13{
position: absolute;
top: 480px;
right: 0px;
z-index: 9;
}
.d14{
position: absolute;
top: 400px;
left: 800px;
z-index: 11;
}
.d15{
position: absolute;
top: 100px;
left: 160px;
z-index: 11;
}
.d16{
position: absolute;
top: 100px;
left: 460px;
z-index: 11;
}
.d17{
position: absolute;
top: 100px;
left: 860px;
z-index: 11;
}
.d18{
position: absolute;
top: 150px;
right: 130px;
z-index: 11;
transform: rotate(10deg);
animation: name1 15s ease-in-out infinite alternate;
}
@keyframes name1 {
0%{
transform: translate(0px) rotate(10deg);
}
20%{
transform: translate(-240px) rotate(10deg);
}
40%{
transform: translate(-480px) rotate(40deg);
}
60%{
transform: translate(-720px) rotate(70deg);
}
80%{
transform: translate(-960px) rotate(50deg);
}
100%{
transform: translate(-1181px) rotate(10deg);
}
}
</style>
</head>
<body>
<div class="div">
<div class="d1"><img src="data:image/groundBack.png"/></div>
<div class="d2"><img src="data:image/groundFront.png"/></div>
<div class="d3"><img src="data:image/groundFront.png"/></div>
<div class="d4"><img src="data:image/groundFront.png"/></div>
<div class="d5"><img src="data:image/groundMid.png"/></div>
<div class="d6"><img src="data:image/groundMid.png"/></div>
<div class="d7"><img src="data:image/beans.png"/></div>
<div class="d8"><img src="data:image/dowEventCenter.png"/></div>
<div class="d9"><img src="data:image/friendshipShell.png"/></div>
<div class="d10"><img src="data:image/Glockenspiel.png"/></div>
<div class="d11"><img src="data:image/skyline.png"/></div>
<div class="d12"><img src="data:image/skyline.png"/></div>
<div class="d13"><img src="data:image/skyline.png"/></div>
<div class="d14"><img src="data:image/Planetarium.png"/></div>
<div class="d15"><img src="data:image/cloudSmall.png"/></div>
<div class="d16"><img src="data:image/cloudMedium.png"/></div>
<div class="d17"><img src="data:image/cloudLarge.png"/></div>
<div class="d18"><img src="data:image/balloon.png"/></div>
</div>
</body>
</html>

第9章课后作业相关推荐

Python从入门到实践第9章课后作业
Python从入门到实践第9章课后作业编写过程中不知道如何将列表传入子类中,下面实例中均没有使用 #9-1 # class Restaurant(): # """模拟饭 ...
c语言常数-ox6a是什么意思,c语言1-7章课后作业答案
c语言1-7章课后作业答案 51intn=0:char*s:if(argc1)for(s=argv1:*s:s+)if(A=*s&*s=Z)|(a=*s&*s=z)n+:elsen=0 ...
MOOC高级语言程序设计第七章课后作业
MOOC高级语言程序设计第七章课后作业计票程序计算天数计票程序题目描述完成一个对候选人得票的统计程序.假设有3个候选人,名字分别为Li,Zhang和Fun.使用结构体存储每一个候选人的名字和 ...
HTML网页作业第二章课后作业,泵与泵站-第二章-课后作业.ppt
泵与泵站-第二章-课后作业作业: 1.如图2-104所示的泵装置.泵从一个密闭水箱抽水,输入另一个密闭水箱,水箱内的水面与泵轴平齐,试问: (1)该泵装置的静杨程HST=?(m)22 (2)泵的吸水 ...
python从入门到实践第8章课后作业
python从入门到实践第8章课后作业 #作业8-1 # def display_message(): # print('学习了如何定义函数') # display_message() # 作业8-2 ...
慕课软件质量保证与测试(第三章.课后作业)
慕课金陵科技学院.软件质量保证与测试.第三章.黑盒测试.课后作业 0 目录 3 黑盒测试 3.10 课后作业 3.10.1课堂重点 3.10.2测试与作业 4 下一章 0 目录 3 黑盒测试 3.10 ...
慕课软件质量保证与测试(第五章.课后作业)
慕课金陵科技学院.软件质量保证与测试.第五章.软件测试过程.课后作业 0 目录 5 软件测试过程 5.7 课后作业 5.7.1 课堂重点 5.7.2 测试与作业 6 下一章 0 目录 5 软件测试过程 ...
面对对象第二章课后作业
1.根据输入1~12月的数字,判断是春夏秋冬哪个季节: package com.homework.demo.test2_1;public class Season {/*** 季节类* 气象划分法在 ...
Hand on Machine Learning第三章课后作业(1)：垃圾邮件分类
import os import email import email.policy 1. 读取邮件数据 SPAM_PATH = os.path.join("E:\\3.Study\\机器学 ...
【作业】第一章课后作业
选择题: 1-5:B C C A B 6-10:B B B D B 11-15:B B BCD C AC 简答题: 1.JDK是Java开发工具包,用于构建在Java平台上发布的应用程序.applet ...

第9章课后作业

第9章课后作业相关推荐

最新文章

热门文章

第9章 课后作业

第9章 课后作业相关推荐

最新文章

热门文章

第9章课后作业

第9章课后作业相关推荐