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

  • iqoo8nfc怎么设置(iqoo3nfc怎么设置)

    iqoo8nfc怎么设置(iqoo3nfc怎么设置)

  • airpods3怎么连接iphone(airpods3怎么连接ipad)

    airpods3怎么连接iphone(airpods3怎么连接ipad)

  • 微信零钱通转出要手续费吗(微信零钱通转出到银行卡怎么免手续费)

    微信零钱通转出要手续费吗(微信零钱通转出到银行卡怎么免手续费)

  • mate30 5g和4g区别(mate30 5g与mate30 4g)

    mate30 5g和4g区别(mate30 5g与mate30 4g)

  • 电脑管家怎么把软件彻底删干净(电脑管家怎么把软件添加到信任区)

    电脑管家怎么把软件彻底删干净(电脑管家怎么把软件添加到信任区)

  • ipad2插卡版怎么上网(ipad插卡版如何插卡)

    ipad2插卡版怎么上网(ipad插卡版如何插卡)

  • 笔记本散热铜管寿命(笔记本散热铜管拆了后要涂硅脂吗)

    笔记本散热铜管寿命(笔记本散热铜管拆了后要涂硅脂吗)

  • sd wan到底是什么(sd-wan sdn)

    sd wan到底是什么(sd-wan sdn)

  • qq邮箱再次编辑会覆盖原邮件吗(qq邮箱再次编辑发送后之前的原邮件还会在吗)

    qq邮箱再次编辑会覆盖原邮件吗(qq邮箱再次编辑发送后之前的原邮件还会在吗)

  • 抖音名字怎么改(抖音名字怎么改彩虹符号)

    抖音名字怎么改(抖音名字怎么改彩虹符号)

  • p20超级快充怎么打开(p20超级快充怎么突然没了)

    p20超级快充怎么打开(p20超级快充怎么突然没了)

  • 华为手机怎样拍逆光照(华为手机怎样拍照更清晰)

    华为手机怎样拍逆光照(华为手机怎样拍照更清晰)

  • ios怎么隐藏app(app资源库怎么隐藏)

    ios怎么隐藏app(app资源库怎么隐藏)

  • 快手极速版能发作品吗(快手极速版能发短视频吗)

    快手极速版能发作品吗(快手极速版能发短视频吗)

  • 苹果a1778是哪国版的(苹果a1779是什么机型)

    苹果a1778是哪国版的(苹果a1779是什么机型)

  • 微信缓存清除的是什么(微信缓存清除了怎么恢复)

    微信缓存清除的是什么(微信缓存清除了怎么恢复)

  • 浏览器闪退是什么原因(浏览器闪退是什么原)

    浏览器闪退是什么原因(浏览器闪退是什么原)

  • 苹果11多少毫安电池(苹果x电池多少毫安)

    苹果11多少毫安电池(苹果x电池多少毫安)

  • 通过消息页关注是什么意思(关注账号即可查看内容和喜欢怎么设置)

    通过消息页关注是什么意思(关注账号即可查看内容和喜欢怎么设置)

  • mh182zp是ipad第几代(mh172zp/a是ipad几)

    mh182zp是ipad第几代(mh172zp/a是ipad几)

  • 手机怎么把文字做成文件(手机怎么把文字转换成文档)

    手机怎么把文字做成文件(手机怎么把文字转换成文档)

  • word如何设上标(word文档中怎么设置上标形式)

    word如何设上标(word文档中怎么设置上标形式)

  • qq怎么怎么给qq名片点20个赞(怎么把自己的qq给别人)

    qq怎么怎么给qq名片点20个赞(怎么把自己的qq给别人)

  • 微小宝是做什么用的(微小宝要钱吗)

    微小宝是做什么用的(微小宝要钱吗)

  • 小米8有小爱语音助手吗(小米8小爱语音唤醒怎么设置)

    小米8有小爱语音助手吗(小米8小爱语音唤醒怎么设置)

  • 讲解HTML和CSS(超详细)(html和css介绍)

    讲解HTML和CSS(超详细)(html和css介绍)

  • 坏账准备要写到明细账里面吗
  • 外贸企业出口退税计算公式
  • 股东向公司借款超过一年不还
  • 缴纳企业所得税会计分录怎么做
  • 人力资源公司劳务外包
  • 个体工商户营业执照年检网上申报
  • 应交税费明细表填制
  • 怎么计算股票的压力位和支撑位
  • 银行承兑汇票怎么取钱
  • 进项税抵扣销项税
  • 实收资本收到后用途
  • 补交以前年度的社保账务处理
  • 制作费算什么费用
  • 实收资本的印花税是营业账簿吗
  • 减免所得税额和抵免所得税额的区别
  • 代建项目增值税税率
  • 医院行业类别怎样填写
  • 专票上少打了开户行账号可以认证吗
  • 未分配利润是什么类科目
  • 不抵扣发票如何勾选
  • 园林工程的范围包括哪些?
  • 公司员工驻外补贴政策
  • 发票勾选保存后不提交了能留到下月抵扣吗?
  • 购买商品未入库
  • 金蝶软件怎么批量审核凭证
  • win10通知栏怎么设置
  • win11无法打开开始菜单怎么办
  • php 文件操作
  • 大理石横切面
  • 计提本月应交税金会计分录
  • protect.exe进程
  • vue2:elementUI中Form 表单在特定情况下做动态rules添加删除
  • pca降维的原理
  • 帝国cms移动端
  • 未达起征点怎么填申报表
  • 固定资产多少可以一次摊销
  • 工程施工预缴增值税
  • 印花税计提分录怎么写
  • mongodb如何修改数据
  • 织梦使用手册
  • 销售额包括哪些会计科目
  • 增值税发票税率1%
  • 购进交通运输服务可以抵扣
  • mysql,if
  • 固定资产低于净值出售会计处理
  • 上年多交的增值税怎么调整
  • 交付使用资产是固定资产吗
  • 未开票收入如何申报
  • 出现销项负数
  • 包工包料工程预付款的支付比例
  • 股东投资款是否要缴税
  • 根据《物业管理条例》的规定,物业服务企业
  • 异地缴纳增值税和附加税的区别
  • 电子回单费用如何查询
  • mysql事务命令
  • linux系统转换为win系统脚本
  • Linux系统忘记root密码
  • centos 安装chia
  • 神之浩劫能玩吗
  • win+tab键
  • 高效快捷键
  • win8.1专业版是哪个
  • windows8用户名怎么改
  • linux who am i
  • win7自动更新失败怎么删除更新启动
  • windows识别码
  • 游戏编程设计模拟软件
  • javascript提交数据
  • 第四章之BootStrap表单与图片
  • linux shell脚本攻略(第3版)
  • css 定位
  • sequelize-cli
  • cmd批处理命令文件个数
  • android toast位置
  • nodejs 动态网页
  • 云南省国家税务局
  • 珠宝消费税怎么征收
  • 光伏发电要交税不
  • 1.6排量算大吗
  • 北医三院预约号最晚几点取
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设