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

  • 不用的淘宝号怎么解绑支付宝(不用的淘宝号怎么解绑手机号)

    不用的淘宝号怎么解绑支付宝(不用的淘宝号怎么解绑手机号)

  • 微信界面变黑色了如何恢复(微信界面变黑色怎么调成白色)

    微信界面变黑色了如何恢复(微信界面变黑色怎么调成白色)

  • 拼多多夜间模式在哪(拼多多夜间模式小米)

    拼多多夜间模式在哪(拼多多夜间模式小米)

  • 苹果11可以应用分身吗(苹果11可以应用双开吗)

    苹果11可以应用分身吗(苹果11可以应用双开吗)

  • 手机调成飞行模式别人打电话会有提示吗(手机调成飞行模式打电话会怎么提示)

    手机调成飞行模式别人打电话会有提示吗(手机调成飞行模式打电话会怎么提示)

  • vivox27黑屏也重启不了(vivox27手机突然黑屏但是是开机状态)

    vivox27黑屏也重启不了(vivox27手机突然黑屏但是是开机状态)

  • lumion复制快捷键(lumion的复制是什么键)

    lumion复制快捷键(lumion的复制是什么键)

  • 拼多多新店铺可以开直播吗(拼多多新店铺可以开直通车吗)

    拼多多新店铺可以开直播吗(拼多多新店铺可以开直通车吗)

  • ipad无法登录苹果账号(ipad上无法登陆apple id)

    ipad无法登录苹果账号(ipad上无法登陆apple id)

  • 手机上的二维扫描在哪(扫描手机上这个二维码)

    手机上的二维扫描在哪(扫描手机上这个二维码)

  • 微信id地址是什么意思(微信id指的是)

    微信id地址是什么意思(微信id指的是)

  • ipad a1432是啥型号(ipad a1432是什么型号)

    ipad a1432是啥型号(ipad a1432是什么型号)

  • 小爱同学必须用wifi吗(小爱同学必须用小米电器吗)

    小爱同学必须用wifi吗(小爱同学必须用小米电器吗)

  • 显示器ss线有什么用(显示器ss线是干嘛的)

    显示器ss线有什么用(显示器ss线是干嘛的)

  • oppo快应用可以卸载吗(oppo快应用可以强行停止吗)

    oppo快应用可以卸载吗(oppo快应用可以强行停止吗)

  • 微信被拉黑后朋友圈显示什么(微信被拉黑后朋友圈图片黑了)

    微信被拉黑后朋友圈显示什么(微信被拉黑后朋友圈图片黑了)

  • 台式电脑卡换什么硬件(台式电脑卡换什么配件就行了)

    台式电脑卡换什么硬件(台式电脑卡换什么配件就行了)

  • 打电话无法连接到移动网络是什么原因(打电话无法连接到服务器是什么意思)

    打电话无法连接到移动网络是什么原因(打电话无法连接到服务器是什么意思)

  • qq怎么发十分钟以上的视频(qq怎么发十分钟的视频)

    qq怎么发十分钟以上的视频(qq怎么发十分钟的视频)

  • 华为mate30有红外功能吗(华为mate30有红外线遥控吗)

    华为mate30有红外功能吗(华为mate30有红外线遥控吗)

  • 解绑亲情号对方知道吗(解绑亲情号对方会收到通知吗)

    解绑亲情号对方知道吗(解绑亲情号对方会收到通知吗)

  • 联通hd什么意思(联通有个hd)

    联通hd什么意思(联通有个hd)

  • redmik20有dc调光吗(redmik20pro有dc调光吗)

    redmik20有dc调光吗(redmik20pro有dc调光吗)

  • surface pro6适合编程吗(surface pro 6)

    surface pro6适合编程吗(surface pro 6)

  • windowsxp怎么升级7

    windowsxp怎么升级7

  • 抖音怎么按地区找人(抖音怎么按地区查找用户)

    抖音怎么按地区找人(抖音怎么按地区查找用户)

  • vivo如何退出安全模式(vivo手机怎么退出安全系统)

    vivo如何退出安全模式(vivo手机怎么退出安全系统)

  • 小规模纳税人如何做账
  • 上下班出了事故算不算工伤
  • 什么是电子银行渠道限额
  • 租赁房屋怎么写合同
  • 银行转账记录能保存多久
  • 建筑行业分包款要分项目扣除吗
  • 个月所得税税率
  • 应付中转是什么科目
  • 更换电脑后个税信息如何导入
  • 同一控制下企业合并报表编制
  • 哪些税种计税价格是含增值税
  • 装修保证金怎么记账
  • 核定和查账区别
  • 工资表的其他扣除
  • 公司将我转到另外一家公司
  • 一般纳税人每个月需要报哪些税
  • 增值税专用发票可以开电子发票吗
  • 易票365是哪家公司的
  • 去年的暂估成本今年如何冲掉
  • 商品出口消费税计算方法
  • 企业外购材料的入账价值包括
  • 视同销售的计税依据
  • 出口企业取得失业保险
  • 应收账款无法收回确认为坏账分录
  • 会计制度备案成本核算方法一般选择哪个
  • 销售净利率如何分析出来
  • windows11我的电脑怎么放到桌面
  • msiexec.exe是什么进程介绍
  • 股权出售是利空还是利好
  • win10无法以管理员身份运行的原因及解决方法
  • 交易性金融资产属于什么科目
  • 工程投标保证金一般是多少
  • 前端如何用canvas绘制座位图
  • win7旗舰版系统激活工具
  • 常用的php操作mysql的函数有哪些
  • 凯恩kane
  • php-mysql安装
  • 私企股权转让程序
  • 项目差旅费能计入项目费用吗
  • 会计月报表怎么做表格
  • 电维护费多少合法
  • 损益类科目借贷方向是什么
  • php的二维数组
  • vue3的
  • 买配件组装成产品算生产吗
  • 代垫运杂费计入原材料成本吗
  • 工资计提未发放,调增还是调减
  • 工会经费残保金怎么申报
  • 织梦自定义模型调用
  • 生产辅助
  • mysql切片
  • /kill @p
  • mysql分页怎么实现
  • 劳务分包劳务费付款比例
  • 个体户是否要做账务处理
  • 去年的福利费没有用完,今年可以用吗
  • 职工教育经费如何列支
  • 固定资产净额是什么意思
  • ubuntu包管理命令
  • win8开机进不了桌面
  • linux修改时间和日期的方法
  • WIN7系统屏幕亮度哪里设置
  • js获取中文拼音
  • nodejss
  • node.js报错
  • nodejs 内存不断增长
  • Node.js中的全局对象有
  • hbuilderx打包app教程
  • python例题讲解
  • 超级给力的好人有哪些
  • Linux 中的cat命令
  • javascript判断题
  • python连接Oracle数据库
  • boost源码编译
  • 北京市工商局电话24小时客服热线
  • 小额贷款公司在职人员和离职人员情节哪种轻
  • 专用缴款书会计分录
  • 宝马535车船税
  • 盐城买家电到哪里买
  • 长沙房产税如何征收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设