HTML&&CSS
与HTML和CSS相关的一些文章
張猴子
这个作者很懒,什么都没留下…
展开
-
HTML和CSS基础系列(三)
文章目录伪类、伪元素的区别css选择器优先级(权重问题)css标准盒子和怪异盒子css提升性能的方式可继承属性visible:hidden和display:none有什么区别?在render tree 和 dom tree里面呢?window和document的区别 window.onload和document.ready的区别h5新增结构元素和属性如何开启硬件加速transform会引起回流吗伪类、伪元素的区别举几个例子:伪类::link,:visited,:hove,:active,:focus原创 2020-08-02 16:42:35 · 344 阅读 · 0 评论 -
HTML和CSS基础系列(二)
文章目录语义化标签@import @media @charset 等 @ 规则页面导入样式时,使用link和@import的区别css中有哪些单位px、em、rem的区别rem为什么能够实现自适应布局,在不同的手机端表现是什么static、fixed、relative、absolute的区别display可以取哪些值href和src的区别三栏布局css3动画 transition和animationflex的使用方法,flex:1代表了什么bfc的作用,触发条件清除浮动的方式(解决高度坍塌)css水平垂直居原创 2020-08-02 16:37:42 · 472 阅读 · 0 评论 -
HTML和CSS基础系列(一)
文章目录DoctypeHTML5 为什么只需要写 你知道多少种Doctype文档类型?行内元素和块级元素块级元素行内元素行内块级元素让块级元素一行显示的方法HTML5 表单验证全局监听错误的方法document.write和innerHTML的区别DOM属性datasetHTML5的离线缓存离线检测iframe的缺点与iframe有关的小知识``与`<h1>`的区别、`<b>`与`<strong>`的区别、`<i>`与`<em>`的区别?</原创 2020-08-01 21:31:08 · 342 阅读 · 0 评论 -
使用css动态修改主题色(实现换肤)
方法:使用css变量,给变量加--前缀,涉及到主题色的都改成var(--mainColor)这种方式示例:body{ --mainColor:red;}.demo{ color:var(--mainColor);}可以通过js修改主题色document.body.style.setProperty('--mainColor', '#fff');...原创 2019-09-22 21:20:57 · 3362 阅读 · 1 评论 -
每点击一下,div旋转90°
用rotateTimes记录旋转次数,从而旋转不同的角度,很简单,直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>每点击一下,旋转90°</title> <style> #box{ width: ...原创 2019-04-14 15:46:51 · 6645 阅读 · 0 评论 -
更改DIV的父节点,使某个DIV整体移动到另一位置
效果刚开始是这样的点击changeParent按钮后变成这个样子控制台输出:代码主要用removeChild和appendChild实现,删除后再添加js代码:function changeParent(){ var frag = document.getElementById("frag"); var storagePlace = document.getElementByI...原创 2019-04-13 19:38:48 · 1933 阅读 · 0 评论 -
获取鼠标点击元素的id
该功能主要通过clickedId()实现,可以将该函数封装起来,以便下次使用。代码执行结果为将红色div变成黑色上代码!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Demo</title></head> ...原创 2019-04-10 11:49:55 · 5938 阅读 · 0 评论 -
获取元素相对于浏览器窗口的偏移量
js封装函数function offset(obj,direction){ //将top,left首字母大写,并拼接成offsetTop,offsetLeft var offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1); var realNum = obj[offsetDir...转载 2019-04-10 10:52:38 · 2358 阅读 · 0 评论 -
关于sticky属性无效的问题
问题最近在写一个小游戏时,遇到了sticky标签无效的问题。在这里记录一下~![在这里插入图片描述](https://img-blog.csdnimg.cn/20190331150725111.png)就是这个工具栏,我希望他的高度是整个页面,并且在最左边不动,因此在css中设置:#funcarea{ height: 100%; float: left; position:stick...原创 2019-03-31 15:59:53 · 13002 阅读 · 0 评论 -
一个简单的网页版钢琴(用到JQuery)
<!doctype html><html><head><meta charset="utf-8"><title>琴键</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> ...原创 2019-03-30 08:58:20 · 5639 阅读 · 1 评论 -
BingoCard游戏完整版(内含注释)
HTML<!doctype html><html><head><meta charset="utf-8"><title>Make Your Own Bingo Card</title> <script src="../../js/jquery-3.3.1.min.js"></script>...原创 2019-03-29 21:44:12 · 1492 阅读 · 0 评论 -
基于web的拼图游戏
PuzzleGamea simple html puzzle game.GithubPuzzleGame原创 2019-09-25 15:58:27 · 782 阅读 · 0 评论 -
css关于box-sizing的content-box、border-box属性和offsetWidth、clientWidth详解
结论当box-sizing: border-box时,你看到的元素宽度是你设置的宽度减去border和padding的宽度,元素会小一些,即style.width = 元素实际宽度(offsetWidth) + padding + border当box-sizing: content-box(默认)时,你看到的元素宽度是你设置的宽度加上border和padding的宽度,元素会大一些,即...原创 2019-10-12 21:39:00 · 832 阅读 · 0 评论 -
div+css实现水平/垂直/水平垂直居中超详解
单个元素水平居中1.margin:0 auto方法wrapper相对屏幕居中<div class="wrapper"></div>body{ width: 100%;}.wrapper{ margin: 0 auto; width: 120px; height: 120px; background-color: purple;}...原创 2019-11-02 19:56:03 · 5989 阅读 · 6 评论