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

  • 小布助手怎么唤醒(小布助手怎么唤醒小爱)

    小布助手怎么唤醒(小布助手怎么唤醒小爱)

  • 怎么把电脑表格的间距设置一样(怎么把电脑表格的数字加起来)

    怎么把电脑表格的间距设置一样(怎么把电脑表格的数字加起来)

  • 小红书删别人评论会提醒吗(小红书删别人评论会有什么影响)

    小红书删别人评论会提醒吗(小红书删别人评论会有什么影响)

  • 微信运动怎样全部点赞(微信运动怎样全部关闭)

    微信运动怎样全部点赞(微信运动怎样全部关闭)

  • 微信怎么取消健康码(微信怎么取消健康系统)

    微信怎么取消健康码(微信怎么取消健康系统)

  • 网易云扫一扫iphone在哪里扫呢(网易云扫一扫在哪)

    网易云扫一扫iphone在哪里扫呢(网易云扫一扫在哪)

  • p40pro是双卡吗(p40 pro是双卡双待吗)

    p40pro是双卡吗(p40 pro是双卡双待吗)

  • 快手店铺可以关闭重开吗(快手店铺关闭,去哪里要求快手平台退款)

    快手店铺可以关闭重开吗(快手店铺关闭,去哪里要求快手平台退款)

  • 电脑电池充电处叉(电脑充电的地方坏了怎么办)

    电脑电池充电处叉(电脑充电的地方坏了怎么办)

  • 微信怎么建群(微信怎么建群操作步骤方法)

    微信怎么建群(微信怎么建群操作步骤方法)

  • 快充为什么电量不耐用(快充为什么电量低)

    快充为什么电量不耐用(快充为什么电量低)

  • 3500和4000的电池差别(3500和4000毫安电池续航时间)

    3500和4000的电池差别(3500和4000毫安电池续航时间)

  • ipad7运行内存多大(ipad2017 运行内存)

    ipad7运行内存多大(ipad2017 运行内存)

  • cad主要用于(cad常用于哪些领域)

    cad主要用于(cad常用于哪些领域)

  • ios11怎么换手机铃声(苹果11怎么换手机号)

    ios11怎么换手机铃声(苹果11怎么换手机号)

  • 如何关闭小爱同学搜索框(如何关闭小爱同学功能)

    如何关闭小爱同学搜索框(如何关闭小爱同学功能)

  • 天猫预售提醒怎么取消(天猫预售提醒消息在哪里看)

    天猫预售提醒怎么取消(天猫预售提醒消息在哪里看)

  • 苹果备份怎么恢复(苹果备份怎么恢复到安卓手机)

    苹果备份怎么恢复(苹果备份怎么恢复到安卓手机)

  • 怎么设置微信置顶文字(怎么设置微信置顶好友)

    怎么设置微信置顶文字(怎么设置微信置顶好友)

  • shark是什么意思(shark是什么意思中文)

    shark是什么意思(shark是什么意思中文)

  • 拼多多怎样关闭极速发货(拼多多怎样关闭拼小圈让别人看不到你买的东西)

    拼多多怎样关闭极速发货(拼多多怎样关闭拼小圈让别人看不到你买的东西)

  • wifi原始密码是多少(wfi原始密码是多少)

    wifi原始密码是多少(wfi原始密码是多少)

  • 腾讯视频插件加载失败(腾讯视频播放器插件下载)

    腾讯视频插件加载失败(腾讯视频播放器插件下载)

  • 苹果xr可以换主题吗(苹果xr可以换主副卡吗)

    苹果xr可以换主题吗(苹果xr可以换主副卡吗)

  • 华为nova5与nova5pro的区别(华为nova5与nova5pro)

    华为nova5与nova5pro的区别(华为nova5与nova5pro)

  • 三星s10怎么打开开发者选项(三星s10怎么打开虚拟位置)

    三星s10怎么打开开发者选项(三星s10怎么打开虚拟位置)

  • 《花雕学AI》06:抢先体验ChatGPT的九个国内镜像站之试用与综合评测(花雕典故)

    《花雕学AI》06:抢先体验ChatGPT的九个国内镜像站之试用与综合评测(花雕典故)

  • 个人独资企业需要报税吗
  • 医疗机构销售药品需要销售记录吗
  • 租厂房需要交租赁税吗
  • 法人其他应付款在借方表示
  • 个税手续费返还计入哪个科目
  • 环保设备折旧年限和残值率
  • 经营租入的固定资产是资产吗
  • 收到科技局的补贴短信
  • 车险代缴费
  • 进项税额转出转多了
  • 营改增后向境外提供有偿服务是否需要缴纳增值税?
  • 报关单增值税税单收货人更改
  • 公司为员工购买五险一金是什么意思
  • 2018增值税暂行条例
  • 税负率的计算公式excel
  • 三证合一后怎么看税号
  • 作为一名新手
  • 预缴所得税需要结转吗
  • 外购无形资产的成本包括进口关税吗
  • 营改增的销售额规定
  • 附加税包括哪些税种2021年
  • 管理费用劳务费包括什么
  • 机关党建经费提取比例
  • 财务费用余额在借方是正数还是负数
  • mac如何修改图片像素大小
  • 收到工会经费怎样做账
  • 如何更改windows用户名
  • 所得税如何做帐
  • 废旧物资处理计入什么科目
  • macOS Big Sur 11.2 公测版 beta 1怎么更新?
  • php提示框
  • php 二维数组
  • 涅迪克角灯塔上的节日彩灯,缅因州 (© Walter Bibikow/Alamy)
  • 闭包 python
  • php多进程处理大数据
  • 羊羊 过好
  • 营业税借方表示什么
  • 采购的原材料无保质期
  • 如何修改php.ini
  • 怎么调整以前年度
  • 建筑业为什么要报统计局
  • 购入固定资产的预算会计账务处理
  • 债务人以固定资产债务重组
  • 公司没有车加油票怎么做账
  • 金税盘减免税款月末如何结转
  • sqlserver2005使用教程
  • 合作社分红计入什么科目
  • 固定资产的认定标准2022
  • 内含报酬率概念
  • 汽车4s店收到保险佣金做账
  • 工程报废及毁损处理办法
  • 研发费用允许加计扣除的标准
  • 收到政府补助的会计分录
  • 劳务派遣公司账务
  • 已入库的原材料会计分录
  • 给员工买的手机能抵扣税吗
  • 营业执照类型有限责任公司(自然人独资)是什么行业类别
  • 主营业务成本如何做分录
  • 新担保法2021和担保期限
  • 给客户购物卡如何充钱
  • 备品和备件的定义
  • 公司增资怎么办理手续
  • 工业企业增值税负率一般控制在多少
  • xp系统可以双屏吗
  • ubuntu 安装zsh
  • mac如何取消自动开机
  • 未能打开这台计算机上的组策略对象
  • win10升级100完成不动
  • naimag32.exe - naimag32是什么进程 有什么用
  • sql2000停止拒绝访问
  • Android自定义控件,切换APP再切回来控件消失了
  • java框架怎么用
  • centos ohmyzsh
  • js最简单的代码
  • javascript对象定义
  • 北京税务局网上怎么登录
  • 纳税申报表如何看销售额
  • 全年一次性奖金怎么申报个税
  • 内蒙古自治区耕地保养条例
  • 小规模纳税人需要建账吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设