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

  • 转让金融商品应交增值税计入
  • 城镇土地使用税纳税义务发生时间
  • 劳务费发票可以抵扣进项税吗
  • 成本票和进项票怎么区分
  • 发票验证码和校验码是一样的吗
  • 分公司分开银行账户付款的好处
  • 应付债券利息计入哪里
  • 已提足折旧的固定资产残值怎么处理
  • 去国外参加展览的英文
  • 转账支票支付展览费
  • 销项已开进项还没有收到分录如何处理?
  • 定期存款利息税是多少
  • 宽带费增值税
  • 背书出去的票据信息在哪里查询
  • 人工成本如何申报个税
  • 增值税税控盘服务费可以每年都抵扣吗
  • 接受政府无偿划拨固定资产税务处理
  • 企业取得免税收入怎么算
  • 免税行业企业
  • 国税地税纳税申报
  • 1697510660
  • 核定征收个体户怎么报税
  • 2020工会经费退费
  • 开电脑店几年搞活动好吗
  • linux ctrl c和ctrl z
  • 企业固定资产出售账务处理
  • linux mint 20.1安装
  • linux 数字加减
  • 商品房缴纳维修基金的规定
  • 艾叶泡脚的方法和注意事项
  • 房地产企业将开什么发票
  • 金钱树的养殖方法 盆栽
  • 员工提前预支工资借条
  • php strtr
  • nginx反向代理未知域名
  • php作品
  • yii框架连接数据库
  • yolov3目标检测步骤流程图
  • nginx webservice
  • php使用正则表达式检测是否包含非数字
  • php array_multisort 对数组进行排序详解及实例代码
  • 中国烟草资产负债表
  • 材料暂估入库如何进行账务处理
  • 资本化的后续支出
  • 无形资产商标设计图片
  • 代收代缴水费收不上来怎么办
  • SQL Server 2012 开窗函数
  • 医院执行政府会计制度操作指南 .pdf
  • sqlserver有实例吗
  • 上缴非税收入的税种
  • 长期应付款科目的涉税风险
  • 小规模未达到起征点如何结转
  • 一般纳税人开劳务发票税率
  • 以前年度损益的科目代码
  • 初级会计实务中第二章第四节存货(5)费琪
  • 捐赠支出税前扣除比例
  • 资本公积的核算维度是什么
  • 企业自建厂房需要有资质吗
  • 月初没有发票
  • 补缴以前年度企业年金可以税前扣除吗
  • 旅游团建费用会计怎么入账
  • 专利的费用计入成本吗
  • Mac下mysql 5.7.17 安装配置方法图文教程
  • 怎样用windows
  • 在苹果电脑上怎么下载软件
  • windows预览版和正式版区别
  • ubuntu unity8
  • centos关闭kdump
  • explore.exe进程占用cpu99%
  • win7怎么录屏为什么不是视频
  • javascript基于什么的语言
  • cocos2dx视频教程
  • Node.js中的construct
  • python序列结构总结
  • javascript 日期
  • 预拍摄功能相机
  • 山西电子税务局官网app
  • 两江新区钓鱼地方
  • 店面转让,房租怎么交税
  • 个体户国税地税怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设