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

  • 应交增值税是什么意思
  • 非居民个人利息所得个税税率
  • 按差额缴纳税款会计分录
  • 收到的加盟费要交税吗
  • 工程材料发票备注要求
  • 送货单和收据单的区别
  • 清包工可以有一部分小料吗
  • 本月增加的固定资产计提折旧吗
  • 城建税计税依据扣除增值税期末留抵
  • 营业成本增加会导致
  • 进料加工委托 加工费发票怎么开
  • 期房购置税怎么算
  • 应付票据的处理
  • 收到补价时应确认收益,支付补价时不能确认收益
  • 复式记账法哪本书提到过?
  • 收取职工房租 算收入吗
  • 小微企业免税销售额一栏怎么填
  • 软件进项税额分摊方式
  • 厂房装修费用计入制造费用吗
  • 公司变更税务处理?
  • 销售收入增加会导致哪些变动
  • linux查看系统信息工具
  • 所得税费用是什么账户类型
  • 广告公司员工
  • 企业给予的折扣怎么入账
  • 反结账是什么意思怎么取消
  • launcher.exe是什么,每次开机都是否需要进行更改
  • 预计负债内容
  • 企业注销时还有应付职工薪酬怎么办
  • PHP:imagestringup()的用法_GD库图像处理函数
  • php怎么创建项目
  • php通信协议
  • 阿尔比恩洞的级别
  • 长期借款利息调整会计分录
  • 公司借款利息可以用对公户转账吗
  • 免征增值税会计科目
  • 有关商品房质量的投诉,这些年一直
  • 安装exclipse
  • 设计公司发生的费用
  • 无形资产转让账务怎么做
  • 物流辅助服务要办许可证吗
  • javascrapt
  • 销售折扣购物卡怎么做账
  • 收到投资款怎么做账
  • 购置固定资产支付的现金属于投资活动产生的现金流量吗
  • mongodb索引存储方式
  • 财务费用有发票吗
  • 金税四期的特点
  • 机关事业单位体育协会举办体育赛事活动应当
  • sqlplus查询结果换行
  • 其他应收款如何计提减值准备
  • 企业办税人员如何实名认证
  • 一般纳税人增值税结转账务处理
  • 递延所得税资产和负债怎么理解
  • 记账凭证会计核算形式的程序
  • 工会经费的开支必须取得发票么
  • 免抵退账务处理流程
  • 公司举行活动发言稿范文
  • 去年所得税汇算清缴报表填错了今年可以改吗
  • 设备租金收入计什么科目
  • 工程量应当按照什么计算
  • 银行手续费在现金流量表怎么填
  • 药品进销差价的计算公式是什么
  • 固定资产盘点表excel
  • solaris命令
  • 微软宣布9月30日停止在俄罗斯服务
  • linux中man的用法
  • 苹果电脑mac设备怎么删除
  • winproj.exe - winproj进程是什么意思
  • win10累积更新是什么意思
  • windowsxp怎么查看用户名密码
  • android面试题简书
  • 统计文件个数linux
  • js parseint parsefloat
  • jquery树形菜单
  • js数组操作方法
  • adb工具使用说明文档下载
  • 实现断点续传的工具软件
  • 总包发票税率
  • 山东地税app
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设