HTML5和CSS3开发第九章课后作业
第3题 QQ彩贝高级搜索
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>First</title><style>select{width: 70px;height:25px;margin-left: 10px;margin-bottom: 10px}.bottem{width:170px;margin-left: 35px;margin-bottom: 15px;display: none;animation: ser 2s linear 1;}#input1{background-color: #CCCCCC;width: 70px;height: 30px}div h2{margin-left: 15px;border-bottom: 6px red solid;padding-bottom: 12px;width: 210px;}div p input{margin-left: 15px;width: 210px;height: 40px;}#input1{margin-left:90px;margin-bottom: 15px;}div:hover .bottem{display: block;}@keyframes ser {0%{opacity: 0;height: 0%;}10%{height: 20%;opacity: 0.1;}20%{height: 30%;opacity: 0.2;}30%{height: 50%;opacity: 0.3;}50%{height: 60%;opacity: 0.5;}70%{height: 80%;opacity: 0.7;}100%{height: 100%;opacity: 1;}}</style>
</head>
<body><div style="border: 1px solid #CCCCCC;width: 250px;margin: 0px auto"><h2>高级搜索</h2><p><input type="search" placeholder="请输入关键字"></p><input type="submit" value="搜索" id="input1"><div class="bottem"><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><img src="data:images/practice4/img.bmp" style="width: 100%; height: 100%"><div class="div"><div><span>购物车</span><img src="data:images/practice4/toolbar_05.png"></div><div><span>我的关注</span><img src="data:images/practice4/toolbar_10.png"></div><div><span>我的足迹</span><img src="data:images/practice4/toolbar_15.png"></div><div><span>我的消息</span><img src="data:images/practice4/toolbar_19.png"></div></div></body>
</html>HTML5和CSS3开发第九章课后作业相关推荐
- HTML5和CSS3开发第一章课后作业
3.制作聚美优品常见问题页面 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- c语言第九章课后作业答案,c语言第九章习题带答案
c语言第九章习题带答案 - 1 - 练习9-1 答案 一.选择题 1．typedef unsigned long LONG 的作用是( D ). A．建立了一种新的数据类型 B ．定义了一个整形变量 ...
- 使用HTML5和CSS3开发电子商务网站第一章HTLM5基础课后作业
使用HTML5和CSS3开发电子商务网站第一章HTLM5基础课后作业 第三题,制作聚美优品常见问题页面. <!DOCTYPE html> <html lang="en&qu ...
- 用html5做一个介绍自己家乡的页面_（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备...
作者 | Jeskson来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变 ...
- Html5和CSS3开发指南学习
Html5和CSS3开发指南学习 1. 为什么学习HTML5 跨平台运行--PC/手机/Pad跨平台使用 硬件要求低 flash之外的选择,尤其是手机端开发 2. HTML介绍 2-1 什么是HTML ...
- 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)泵的吸水 ...
最新文章
- 浏览器开发人员工具使用初步图解
- 在git下搭建个人博客
- 前言 数组与指针的艺术
- 面试官问：JS的继承
- 【j360-boot】Spring-boot系列三（崩溃模式，不是你崩就是电脑崩）
- 飞书正式发布5.0版 推出飞书人事、合同、审批等多款新产品
- html2canvas 截屏 兼容手机端
- maven 项目 spring mvc + jdbc 配置文件
- CDH6.2.1安装Kafka出现的问题
- iOS中的预编译指令的初步探究
- 黑盒测试方法｜测试用例的设计方法--等价类划分方法
- power query时间函数(思维导图)
- FPGA之道（6）软件编程思路与FPGA编程思路的变革
- 直播源 直播地址 测试地址 http rtsp rtmp hls 短视频测试地址
- 关于学习的过程：痛并快乐着是一种收获
- 雪花飘落代码java_JavaScript实现雪花飘落效果
- Python编程-pypyodbc无驱动和无法打开注册表等错误的解决办法
- 逻辑英语结构【重点】
- “校园舆情监测系统”网站设计及网页编辑总结
- Rocket.chat 安装