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

  • 非居民纳税机构都包含哪些?
  • 不确认销售收入结转销售成本
  • 进口环节缴纳关税计入
  • 百旺购货方红字信息表怎么开具
  • 韩国购物小票怎么看图解
  • 土地以租代卖,违法吗
  • 多扣了离职人员的钱
  • 税后利润补亏的会计分录怎么做
  • 银行贷款损失的认定标准
  • 收到第三方利息会计分录
  • 劳保费用可以开专票吗
  • 净残值可以随意更改吗
  • 没有收到发票的支出可以做成本吗
  • 企业个人所得税逾期未申报怎么办
  • 停车场增加收入
  • 会展企业的作用有哪些
  • 股权转让怎么缴纳个人所得税
  • 公司内部领用库存商品
  • 现代服务业个数有多少
  • 事业单位会计凭证收入怎么记账
  • 对外投资收益要交税吗
  • 公司从一个帐户里扣税吗
  • 视同销售怎么做账务处理
  • 公司注销账上有固定资产转给股东还要交税吗
  • wamp搭建网站教程
  • php实验二
  • uniapp监听网络状态
  • PHP:imagefontwidth()的用法_GD库图像处理函数
  • 没有进项开销项需要交几个点
  • 销项税的分录怎么做
  • php实现查询功能
  • 应交税金及附加包括哪些
  • 捐赠支出如何做凭证
  • html用语
  • kppw源码
  • 个人出租房可开发票吗
  • 二手固定资产怎么折旧
  • 软件增值税即征即退文件
  • 企业办理土地证需要哪些资料和手续
  • python框架的作用
  • 计提工资的时候跟发放的时候不一样怎么办
  • 奖金属于职工福利吗
  • 租赁收入的成本包括哪些
  • 存货计提减值准备对所得税的影响
  • sqlserver2005简介
  • 车船税是什么样子的?
  • 其他权益工具影响所得税吗
  • 资产减值损失借贷方向
  • 其他应付款在借方资产负债表怎么填
  • 长期待摊费用摊销是当月还是下月
  • 2018年所得税税收优惠
  • 企业发生坏账损失时,在当期确认坏账损失
  • 购买的材料入库属于什么会计科目
  • 购买本公司产品未付款需要签名字吗
  • 记账凭证原始凭证回单的粘贴顺序
  • mysql orch
  • linux实现mysql数据库每天自动备份定时备份
  • Centos MySQL 5.7安装、升级教程
  • win打开本地策略
  • 使用微软
  • xp从装系统
  • linux fflush
  • win10剪贴板怎么调出来
  • linux新增lv
  • win7操作技巧
  • win10怎么启用网卡
  • 利用漏洞每天获利万元
  • js网页自动化
  • node js入门
  • android应用开发基础
  • vbs以管理员权限运行
  • unity游戏开发的技术
  • android权限管理
  • Android 仿 iphone 自定义滚动选择器
  • JavaScript的History API使搜索引擎抓取AJAX内容
  • 纳税服务主要职责
  • 慧算账财务公司简介
  • 个人所得税申请专项扣除有什么用
  • 现在哪个保险公司车险好
  • 在深圳月薪8000是什么水平
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设