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

  • 20个博客SEO优化技巧(关于seo博客优化问题)

    20个博客SEO优化技巧(关于seo博客优化问题)

  • ps5美版和港版区别(ps5美版和港版区别大吗)

    ps5美版和港版区别(ps5美版和港版区别大吗)

  • ipad显示不在充电怎么办(iPad显示不在充电)

    ipad显示不在充电怎么办(iPad显示不在充电)

  • 抖音不互相关注能发信息吗(抖音不互相关注能私信几条)

    抖音不互相关注能发信息吗(抖音不互相关注能私信几条)

  • b站账号封禁在哪解封(b站账号封禁中是什么意思)

    b站账号封禁在哪解封(b站账号封禁中是什么意思)

  • iphone11怎么清理缓存(iphone11怎么清理照片内存)

    iphone11怎么清理缓存(iphone11怎么清理照片内存)

  • 无线网需要认证登录怎么回事(无线网需要认证登录怎么操作)

    无线网需要认证登录怎么回事(无线网需要认证登录怎么操作)

  • QQ空间发说说视频能定时吗(qq空间发说说视频大小限制)

    QQ空间发说说视频能定时吗(qq空间发说说视频大小限制)

  • oppor17升级后开不了机(oppor17系统升级后没小欧了)

    oppor17升级后开不了机(oppor17系统升级后没小欧了)

  • 邮件撤回对方有提示吗(邮件撤回成功是不是说明对方没看)

    邮件撤回对方有提示吗(邮件撤回成功是不是说明对方没看)

  • 文件名的命名规则是什么(文件名的命名规则视频)

    文件名的命名规则是什么(文件名的命名规则视频)

  • 淘宝怎么解绑银行卡号(淘宝怎么解绑银行卡视频)

    淘宝怎么解绑银行卡号(淘宝怎么解绑银行卡视频)

  • 电脑服务器运行失败怎么办(电脑服务器运行中为什么要切换到激活程序)

    电脑服务器运行失败怎么办(电脑服务器运行中为什么要切换到激活程序)

  • qq好友删了聊天记录还有吗(qq好友删了聊天记录还在吗)

    qq好友删了聊天记录还有吗(qq好友删了聊天记录还在吗)

  • 4g卡用5g手机上网快吗(4g卡用5g手机上网)

    4g卡用5g手机上网快吗(4g卡用5g手机上网)

  • 抖音封禁什么时候可以登录(抖音封禁什么时候能解开)

    抖音封禁什么时候可以登录(抖音封禁什么时候能解开)

  • 怎样取消支付宝刷脸功能(怎样取消支付宝双V会员1.99)

    怎样取消支付宝刷脸功能(怎样取消支付宝双V会员1.99)

  • 怎么用函数公式从身份证号里提出出生日期(怎么用函数公式提取其他表中的名称与本表中没有的名称)

    怎么用函数公式从身份证号里提出出生日期(怎么用函数公式提取其他表中的名称与本表中没有的名称)

  • ios14什么时候出(ios14是什么时候发布)

    ios14什么时候出(ios14是什么时候发布)

  • 手机自拍杆怎么用步骤说详细点(手机自拍杆怎么用步骤)

    手机自拍杆怎么用步骤说详细点(手机自拍杆怎么用步骤)

  • 加入黑名单的电话号码怎么恢复(加入黑名单的电话来电有提示吗)

    加入黑名单的电话号码怎么恢复(加入黑名单的电话来电有提示吗)

  • 手机浏览器怎么设置成电脑版的(手机浏览器怎么改成电脑版)

    手机浏览器怎么设置成电脑版的(手机浏览器怎么改成电脑版)

  • 房地产企业环保税什么时候申报
  • 对公账户取现金怎么取
  • 增值税专用发票是干什么用的
  • 对外投资属于资产类账户吗
  • 销售报废车辆按多少计提销项税额
  • 附加税印花税个税申报实训心得
  • 差旅费报销怎么做账
  • 别人退保证金多久能到账
  • 打桩和挖土
  • 长期待摊费用摊出来钱去哪里了
  • 一般纳税人购入货物相关的增值税可以抵扣
  • 小规模企业如何变更营业范围
  • 营改增后为何还要交地税?
  • 建筑总包会计分录
  • 商贸企业仓储服务有哪些
  • 法人向公司借款用途怎么写
  • 支付知识产权服务费账务处理
  • 清算期待摊费用怎么计算
  • 电脑开机弹出documents文件夹
  • 外经证核销办理流程图
  • Win10 Build 19043(21H1最新版)即将推送 更新内容汇总
  • 股份公司注销流程及费用
  • macos big sur更新后能改回来吗
  • 玫瑰小镇的玫瑰有什么用
  • 公司装修待摊费怎么算
  • 身份证信息提取python
  • window10如何设置休眠时间
  • linux系统中怎么创建目录
  • 公司入股的钱叫什么
  • 买保险公司的养老保险合适吗
  • 会计差错更正账务处理会计分录
  • 贵的u盘和便宜的有什么区别
  • top命令可以看到哪些信息
  • 其他综合收益与营业外收入的区别
  • thinkphp6项目
  • 中小企业应交税费
  • 侧边导航栏点击后再展开
  • node_sass
  • 增值税发票认证结果通知书在哪里打印
  • mysql innode
  • 科技局创业扶持资金
  • 不动产租赁需要资质吗
  • 处置使用过的固定资产,税率按多少
  • 财务报表中存货为负数是什么意思
  • 进出口贸易出纳主要做什么
  • 捐赠支出税前扣除标准
  • 收到的货品与实物不符
  • 补缴上年度所得税的会计分录
  • 传媒公司的骗局把戏
  • 反结账钱会转回去吗
  • 当月开通的业务当月能取消吗
  • 增值税进项发票抵扣认证流程
  • 饭店现金账怎么记账
  • 金税盘发票全额抵扣如何做账
  • 投标保证金的计算
  • sql ntext数据类型字符替换实现代码
  • vultr vps搭建
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • 还原精灵使用教程
  • 操作系统运行慢怎么解决
  • linux命令nano
  • ubuntu 无法正常启动
  • windows如何关闭
  • win8任务管理器打不开怎么办
  • window8.1重装系统
  • win10 系统账户
  • win8 屏幕键盘
  • 开启win10
  • vc6.0安装教程win8
  • win8.1优化工具
  • 正则表达式语法 \d
  • ubuntu nfs配置
  • jquery解析json数据
  • javascriptj
  • jquery设置鼠标样式
  • python怎么用命令行
  • js中如何弹出提示框
  • javascript入门教程
  • jquery使用教程
  • 别人给公司开的普票,怎么查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设