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

  • 红米note11怎么设置时间(红米note11怎么设置来电铃声)

    红米note11怎么设置时间(红米note11怎么设置来电铃声)

  • 华为mate20x支持5g网络吗

    华为mate20x支持5g网络吗

  • 小黑记事本卸载了为什么广告还跳出来(小黑记事本卸载不干净)

    小黑记事本卸载了为什么广告还跳出来(小黑记事本卸载不干净)

  • ppt保存后不见了(ppt保存后不见了怎么办)

    ppt保存后不见了(ppt保存后不见了怎么办)

  • 抖音动漫变身怎么拍(抖音里的变身漫画怎么拍摄的)

    抖音动漫变身怎么拍(抖音里的变身漫画怎么拍摄的)

  • 微信怎么不收到对方信息(微信怎么不收到@全体成员)

    微信怎么不收到对方信息(微信怎么不收到@全体成员)

  • 拼多多助力链接打不开(拼多多助力链接怎么弄)

    拼多多助力链接打不开(拼多多助力链接怎么弄)

  • 苹果手机怎么查电池容量(苹果手机怎么查询是不是正品)

    苹果手机怎么查电池容量(苹果手机怎么查询是不是正品)

  • pr字幕为什么没有显示出来呢(pr字幕为什么不在窗口里)

    pr字幕为什么没有显示出来呢(pr字幕为什么不在窗口里)

  • 华为平板matepad pro可以用windows系统吗(华为平板matepadpro12.6英寸)

    华为平板matepad pro可以用windows系统吗(华为平板matepadpro12.6英寸)

  • 网络跳ping怎么办(wifi跳ping)

    网络跳ping怎么办(wifi跳ping)

  • 新电脑开机需要做什么(新电脑开机需要检查什么)

    新电脑开机需要做什么(新电脑开机需要检查什么)

  • 三星note9和note10的差距(三星note9和note10+参数对比)

    三星note9和note10的差距(三星note9和note10+参数对比)

  • iphonex手机卡怎么装(iphonex手机卡怎么买)

    iphonex手机卡怎么装(iphonex手机卡怎么买)

  • ipad频繁闪退怎么修复(ipad总是闪退是什么情况)

    ipad频繁闪退怎么修复(ipad总是闪退是什么情况)

  • qq群举报会不会显示自己(qq群举报成功会怎么样)

    qq群举报会不会显示自己(qq群举报成功会怎么样)

  • 快手蓝v认证有什么用(快手蓝v认证有多可怕)

    快手蓝v认证有什么用(快手蓝v认证有多可怕)

  • 手机号165开头是什么(手机号165开头是哪里的号码)

    手机号165开头是什么(手机号165开头是哪里的号码)

  • 如何分享微信聊天记录(如何分享微信聊天记录给别人)

    如何分享微信聊天记录(如何分享微信聊天记录给别人)

  • 苹果x怎么设置双击亮屏(苹果x怎么设置应用锁)

    苹果x怎么设置双击亮屏(苹果x怎么设置应用锁)

  • 根号下可以为0吗(根号下可以为0式子是否有意义)

    根号下可以为0吗(根号下可以为0式子是否有意义)

  • 小爱同学怎么连续指令(小爱同学怎么连续对话?)

    小爱同学怎么连续指令(小爱同学怎么连续对话?)

  • 华为mate30四个摄像头分别是什么

    华为mate30四个摄像头分别是什么

  • 小米手环4充电要多久(小米手环4充电线)

    小米手环4充电要多久(小米手环4充电线)

  • 如何修改程序的默认安装路径(如何修改程序的安装路径)

    如何修改程序的默认安装路径(如何修改程序的安装路径)

  • 2018年哪些固态硬盘值得选购?120g-240g固态硬盘推(2019年固态硬盘价格)

    2018年哪些固态硬盘值得选购?120g-240g固态硬盘推(2019年固态硬盘价格)

  • 非金银首饰以旧换新增值税
  • 中级会计实务主观题
  • 商贸公司成本大吗
  • 个体工商户需要报税吗
  • 发票与入库单明细不一致税务可以吗
  • 母子公司无偿划转股权印花税
  • 存货期末结存量的公式
  • 个税专项附加扣除是每个月扣还是按年计算
  • 一般纳税人增值税申报操作流程
  • 资本公积在现金流量表哪里体现
  • 税务部门罚没收入200元
  • 现金支付业务
  • 理财产品分红怎么入账
  • 借入款项的来源包括哪三个
  • 个人发票增值税
  • 金税盘提示离线开票时间超限深圳
  • 房屋装修费用计算器
  • 上海奉贤区控规图
  • 会务费税目
  • 收到未知款项如何做账
  • 原材料意外损失会计分录
  • 遗属补助是死亡当月发放还是次月发放
  • macos 关闭屏幕
  • 广告费和业务宣传费税前扣除基数
  • 滴滴发票开公司名称可以抵扣进项吗
  • 在win7中怎么安转只兼容win10的软件
  • 再给我推荐几款
  • 公司已经控股一年怎么办
  • 实际缴纳消费税是什么意思
  • phppregmatch
  • 行政事业单位的主要经济业务活动有哪些
  • thinkphp3.x连接mysql数据库的方法(具体操作步骤)
  • php输出对象
  • opencv1.0
  • 前端分页显示
  • etc充值卡发票可以入账吗
  • 长期应付款的会计编号
  • 购入固定资产的会计处理
  • 应付票据的贴现账务处理
  • 库存现金科目的辅助核算项目为日记账
  • 上年科目记错如何更正
  • 劳务费发票如何入账
  • rust 前端开发
  • 向银行申请银行汇票
  • 以美元报关是否要交税
  • 办理进出口权的费用西安
  • 房地产开发产品科目设置
  • 车辆保险发票一般在哪开
  • 劳务费如何计提
  • 其他业务收入的附加税的会计分录
  • 小规模纳税人月销售额超过10万怎么交税
  • 进项税和销项税怎么理解
  • 固定资产中如何计算折旧
  • 航天金税电子发票怎么读入
  • 场地租用招标方案怎么写
  • 在企业中的应用
  • 商业企业长期负债怎么办
  • mysql索引类型及原理
  • centos 7安装教程
  • mysql 错误1067
  • win10右键自动弹出
  • winxp系统安装教程
  • centos6.6网络配置
  • win7大小写提示图标
  • 红石2代
  • linux误删文件怎么办
  • windows疑难解答在哪里
  • xp怎么删除电脑系统
  • 彻底删除怎样恢复
  • android物理按键对应的key
  • html手机号验证
  • IE、FF、Chrome浏览器中的JS差异介绍
  • shell 比较大小
  • Re: Latest Version: 3.7.9 (January 18th, 2015)
  • android存储方式
  • 安卓权限管理app
  • 税务总局电子申报软件39
  • ca钥匙登陆不了电子税务局
  • 国有土地使用权出让和转让条例
  • 地税服务大厅上班时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设