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

  • 华为mate40pro通话录音在哪里(华为mate40pro打电话没声音)

    华为mate40pro通话录音在哪里(华为mate40pro打电话没声音)

  • 华为P40有3D人脸识别功能吗(华为p40pro3d人脸识别)

    华为P40有3D人脸识别功能吗(华为p40pro3d人脸识别)

  • vivos6带耳机的吗(vivos6配套有没有耳机)

    vivos6带耳机的吗(vivos6配套有没有耳机)

  • 小米9防水级别是多少(小米9防水级别是什么)

    小米9防水级别是多少(小米9防水级别是什么)

  • 电子邮件三大组成部分(电子邮件三大组件)

    电子邮件三大组成部分(电子邮件三大组件)

  • A1图纸多大(a1图纸多大cad)

    A1图纸多大(a1图纸多大cad)

  • xr正常是玩几分钟掉一格电(iphonexr能玩多久)

    xr正常是玩几分钟掉一格电(iphonexr能玩多久)

  • 为什么手机只能充到百分之80的电(为什么手机只能拨打紧急电话了)

    为什么手机只能充到百分之80的电(为什么手机只能拨打紧急电话了)

  • 抖音短视频运营是做什么的(抖音短视频运营是真的吗)

    抖音短视频运营是做什么的(抖音短视频运营是真的吗)

  • 全局主题什么意思(什么叫全局主题)

    全局主题什么意思(什么叫全局主题)

  • 企业微信一定要认证吗(企业微信一定要实名认证吗)

    企业微信一定要认证吗(企业微信一定要实名认证吗)

  • 未激活的苹果手机怎么查序列号(未激活的苹果手机怎么关机)

    未激活的苹果手机怎么查序列号(未激活的苹果手机怎么关机)

  • 手机屏幕出现一条绿色的线(手机屏幕出现一根绿线能修好吗)

    手机屏幕出现一条绿色的线(手机屏幕出现一根绿线能修好吗)

  • 蓝牙avrcp是什么意思(蓝牙avpcp是什么)

    蓝牙avrcp是什么意思(蓝牙avpcp是什么)

  • 为什么苹果手机不能更新系统(为什么苹果手机无线局域网打不开)

    为什么苹果手机不能更新系统(为什么苹果手机无线局域网打不开)

  • ipad需要清理垃圾吗(ipad要清理缓存吗)

    ipad需要清理垃圾吗(ipad要清理缓存吗)

  • 华为有深色模式吗(华为深色模式怎么关)

    华为有深色模式吗(华为深色模式怎么关)

  • 苹果手机全网通是什么意思(苹果手机全网通和公开版有什么区别)

    苹果手机全网通是什么意思(苹果手机全网通和公开版有什么区别)

  • 来电时语音提示怎么取消(来电时语音提示有什么用)

    来电时语音提示怎么取消(来电时语音提示有什么用)

  • 快手极速版怎么暂停视频(快手极速版怎么填写邀请码)

    快手极速版怎么暂停视频(快手极速版怎么填写邀请码)

  • 机械设计CAD是什么(机械cad技术是什么)

    机械设计CAD是什么(机械cad技术是什么)

  • 苹果手机安装不上趣步(苹果手机安装不了软件是怎么回事)

    苹果手机安装不上趣步(苹果手机安装不了软件是怎么回事)

  • 手机全屏飘字怎么设置(怎么用手机屏幕飘字)

    手机全屏飘字怎么设置(怎么用手机屏幕飘字)

  • jovi智慧场景怎么关闭(jovi智慧场景怎么设置在桌面)

    jovi智慧场景怎么关闭(jovi智慧场景怎么设置在桌面)

  • 圣托里尼岛鸟瞰图,希腊 (© Amazing Aerial Agency/Offset)(圣托里尼岛游玩攻略)

    圣托里尼岛鸟瞰图,希腊 (© Amazing Aerial Agency/Offset)(圣托里尼岛游玩攻略)

  • 税务申报系统没有印花税
  • 收入纳税数据是什么意思
  • 关税是价内税还是税外税
  • 个人私活 要交个人所得税吗
  • 电子发票有使用期限吗
  • 房产税从租计征12%是年税率吗
  • 债务重组损失计算公式
  • 建筑业企业分包出克的是否能上报
  • 期初建账以前年度损益调整怎么转?
  • 分包工程有哪些风险
  • 不同项目的进项税可以抵销项税吗
  • 公司进项销项税差异较大
  • 企业支付的工伤费用怎么入账
  • 流转税税额
  • 汇算清缴是啥
  • 解析居民企业非货币性资产对外投资政策
  • 财务报告报送与信息采集季报怎么填写
  • 公司招待客户买的水果怎么入账
  • 销售土地使用权的增值税税率
  • 海尔笔记本最新款
  • 发票章不清楚可以报销吗
  • win11资源管理器卡死
  • 知乎百万大v
  • php字符串转浮点型
  • 银行存款利息是按月结还是按年
  • 提高支票处理效率的有效方法是
  • phpcrawl
  • javascript移动鼠标
  • php 反代
  • thinkphp with
  • 计提增值税附加税怎么计算
  • web前端框架是什么
  • setup.cgi
  • 销售原材料怎么入账
  • timestamp 0
  • 财务报表逾期了两个月有罚款吗
  • 公益性捐赠支出纳税调整
  • mysql可以存什么
  • 办公室装修费多少钱可以一次性入账
  • 非财政补助结余在资产负债表中怎么填
  • sql server 内存管理
  • 委托加工应税消费品是指委托方提供原料和主要材料
  • 个人所得税的征收模式为()A分类征收B
  • 在建工程增多
  • 处置固定资产增值税收入与企业所得税收入不一致
  • 材料会计的内容
  • 关于事业支出期末的结转
  • 贴现凭证如何做账务处理
  • 内退文件2018
  • 固定资产清理账户的借方登记的项目有
  • 电子发票是否使用
  • 物流公司回扣几个点
  • 利润为负还要交增值税吗
  • sql数据库回滚操作
  • 10分钟学会
  • sql server字段
  • mysql密码总是输入错误
  • xampp3.2.4安装教程与配置
  • microsoft window vista
  • linux常用命令sed
  • ubuntu kylin 14.04下载 ubuntu优麒麟14.04 lts下载地址
  • win10 自带软件
  • 常见unix操作系统
  • win7启动应用程序的方式
  • linux用户账户管理
  • linux的free命令详解
  • linux显示日期格式命令是
  • win8.1隐藏文件夹
  • JavaScript数组去重
  • perl常用函数
  • 遍历目录文件
  • 大家看的是什么
  • linux 使用技巧
  • shell脚本定时任务怎么写
  • javascript获取值
  • jQuery soColorPacker 网页拾色器
  • 如何查询车辆购置税
  • 多交了个人所得税怎么算
  • 丹东银行总行电话
  • 税率分几种 分别是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设