您现在的位置是:首页 > 正文

吃豆人html代码原理,如何用HTML做一个吃豆人?

2024-04-01 01:46:06阅读 2

首先做一个项目的先想如何去实现它。比如做一个吃豆人,如图:

6ea85bdec8ad

167b84dcbf0d3ed647b6b8c4abd75f92.jpg

首先,需要分析这个吃豆人的组成部分。

上半部分嘴,下半部分嘴,豆基本就三个部分组成。

其次,怎么才能让它吃豆呢?

需要嘴上下动,需要豆向着嘴的方向移动。

第一步,制作上部分嘴。代码如下:

#shang{/*给这个id加属性和参数*/

width: 0px;/*给一个宽度,*/

height: 0px;/*给一个高度,*/

/*border-bottom:边界底部 solid:立方体 */

border-bottom: 50px solid yellow;/*上面的图形底部包裹一个50像素黄色的立方体*/

border-top: 50px solid yellow;/*上面的图形上部包裹一个50像素黄色的立方体*/

border-left: 50px solid yellow;/*上面的图形左部包裹一个50像素黄色的立方体*/

/*transparent:透明的*/

border-right: 50px solid transparent;/*上面的图形右部包裹一个50像素头透明的立方体*/

/*radius:半径*/

border-radius: 50px;/*把现在正方体变成50像素的圆角,就是把正方形变成圆形。*/

}

结果如图:

网站文章

  • linux命令行设置颜色

    linux命令行设置颜色

    最近一直用linux,看着命令行一成不变的颜色,真的无语!话不多说,直接上教程。 1、编辑.bashrc文件. vim .bashrc 2、在.bashrc文件最后一行加入以下设置。(vim编辑器输入...

    2024-04-01 01:45:51
  • element--Cascader 点击文字选中+选中隐藏+多选

    //element Cascader 点击文字选中+选中隐藏+多选.el-cascader-panel .el-radio {width: 100%;height: 100%;z-index: 10;...

    2024-04-01 01:45:44
  • Vue-富文本编辑器组件封装之TinyMCE

    Vue-富文本编辑器组件封装之TinyMCE

    文章目录背景相关依赖接入说明中文文档组件汉化导入插件创建组件实例组件应用示例效果预览编辑器窗口上传图片效果内容小窗口预览遇到的问题及解决方案在dialog(弹窗)层级、遮挡问题预览效果宽度调整问题图片...

    2024-04-01 01:45:18
  • ffmpeg混音以及音视频混合处理

    ffmpeg混音以及音视频混合处理 ffmpeg的命令 这里是我最近研究的音视频混合处理的一些ffmpeg的命令 // 音频拼接 ffmpeg -i "concat:first.mp3|se...

    2024-04-01 01:45:10
  • MySQL基础笔记(七)DML

    MySQL基础笔记(七)DML

    DML主要是对数据进行增(insert)删(delete)改(update)操作。注意:如果update语句没有加where条件,则会将表中所有数据全部修改!将张三的生日改为 1999-12-12 分数改为99.99。

    2024-04-01 01:45:03
  • 联想小新I1000 win10电脑系统安装教程

    联想小新I1000 win10电脑系统安装教程

    最近因为之前电脑太卡了,想要给自己的联想小新重装系统,发现网上说采用以下方式安装的win10系统会更干净一些,过程做以下记录。

    2024-04-01 01:44:39
  • 软件测试 | FTP 性能测试脚本开发(2) 最新发布

    而许多内网的客户端不能用 PORT 模式登录 FTP 服务器,因为从服务器的 TCP20 端口无法和内部网络的客户端建立一个新的连接,从而造成了无法工作。在二进制传输中,保存文件的位序,以便原始和备份...

    2024-04-01 01:44:32
  • Vulnhub靶机渗透测试实战(一):DC-1(入门) 热门推荐

    Vulnhub靶机渗透测试实战(一):DC-1(入门) 热门推荐

    关于Vulnhub Vulnhub是一个特别好的渗透测试实战网站,提供了许多带有漏洞的渗透测试虚拟机下载。 新手入门DC-1: 下载地址: https://www.vulnhub.com/entry/...

    2024-04-01 01:44:26
  • 滑动窗口(字符串)-算法入门

    滑动窗口(字符串)-算法入门 滑动窗口概述 滑动窗口,大致就是维护一个区间去遍历一段数据,类似于双指针算法,那么用区间去遍历有什么好处吗?用一个区间去遍历的话,区间内会有原来的计算结果,避免重复计算,...

    2024-04-01 01:44:20
  • x86主机搭建家庭智能路由系统 ---- Proxmox虚拟化实现一机多用

    x86主机搭建家庭智能路由系统 ---- Proxmox虚拟化实现一机多用

    Proxmox VE简介 Proxmox VE(Proxmox Virtual Environment) 是一款完全开源虚拟化管理平台,可以管理QEMU/KVM虚拟机和LXC容器。事实上它只是一个前端管理界面,虚拟化技术由KVM和LXC提供。 安装Proxmox VE 首先到官网下载Promox VE的镜像文件。 下载地址:https://www.proxmox.com/en/downlo

    2024-04-01 01:43:57