位置: IT常识 - 正文

HTML作业04——简易美食页面(html作业做网页)

编辑:rootadmin
HTML作业04——简易美食页面

推荐整理分享HTML作业04——简易美食页面(html作业做网页),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html的作业,html设计网页作业,html作业模板,html5作业,html5作业,html的作业,html的作业,html作业成品,内容如对您有帮助,希望把文章链接给更多的朋友!

目标:实现鼠标悬停到某个食物上,会出现食物的名称和食物的介绍等,并且有一个过渡的动画效果。

1.HTML部分代码

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="css/meishi.css"><title>美食</title></head><body><div id="limian"><div id="shangmian"><img src="img/首页图.png" alt="图片"><div id="xiaodongxi"><span>真的是美食</span></div></div><div id="zhognjian01"><div id="tiaozheng01"><div class="xiandong01"></div><div class="xiandong02"></div><div class="houdong"><span>可乐鸡翅</span><a>可乐鸡翅算是一道所有人都喜欢吃的菜了,无论是小孩、大人,都喜欢吃可乐鸡翅!</a></div></div><div id="tiaozheng02"><div class="xiandong01"></div><div class="xiandong02"></div><div class="houdong"><span>酸梅蒸排骨</span><a>这道酸梅酱蒸排骨是用酸梅酱蒸的,酸甜可口很开胃。</a></div></div><div id="tiaozheng03"><div class="xiandong01"></div><div class="xiandong02"></div><div class="houdong"><span>蒸汽肉丸子汤</span><a>这款肉丸子汤的做法,简单又美味,特别适合老人孩子和牙口不好的朋友。</a></div></div><div id="tiaozheng04"><div class="xiandong01"></div><div class="xiandong02"></div><div class="houdong"><span>虾仁鸡蛋汤面</span><a>这道虾仁鸡蛋汤面很好吃!</a></div></div></div>

2.CSS部分代码

@charset "utf-8";/* CSS Document */*{margin: 0;padding: 0;}/*消除所有标签的内外边距*/ #limian{ width: 1370px; height: 1500px; margin: 0 auto;}#shangmian{width: 1370px;height: 450px;padding-bottom: 100px;}#xiaodongxi{width: 100px;height: 30px;margin: 0 auto;text-align: center;line-height: 30px;background-color: blueviolet;margin-top: 30px;border-radius: 10px;}#xiaodongxi span{font-size: 16px;font-family: "微软雅黑";color: aliceblue;}#zhognjian01{width: 1370px;height: 350px;}#zhognjian01 #tiaozheng01{width: 320px;height: 320px;float: left;margin-left: 20px;position: relative;overflow: hidden;background-image: url("../img/可乐鸡翅.png");}

3.网页效果

HTML作业04——简易美食页面(html作业做网页)

总结:通过这次学习,我加深了对变形属性的认识

变形属性:transform;

(1)旋转:rotate(angle);

angle是度数值,单位是deg,代表旋转角度,正值表示顺时针旋转,负值表示逆时针旋转。

(2)倾斜:skew(angleX,angleY);

angleX和angleY表示元素在x轴和y轴上的倾斜角度。

(3)缩放:scale(x,y);

x和y表示元素在水平和垂直方向上的缩放倍数。

(4)移动:translate(x,y);

x和y表示元素在水平和垂直方向上的移动距离。

本文链接地址:https://www.jiuchutong.com/zhishi/297851.html 转载请保留说明!

上一篇:损失函数 | BCE Loss(Binary CrossEntropy Loss)(损失函数是什么)

下一篇:JS 生成条形码(一维码)jsBarcode(js生成条形码的方式有哪些)

  • 财务软件回收
  • 管理费用结转本年利润,账簿怎么登
  • 软件 折旧年限
  • 主营业务收入计入
  • 跨区域能领发票吗
  • 应收票据和应收账款的区别举例
  • 土地出让要不要交印花税吗
  • 退回产品怎么做分录
  • 资产减值损失管理措施
  • 销售折扣购货方的会计分录
  • 刷信用卡的手续费去哪了
  • 研发人员报销
  • 期末未缴税额为什么会有数据
  • 金税三期个人所得税怎么下载
  • 非独立核算分公司个税怎么申报
  • 一般纳税人6个点和13点
  • 理财产品增值税纳税人
  • 医院晚上开不开
  • 增值税普通发票怎么开
  • 安徽附加税优惠政策
  • 个人年终奖如何交税
  • 哪几种跨省邮寄发票是违法的?
  • 物业公司安装监控
  • 公司用的冰箱
  • 买保险公司的年金险划算吗
  • 银行基本户年费
  • 经营租赁交什么税种
  • 生活补贴和节日补贴区别
  • 物流公司油卡怎么抵税的
  • 其他应收款计提坏账比例
  • 公司出售车辆
  • 并购动因理论有什么
  • 打开win10 defender
  • 税控盘不交服务费的后果
  • NJeeves.exe - NJeeves进程文件是什么意思 有什么用
  • 开发票的时候补差价怎么处理?
  • 运费抵扣怎么算
  • 单臂路由实验目的
  • 外商投资企业 外资企业
  • 工会经费计入什么费用明细科目
  • jsp页面构成
  • 利润表本年累计金额和本期金额有什么区别
  • 如何禁用笔记本键盘触摸板
  • 负数红字发票如何申报
  • 个税申报和社保申报的金额要一致吗
  • 调转会计证需要什么资料
  • 工程结算是含有增值税吗
  • db2报42603
  • MSSQL output使用
  • 金税盘技术服务费怎么交费
  • 小规模企业出租不动产增值税税率
  • 银行发放执行款多久到账
  • 公司购买的五金怎么入账
  • 银行代扣水电费发票到哪里打
  • 固定资产大修理支出摊销年限
  • 建筑图纸设计费多少钱
  • 产品成本计算的分批法适用于
  • 减免增值税如何申报
  • 待摊费用和预提费用的区别
  • 员工离职未领工资怎么处置
  • 银行存款日记账模板
  • windowsxp关闭窗口操作方法有哪些
  • 硬盘安装操作系统出现,两个操作系统怎么选择
  • 教你怎么制作麻雀胶
  • windows 安装源
  • win7系统如何卸载office2007
  • linux备份的文件bak如何恢复
  • opengl程序
  • Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
  • jquery点击切换div
  • cocos2dx3.3在Win7(64位)上Android开发环境搭建(提要)
  • Cocos2dx ParticleEditor粒子编辑器
  • unity2020商店
  • iframe嵌套页面滚动事件
  • android 多个权限合并 弹窗
  • 完美世界打斗
  • 辽宁省地方税务局公告2014年第10号
  • 纳税服务投诉整改报告
  • 青岛国税服务电话
  • 扶贫绩效目标申请怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设