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

  • 腾讯会议会议记录在哪里(腾讯会议会议记录保存多久)

    腾讯会议会议记录在哪里(腾讯会议会议记录保存多久)

  • 粤省事黄码变绿码怎么申诉(粤康码黄码变绿)

    粤省事黄码变绿码怎么申诉(粤康码黄码变绿)

  • qq实名认证多久可以修改一次(qq实名认证多久一次)

    qq实名认证多久可以修改一次(qq实名认证多久一次)

  • p50pro第二张卡怎么放(华为p50pro第二个卡槽)

    p50pro第二张卡怎么放(华为p50pro第二个卡槽)

  • 微信8.0我的状态在哪里打开(微信新功能8.0我的状态)

    微信8.0我的状态在哪里打开(微信新功能8.0我的状态)

  • 为什么qq关联看不到别人给对方发的信息(为什么qq关联看不到对方)

    为什么qq关联看不到别人给对方发的信息(为什么qq关联看不到对方)

  • 小米4手环充电卡不住(小米4手环充电器和小米3手环充电器一样吗)

    小米4手环充电卡不住(小米4手环充电器和小米3手环充电器一样吗)

  • 二手显示器去哪买(二手显示器去哪里卖)

    二手显示器去哪买(二手显示器去哪里卖)

  • 滴滴车主头像上传技巧(滴滴车主头像上传后是否被乘客看到)

    滴滴车主头像上传技巧(滴滴车主头像上传后是否被乘客看到)

  • 候补以后还能抢票吗(候补购票后还能抢当天其他车的票吗)

    候补以后还能抢票吗(候补购票后还能抢当天其他车的票吗)

  • 腾讯视频弹幕怎么开不了(腾讯视频弹幕怎么删除自己发的)

    腾讯视频弹幕怎么开不了(腾讯视频弹幕怎么删除自己发的)

  • vivo x50发布会时间(vivo x50发布会价格)

    vivo x50发布会时间(vivo x50发布会价格)

  • view是什么功能(view是什么语言)

    view是什么功能(view是什么语言)

  • 抖音为什么下载不了呢(抖音为什么下载不了视频)

    抖音为什么下载不了呢(抖音为什么下载不了视频)

  • 聊天记录删了能迁移吗(聊天记录删了能不能找回来)

    聊天记录删了能迁移吗(聊天记录删了能不能找回来)

  • 苹果手机下载不了东西怎么办(苹果手机下载不下来软件怎么回事)

    苹果手机下载不了东西怎么办(苹果手机下载不下来软件怎么回事)

  • 手机照片怎么加字幕(手机照片怎么加字)

    手机照片怎么加字幕(手机照片怎么加字)

  • 微信怎么发30秒视频(微信怎么发30秒以上视频)

    微信怎么发30秒视频(微信怎么发30秒以上视频)

  • 苹果x插上耳机没声音(苹果X插上耳机没声音)

    苹果x插上耳机没声音(苹果X插上耳机没声音)

  • 红米k20prodc调光在哪(红米k20闪光灯色温调节)

    红米k20prodc调光在哪(红米k20闪光灯色温调节)

  • 电视机怎么看爱奇艺(电视机怎么看爱奇艺会员)

    电视机怎么看爱奇艺(电视机怎么看爱奇艺会员)

  • 苹果x信号1x是什么意思(苹果x信号显示1x是什么意思)

    苹果x信号1x是什么意思(苹果x信号显示1x是什么意思)

  • 定时开关怎么调整时间(定时开关怎么调自动开和关的时间)

    定时开关怎么调整时间(定时开关怎么调自动开和关的时间)

  • ios13什么时候推送到手机上(ios13什么时候出)

    ios13什么时候推送到手机上(ios13什么时候出)

  • bfe是什么(bfe是什么护肤品)

    bfe是什么(bfe是什么护肤品)

  • 联发科p90手机有那些(联发科p90t)

    联发科p90手机有那些(联发科p90t)

  • 苹果手机的手机管家在哪(苹果手机的手机克隆在哪里)

    苹果手机的手机管家在哪(苹果手机的手机克隆在哪里)

  • 安全模式下一键还原(安全模式 按键)

    安全模式下一键还原(安全模式 按键)

  • windows10开始菜单失灵及异常的解决方法(Windows10开始菜单透明)

    windows10开始菜单失灵及异常的解决方法(Windows10开始菜单透明)

  • 递延所得税计算题
  • 计提企业所得税会计分录怎么做
  • 退税会计科目怎么做账
  • 发票上是17%的税率吗
  • 代缴五险一金自己还需要缴纳吗
  • 公司对外投资是股东会还是董事会
  • 银行承兑汇票企业账户没钱
  • 支付行业招商方案
  • 劳务成本月底有余额吗
  • 购车发票怎么做分录
  • 小企业出售无形资产发生的净损失应当计入什么科目
  • 跨年度冲减收入
  • 促销费影响主营利润吗
  • 预收款项的减少
  • 新准则交易性金融资产
  • 2022年苹果iphone14视频配音乐
  • typora修改背景颜色
  • php://input用法
  • 营改增之前的房子现在出售怎么开票
  • 资产盘盈盘亏处理
  • 应付债券利息费用
  • 进项税和销项税谁交
  • yii2框架从入门到精通
  • php代码规范七大原则
  • vue+java+mysql
  • 发票密码什么意思
  • 股东以原材料出资
  • iconfont原理
  • 比肩美国
  • js倒计时函数
  • uname命令详解
  • 废品损失科目的账户结构
  • Python列表元素的删除
  • 平价转让股权怎么交企业所得税
  • 股东出资方式包括
  • 新建厂房如何计提折旧费用
  • (WebFlux)004、WebFilter踩坑记录
  • Mongodb中MapReduce实现数据聚合方法详解
  • mongodb导出数据库数据文件
  • phpcms建站流程
  • 销售熟食卤制品怎么做
  • 工资薪金税务缴纳
  • 公司与公司的往来款计入什么科目
  • 账簿包括哪些基本内容
  • 现金短缺与溢余的区别
  • 捐赠支出税前扣除标准
  • 加计扣除是什么时候申报
  • 过账发票和不过票的区别
  • 金蝶现金银行存款账怎么记账
  • 固定资产的建造成本怎么计算
  • 什么计提折旧什么不计提折旧
  • sql语句的查询语句
  • 微软mission
  • WZCBDLS.EXE - WZCBDLS是什么进程
  • 笔记本win7win10双系统怎么装
  • mac如何快速复制文件
  • win7系统开机进不去
  • win7 分区表
  • scanexplicit.exe - scanexplicit是什么进程 作用是什么
  • windowsxp的主要特点是什么
  • Linux怎么在家目录创建目录
  • vi 技巧
  • 红石id
  • win10输入法怎么添加美式键盘
  • win10预览设置
  • windows10 rs4
  • 文科生也能看懂的电子电路学PDf
  • js自动执行点击事件
  • android自定义搜索框
  • linux 定时执行命令
  • 层序遍历递归实现
  • dom教程
  • unity3d怎么写代码
  • Node.js中的全局变量有哪些
  • nodejs获取get请求参数
  • jquery删除table行
  • jquery切换css样式
  • document对象的常用方法
  • 廉政谈话什么是廉政?
  • 攸县丧葬
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设