CSS与HTML
关注
分享
扫一扫
总结css与HTML
i大俊
https://github.com/kkxiaojun
展开
-
CSS伪元素画分割线与其它实用方法（::before、::after）
CSS伪元素画分割线与其它实用方法（::before、::after）原创 2019-12-21 15:47:31 · 4858 阅读 · 0 评论 -
This relative module was not found（@font-face 字体引入路径问题）
This relative module was not found（@font-face 字体引入路径问题）原创 2019-11-07 20:32:50 · 2074 阅读 · 0 评论 -
避免使用 vue 的 v-html 指令
一、问题说明在日常的后台系统中经常会有输入框的业务，最近有个业务是这样子的：编辑文章信息，生成可预览的文章信息卡片。我看到代码中有个信息是这样处理的：<div v-html="title"></div>并且title是用v-model绑定的，直接用v-html插入Dom中巧的是测试人员很有专业素养，直接输入一段script,alert脚本，问题就出来了,直接弹出...原创 2019-10-20 08:59:29 · 5217 阅读 · 0 评论 -
v-show、v-if
文章目录v-show和v-if区别visibility：hidden和display：none之间区别v-show和v-if区别v-if: 真正的条件渲染。false，不在dom中。v-show: 一直在dom中，只是用css的display属性进行切换（存在于html结构中，但是未用css进行渲染）。存在dom结构中，display:none时，不在render（渲染树）树中。visib...原创 2019-10-13 22:36:46 · 245 阅读 · 0 评论 -
为什么不要频繁操作DOM之性能优化
性能优化-为什么不要频繁操作DOM性能优化的时候，我们常说“不要频繁操作DOM”，但是“DOM 为什么这么慢”以及“如何使 DOM 变快”呢。DOM 为什么这么慢，因为，DOM和JS的跨界交流把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切...原创 2019-10-13 22:08:12 · 1720 阅读 · 0 评论 -
css基础一（权重）
css权重原创 2017-04-06 23:42:22 · 787 阅读 · 0 评论 -
用css画三角形（提示框三角形）
三角形使用情形经常用于提示框，下拉菜单等（csdn也很多用到，最后一图），看图：由于在网页中经常要用到，所以特地研究图片实现（感觉low）、svg实现(小题大作了)，所以最后还是css画比较不错，兼容性也不错三角形画法html结构 <div class="triangle"> </div>三角形画法 用border画出，当width、height均为100px时 .trian原创 2017-04-18 00:09:01 · 5977 阅读 · 2 评论 -
css伪类与伪元素
css中除了常用的id(#),class(.),元素(p,body)等还有根据元素状态来分伪类和伪元素，之前用的不多，概念有点模糊，借此重新学习了解伪类最常见的：:link,:visited,visited,:hover,:activea:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 *原创 2017-04-18 18:13:56 · 448 阅读 · 0 评论 -
利用JavaScript、Ajax及CSS3实现图片预加载
导语 多图片网页很多都用了预加载图像，预加载图像是改善用户体验的好方法。但苦于网上找好资料不容易，特地翻墙研究了两篇，一起参考学习仅使用JavaScript实现预加载 像以前的方法一样有效，我通常认为实际上实在太乏味和耗时。 相反，我通常更喜欢使用直线切片JavaScript来预加载图像。 以下是几种仅限JavaScript的预加载方法，可在几乎每个现代浏览器中精美地工作。JavaScr原创 2019-10-13 11:26:18 · 823 阅读 · 0 评论 -
bootstrap仿Ghost开源博客主页
都说实践是检验是否掌握的标准，由于bootstrap之前用的不多，但是最近又需要使用，借此机会模仿一个Ghost开源博客主页搭建bootstrap环境效果预览：Ghost开源博客主页先到官网下载bootstrap框架，这里用的是bootstrap3.2版本使用sublime编辑器即可在官网上复制框架基础页面加上本地的css,js文件<!DOCTYPE html><html lang="zh原创 2017-05-04 22:25:21 · 1320 阅读 · 0 评论 -
CSS3基础（1）2D与3D转换
全面回顾css3的api，方能更好地在实践中使用2D转换浏览器支持 translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数 例如：div{ transform: translate(50px, 100px); -ms-transform: translate(50p原创 2017-05-06 15:09:49 · 571 阅读 · 0 评论 -
css定位之position详细解读
position这个属性使用非常频繁，扪心自问，似乎又不是很明白，特别是absolute，有种爱在心口难开的感觉，难受，今天就一探究竟static默认值。没有定位，元素出现在常规流中（ 忽略 top, bottom, left, right 或者 z-index 声明）。 PS:常规流，是对 “normal flow” 的直译。 之称之为常规流，是因为这是相对于浮动和绝对定位的一个概念，原创 2017-05-06 17:02:27 · 625 阅读 · 0 评论 -
HTML5系列（2）history
History 接口允许操作浏览器的曾经在标签页或者框架里访问的历史记录。History 接口不继承于任何属性。 先看看浏览器兼容情况 属性 history.length() 返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。 打开新页面：history.length(); // 1 History.scrollR原创 2017-05-14 10:52:43 · 560 阅读 · 0 评论 -
HTML5系列（3）data-*基础
用法data-* 全局属性 构成一类名称为自定义数据属性的属性，允许通过脚本在HTML 和其 DOM 表示之间交换专有信息。唯一标识img也是不错的选择是我们可以把所有自定义属性在dataset对象中统一管理，遍历啊什么的都很方便。读取操作直接在html上设置<div id="name" data-name="hope"> click here</div>HTML5中原创 2017-05-15 10:39:59 · 403 阅读 · 0 评论 -
Sass入门教程
Sass介绍SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。符合编程人员的思维安装Sass是基于ruby的，假如已安装ruby，输入 gem install sass就ok了sublime下安装请移步sublime安装Sass基本使用使用的时候后缀保存为.scss即可屏幕上显示： sass a.scss将显示的文件保原创 2017-05-16 22:28:50 · 397 阅读 · 0 评论 -
CSS应注意的基本知识
记录一些有用的css知识点外边距合并即块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。具体分三种情况： 1. 相邻的兄弟姐妹元素<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p><p style="margin-t原创 2017-05-24 16:59:17 · 515 阅读 · 0 评论 -
boostrap table插件的分页与checkbox
说明 今天需要实现这样一个功能，有checkbox列表可供选择，要求可以全选，全取消，不同页之间可选择并保存，需要保存上一步的选择信息。最终实现的功能如图：具体实现首先，来看具体的代码，这里只截取实现功能所需代码 var selectionIds =[],selectionNames=[]; var curd = { init:fu原创 2017-07-23 08:23:44 · 1471 阅读 · 0 评论 -
前端中的各种小知识点
前端应该了解的小知识原创 2017-08-12 10:48:16 · 721 阅读 · 0 评论 -
纯css实现简单的幻灯效果页面
纯css实现简单的幻灯效果页面input:checked结合label for实现&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &原创 2018-09-27 08:26:49 · 768 阅读 · 0 评论 -
HTML5系列（1）web存储
html5中的Web Storage包括了两种存储方式： sessionStorage和localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 而localStora...原创 2017-05-06 16:39:36 · 554 阅读 · 0 评论 -
页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView）
页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView）由于最近有回到顶部、根据nav定位到指定div和定位到输入错误的输入框的需求，所以在此分析此类需求可能的解决方案用a标签的href属性这是比较常用的一种方法 href。这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号（...原创 2018-09-10 10:49:45 · 10694 阅读 · 0 评论