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

  • 递延所得税负债账务处理
  • 预收款开发票,不确认收入可以吗?
  • 职工的困难补助计入什么科目
  • 个体户核定征收2023新政税率
  • 农民合作社交哪些税
  • 会计忘记申报税款会有什么影响
  • 建筑业的进项税怎么抵扣
  • 本月做未开票收入,下月开票怎么做账
  • 房地产企业临时售楼部房产据含土地价值吗
  • 增值税调整后开具发票
  • 亏损企业交税
  • 修理厂普通发票
  • 个人交物业费开发票交税点吗
  • 进项税额抵扣的情况有哪些
  • 免税发票上税率是多少
  • 水利基金免税额度是多少
  • 收到支票怎么处理
  • 高速公路过路费税率是多少
  • 代理运输协议范本
  • 产品检测步骤
  • wifi认证失败怎么办
  • 什么叫冲减进项税额
  • 税控盘服务费全额抵扣勾选在什么地方
  • 洗牙的利和弊
  • 法人向公司借款要交什么税
  • 进口货物怎样报关
  • 营业外收支计算公式
  • php使用什么开发工具
  • 自动驾驶的时候可以睡觉吗
  • vue3刷新组件
  • 2023年顶会、顶刊SNN相关论文----------持续更新中
  • 中小企业所得税优惠政策2022
  • 营改增后土地增值税如何计算
  • mybatis isnotempty标签
  • javaweb项目简介
  • spring ioc di aop
  • 比较好的微信名称有哪些
  • vscode终端显示
  • 织梦文章内容图片大全
  • 预提开发成本的会计分录
  • 其他应付款不用付了会计分录
  • 企业存货核算范围
  • 银行承兑汇票背书转让会计分录
  • 建筑发票开具与土增税扣有什么关系?
  • 销项税和进项税计算公式
  • 递延所得税资产和负债账务处理
  • 企业转让固定资产属于什么收入
  • 如何结转生产成本及制造费用
  • 担保属于债权吗
  • 银行汇票后面怎样背书盖章
  • 采取分期收款方式
  • 商业承兑汇票和银行承兑汇票的区别
  • 企业会计账簿设计的原则
  • 会计档案销毁方案怎么写
  • 计入当期损益是不是计入三大期间费用
  • sql server怎么执行
  • 电脑上的win8键盘怎么打开
  • win10的时间设置
  • 中国主要省份和城市
  • 苹果电脑mac系统怎么用
  • linux服务器安装虚拟机
  • cmd命令 cd
  • Win8.1如何能将任意文件隐藏到普通图片中例如JPG图片
  • mac u 盘启动
  • macos 关闭屏幕
  • StatusClient.exe - StatusClient是什么进程 有什么作用
  • propelac.exe - propelac是什么进程 有什么用
  • linux字符串命令
  • js字符串includes
  • node. js教程
  • unity3d控制物体移动
  • 通过制作潜望镜活动,你获得哪些宝贵的经验
  • javascript数组有哪些方法
  • javascript面向对象编程指南 pdf
  • 广西税务12366如何查看代他人缴费发票
  • 江苏省发票查询电话
  • 黄金消费税如何缴纳
  • 工会经费填错了怎么办
  • 新税法折旧年限怎么算
  • 国家税务局申报系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设