位置: 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生成条形码的方式有哪些)

  • 小规模超过30万计算
  • 个税在资产负债表中体现吗
  • 外资企业是否属于公有制经济
  • 小规模销售免税农产品的分录
  • 实收资本增加的印花税
  • 个税全年一次性奖金单独计税
  • 开具的红字发票金税三期怎么报税?
  • 融资租赁与按揭贷款区别
  • 建筑工程公司涉及的会计科目
  • 库存现金盘点表是不是原始凭证
  • 风险溢价包括哪些违约风险溢价 流动性风险溢价
  • 增值税专票过了3年能抵扣吗
  • 实习生需要缴纳个税吗?
  • 租赁合同印花税双方都要交吗
  • 账本印花税每年交吗,要交几本
  • 筹建期装修费用计入什么科目
  • 建筑机械租赁站
  • 对公提回款是什么意思
  • 金税盘全额抵扣分录怎么做
  • 个税缴纳累计是每年一算吗
  • 开票税额与申报税额差一分账务怎么处理
  • 每月物业费怎么计算公式
  • 预交增值税抵减申报
  • 收到政府补贴要交增值税吗
  • 未分配利润是什么类科目
  • 公司经营权补偿款会计处理?
  • win10系统如何在游戏中禁用输入法
  • 原始股解禁后减持的条件是什么
  • 打开win10 defender
  • 富士通FUJITSU笔记本电脑开机进入BIOS的方法(F2)
  • 电脑fs0是什么
  • 代理买卖证券款属于什么科目
  • 应收账款转让的限制约定
  • 发票抵税是怎么申报的
  • 蓝山公馆的房子怎么样
  • zen框架
  • linux的nano是什么意思
  • 支付宝服务窗支付是啥
  • 微信利用php创建文件
  • 冲红发票操作流程
  • 特殊动产的一物数卖履行顺序
  • 融资租入固定资产的改建支出
  • 销售不同商品的会计分录
  • 小企业原材料
  • 应收账款出售给银行账务处理
  • 收到的稳岗补贴是否需要交税
  • 结转财务费用时怎么做账
  • 网上银行回单可以做账吗
  • 材料暂估入库的依据有哪些
  • 非三包退车能否退款
  • 以前年度损益调整会计分录
  • 什么人适合单干
  • 资产负债表日后事项是指资产负债表日之后至审计报告
  • 地价计入房产原值文件解读
  • 机构信用代码证在哪里办理
  • 实际出资和名义出资
  • 处置固定资产净收益属于利得吗
  • 政府补贴的装修费是免税的吗
  • 转账显示未认证
  • 未开票收入怎么报税
  • 材料人工制造费用是什么成本
  • 私营公司商业汇票怎么开
  • sqlserver比较日期时间
  • 设置自动清理缓存电脑
  • netsh cmd
  • win8 分屏
  • wbs是什么的缩写
  • pavkre.exe - pavkre是什么进程 作用是什么
  • windows8使用技巧
  • jquery 插件编写
  • css翻转正反面
  • opengl和openglskia
  • nodejs oom
  • 右键隐藏在哪
  • javascript入门基础
  • jsonp如何解决跨域问题
  • javascript教程
  • 如何使用jquery
  • 没有代理记账资格的公司能代理记账吗
  • 关于个体户的个人所得税的最新政策法规
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设