css
包淼淼
我是一只程序喵
展开
-
CSS3 calc()
参考:http://caibaojian.com/css3-calc.html原创 2020-01-16 16:23:56 · 130 阅读 · 0 评论 -
textarea 完全去除边框
textarea{ border: none; resize: none; cursor: pointer;}原创 2019-11-08 19:01:37 · 3561 阅读 · 1 评论 -
css3伪类选择器--动态伪类选择器
转自 https://blog.csdn.net/guoyangyang123456/article/details/72842601动态伪类并不存在于html中,只有当用户和网站交互的时候才会体现出来。动态伪类包含两种,一种是在链接中常看到的锚点伪类,一种是用户行为伪类。链接伪类选择器:E:link(未被访问过) 和 E:visited(已被访问过),用户行为伪类选择器...转载 2018-09-17 11:59:41 · 587 阅读 · 0 评论 -
使用html+css写的h5移动端的页面会产生左右晃动不固定问题,解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题
1、使用html+css写的h5移动端的页面会产生左右晃动不固定的时,给父级加 overflow-x:hidden属性2、解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题 解决方法为: 在body体内设置固定定位,top为0,left为0即可,同时设置html标签overflow:hidden;body{position:fixed;to...原创 2018-09-20 17:41:10 · 13456 阅读 · 7 评论 -
解决给h5移动端页面设置背景颜色后,整个屏幕填充背景色的问题
未解决之前:解决 代码:html,body{ margin:0; padding:0; outline:none; list-style:none; width:100%; height: 100%; background: #012145; font-family:"微软雅黑"; /*overflow-x: ...原创 2018-09-27 11:06:51 · 17922 阅读 · 0 评论 -
面试问题之H5C3有哪些新特性?
H5 C3 新增h51.语义化标签header、footer、aside、section、article、nav2.表单输入类型email、url、number、range、Date Pickers、search、color3.表单属性autocomplete、placeholder、form4.视频音频video、audio5.画布canvas6.伸缩矢量图...原创 2018-11-19 14:49:52 · 2396 阅读 · 0 评论 -
实现多层DIV叠加的js事件穿透
Flash里面有个很好的特性是,一个容器里,不存在实际对象的部分,不会阻拦鼠标事件穿透到下一层。前端就不一样了,两个div层叠以后,上层div会接收到所有事件(即使这个div里面内容是空的,没有任何实际对象),下层div什么事件都接不到。举个例子: 这个示意图中C方块在A容器中(A容器边框为红色)D方块在B容器中(B容器边框为绿色)A B部分重叠,B在上层。不做...原创 2018-12-14 15:53:51 · 4355 阅读 · 0 评论 -
h5更换自定义字体(字体包导入)
1.字体的设置和相关的属性如果自定义了字体包,就可以在font-family中填写自己定义的字体名这里写图片描述2.自定义字体(字体包的引入) (1)提供一个免费下载字体包的网站 http://font.chinaz.com/ (2)介绍 网上有很多可下载的字体包,ttf格式的就是字体包,按照图中描述,放在对应的文件夹里然后填好路径之后,设置好字体的名字就...原创 2019-01-09 18:11:50 · 7551 阅读 · 0 评论 -
Flex 布局
参考:http://www.runoob.com/w3cnote/flex-grammar.html网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整...原创 2019-03-26 13:54:35 · 98 阅读 · 0 评论 -
动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)
参考https://www.cnblogs.com/xiaohuochai/p/5419236.html (含动画效果)漂浮的白云【效果演示】 【简要介绍】 漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片,通过改变其背景定位来实现白云移动效果,通过设置不同的动画持续时间来实现交错漂浮的效果【主要代码】.box{ p...原创 2018-08-21 11:33:31 · 2427 阅读 · 0 评论 -
CSS3中translate、transform和translation的区别和联系
1、translate:移动,transform的一个方法通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 用法transform: translate(50px, 100px); -ms-transform: translate(50px,100px);...原创 2018-08-24 10:47:05 · 2065 阅读 · 0 评论 -
css文本超出多行显示省略号
今天做东西,遇到了这个问题,百度后总结得到了这个结果。 首先,要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性,需要记得。但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? c...原创 2018-07-17 11:40:03 · 304 阅读 · 0 评论 -
CSS外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时,第一...原创 2018-07-11 11:46:19 · 137 阅读 · 0 评论 -
定位之后,如何让div上下居中 左右居中
首先给div本身设置相对定位、绝对定位、固定定位1、上下居中top:50%;margin-top:-(本身高度*50%)2、左右居中left:50%;margin-left:-(本身宽度*50%)原创 2018-08-10 14:28:36 · 4132 阅读 · 0 评论 -
CSS3教程:pointer-events属性值详解
在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作。。。然后正好在Google map见到了类似的问题,拿来当例子来说:Google map中左上角的操作区域占位是挺大的,如红色框区...转载 2018-08-14 15:10:07 · 271 阅读 · 0 评论 -
实现div里的img图片水平垂直居中
body结构<body> <div> <img src="1.jpg" alt="haha"> </div></body> 方法一:将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。转载 2018-08-14 15:40:50 · 577 阅读 · 0 评论 -
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
简单来说meta name="viewport" content="width=device-width,initial-scale=1.0" 解释 <meta name="viewport" content="width=device-width,initial-scale=1.0"> content属性值 : width:可视区域的宽度,值可为数字或关键...转载 2018-08-16 16:27:57 · 3824 阅读 · 0 评论 -
CSS3 :nth-child(n):
浏览器参照基准:IE9, Firefox, Chrome, Safari, Opera参考http://demo.doyoe.com/css3/nth-child(n)/语法:E:nth-child(n){ sRules }* 匹配父元素索引为n的子元素E:nth-child(n) 让你匹配到父元素的任一子元素:Figure 1: 常规用法 DEMO<sectio...原创 2018-08-16 16:59:23 · 153 阅读 · 0 评论 -
逐帧自适应精灵图+css3实现小动画(以及进度条的实现)
1、讲解部分:一、animation属性设置要启用css3动画,就要先了解 animation 属性, animation 属性是一个简写属性,用于设置六个动画属性:animation-name 规定 @keyframes 动画的名称。animation-duration 规定完成动画所花费的时间,以秒或毫秒计。animation-timing-function...原创 2018-08-20 17:18:33 · 2734 阅读 · 0 评论 -
css帧动画的使用实例
1、demo1html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" hre原创 2018-07-16 13:55:57 · 771 阅读 · 0 评论