网页游戏中学到的知识
网页游戏中学到的知识
伪类选择器跟元素
: root
:root
这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root
表示 HTML元素,除了更高之外,与 html
选择器相同。
:root {--main-color: hotpink;--pane-padding: 5px 42px;
}
背景渐变
设置背景颜色渐变
- to right 设置颜色的方向,从左到右
- 其他的参数则是颜色的排布
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
flex弹性布局
display:flex布局
- display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。
- Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
flex的常用属性:
flex-direction 容器内元素的排列方向(默认横向排列) row,column,row-reverse
flex-wrap 容器内元素的换行(默认不换行) nowrap(默认不换行),wrap元素换行
justify-content 元素在主轴(页面)上的排列 center(主轴上居中),flex-start(主轴上由左或者上开始排列)
align-items 元素在主轴(页面)当前行的横轴(纵轴)方向上的对齐方式
常见属性:
- justify-content: center; 居中排列
- justify-content: flex-start; 从行首起始位置开始排列
- justify-content: flex-end; 从行尾位置开始排列
- align-items : center; 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(居中对齐)
display: flex;
justify-content: center;
overflow: hidden
当父元素的高度是靠子元素撑开的时候,子元素浮动时,则在父元素使用overflow: hidden可以清除浮动,使得父元素的高度依旧是靠子元素撑开。
当父元素自身设置了height属性值,则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。
#div1{width: 200px;
/*height: 50px;*/
padding: 10px 20px 20px 10px;
background: red;
margin: 0 auto;
}
#div2{width: 100px;
height: 100px;
background: green;
float: left;
}#div1{width: 200px;/*height: 50px;*/padding: 10px 20px 20px 10px;background: red;margin: 0 auto;<strong>overflow: hidden;</strong>
}#div1{width: 200px;height: 50px;padding: 10px 20px 20px 10px;background: red;margin: 0 auto;overflow: hidden;
}
white-space
white-space: nowrap
<style type="text/css">
p
{white-space: nowrap
}
</style>
</head>
<body><p>
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p></body>
text-overflow
当文本超过一定长度时,用特点的方式显示文本
text-overflow: clip|ellipsis|string
clip | 修剪文本。 |
---|---|
ellipsis | 显示省略符号来代表被修剪的文本。 |
string | 使用给定的字符串来代表被修剪的文本。 |
.click()与on(‘click’,function())
$(选择器).click(fn):
当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而.J_del这个删除按钮是通过append加到页面上的 。所以.click()无效
on方法包含很多事件,点击,双击等等事件。和$().click()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。即动态创建的元素也能触发事件
**. ( d o c u m e n t ) . o n ( ′ c l i c k ′ , ′ 要 选 择 的 元 素 ′ , f u n c t i o n ( ) ) : ∗ ∗ o n 方 法 包 含 很 多 事 件 , 点 击 , 双 击 等 等 事 件 。 和 (document).on('click','要选择的元素',function(){}):** on方法包含很多事件,点击,双击等等事件。和 (document).on(′click′,′要选择的元素′,function()):∗∗on方法包含很多事件,点击,双击等等事件。和().click()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。即动态创建的元素也能触发事件
https://blog.csdn.net/zhouzy539/article/details/83117489
closet()方法
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul id="one" class="level-1"><li class="item-i">I</li><li id="ii" class="item-ii">II<ul class="level-2"><li class="item-a">A</li><li class="item-b">B<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li></ul></li><li class="item-c">C</li></ul></li><li class="item-iii">III</li>
</ul>
<script>
$('li.item-a').closest('ul').css('background-color', 'red');
</script>
</body>
</html>
stop()方法
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){$("#flip").click(function(){$("#panel").slideDown(5000);});$("#stop").click(function(){$("#panel").stop();});
});
</script><style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head><body><button id="stop">停止滑动</button>
<div id="flip">点击这里,向下滑动面板</div>
<div id="panel">Hello world!</div></body>
</html>
网页游戏中学到的知识相关推荐
- 网页游戏设计(HTML5入门)--- 基础知识篇
01 1.网络游戏(Online Game) 指用户通过计算机互联网进行交互娱乐的电子游戏,通常以互联网为传输媒介,以游戏运营商和用户计算机作为处理终端,以专门的游戏客户端软件或浏览器为信息交互窗口. ...
- 《挂机游戏制作工具手册》挂机游戏制作工具基础知识
原文地址:http://orteil.dashnet.org/experiments/idlegamemaker/help 写在前面:对于挂机游戏的概念这里不作赘述和定义,本文翻译所指的是idle g ...
- 在线学位课程_您在四年制计算机科学学位课程中学到的知识
在线学位课程 by Colin Smith 通过科林·史密斯 您在四年制计算机科学学位课程中学到的知识 (What you learn in a 4 year Computer Science deg ...
- 我从创建具有仅仅一年编码经验的视频游戏中学到了什么
by Marlo Asis 通过Marlo Asis 我从创建具有仅仅一年编码经验的视频游戏中学到了什么 (What I learned from creating a video game with ...
- 知识图谱开发实战案例剖析_我从剖析Web开发人员路线图中学到的知识
知识图谱开发实战案例剖析 by Nicole Archambault 妮可·阿坎巴特(Nicole Archambault) 我从剖析Web开发人员路线图中学到的知识 (What I learned ...
- 啊u学科学计算机,动画 | 《阿U学科学》:开学啦!在游戏中学习科学知识吧
原标题:动画 | <阿U学科学>:开学啦!在游戏中学习科学知识吧 一滴水中有多少奇妙的生命? 打哈欠会传染吗? 蜗牛也有左撇子? 动物自带指南针吗? 为什么日出和日落时的太阳是红色的? 当 ...
- 一款基于Webgl实现的3D类网页游戏
摘要:本文主要介绍运用webgl的第三方框架three.js实现的一款简单的3D类网页游戏.主要内容包括介绍three.js,如何运用three.js摆放相机,设置相机角度,相机视觉角度转移,场景中物 ...
- C++编写网页游戏辅助工具~~~~~~~
有人肯定会问,简单游,按键精灵,C#等, 这么轻松就能写辅助,为什么还用C++? 别人写的辅助也都用过不少,简单功能模拟按键确实能做到,但是存在非常多的问题,软件缓存大,开2个号就非常卡.等等. 而且 ...
- 《C#网络编程高级篇之网页游戏辅助程序设计(扫描版)》
<C#网络编程高级篇之网页游戏辅助程序设计>通过编写C#网络编程语言中具有代表性的实例,向读者深入细致地讲解了如何利用C#语言进行网页游戏辅助程序设计.本书通过大量的代码引导读者一步步学习 ...
最新文章
- 巨大的需求之下 人工智能如何更快落地?
- Java虚拟机笔记(一):类加载机制
- keras inception_resnet_v2训练
- Zenoss学习杂记(十)
- sklearn线性回归详解
- 我们是否能信任算法?不信任又能怎么办?
- 高科技护航“史上最严”高考
- 世界粮农组织五大健康食品_粮农组织的完整形式是什么?
- 田沄(1980-),男,博士,中国工程院—清华大学联合博士后科研工作站博士后,北京师范大学副教授....
- 9 FI配置-财务会计-维护会计年度变式
- Linux(debian7)操作基础(十)之字符界面使用指南
- 在 .NET 中设置页面元素的 javascript 事件 - IEBrowser [5]
- vs Obsolete标识符
- 【手把手带你入门深度学习之150行代码的汉字识别系统】学习笔记 ·001 用OpenCV制作数据集
- 30. 最小的K个数(C++版本)
- 郭克华老师java视频教程下载地址
- 2020-11-11抖音去水印解析获取源标题、作者、头像、封面图以及源视频地址
- 计算机大三学生怎么找实习工作?学了计算机很迷茫怎么办?
- jquery固定table第一列或第一行
- 测试管理之--文档管理
热门文章
- gff格式转gggenes的输入格式
- 记忆中的电影《无敌鸳鸯腿》
- 最新的单片机_ST单片机近期连涨,比深圳的房价还快!
- SpringMVC——重定向(不带参数重定向、带参数重定向、FlashAttribute、RedirectAttribute)
- c++gdal如何在大图像中截取小图像并获取其图像信息_OpenCV 图像处理大纲
- 基于ubuntu16.04操作系统安装tensorlfow-gpu版(GPU板卡:nvidia tesla P100)
- 得物客服IM全链路通信过程
- 年轻人的第一部VR一体机是怎样炼成的?全志聚力VR梦想
- 强劲深度图像性能现场体验!奥比中光两款3D标品相机亮相China3DV
- Linux内核工程导论——内核调试