CSS - CSS3
关注
分享
扫一扫
文章平均质量分 92
雷斯巴能
这个作者很懒，什么都没留下…
展开
-
css 绝对定位和相对定位的使用（absolute ,relative ）
position:relative 和 position:absolute 的区别：相对定位（relative）:相对于上一级元素距离的位置。 绝对定位（absolute）:相对最顶级元素距离的位置，即相对于整个屏幕。语法： position:relative; top:50px; left:50px;position:absolute; top:50px; le原创 2016-06-29 11:15:07 · 671 阅读 · 0 评论 -
原生JS、CSS3 上拉刷新效果的实现。
突然间的兴致，把遗留的上拉刷新的组件给写写，完工确实也花费了不少时间。个人认为在移动端 大可不必做一个上拉的效果来进行数据分页，类型淘宝、等app都是判断滚动条到底部进行数据加载的动作，效果堪称极品中的上品，确实不错。前端生也为此寻找一些乐趣。Dome不是一流，但是一般。有任何兼容性问题，欢迎提出和分享。 在这里与大家分享 以及 技术学习的目的。 解决发现问题: 兼容IOS滚动条 上拉是滚动不流程原创 2017-12-21 16:09:25 · 2447 阅读 · 0 评论 -
如何设置图片、文字在容器（div）中垂直居中的显示？
1、设置文字在div 容器中垂直居中显示<div style="border: 1px #f00 solid;height: 200px;width: 60%;text-align: center;line-height: 200px;"> <span>文字垂直居中</span&原创 2017-12-05 09:42:49 · 1021 阅读 · 0 评论 -
原生js 仿微信网页加载进度条的提示
一些H5页面在网络加载时，事件会一直监听并触发 readystatechange 事件。某些需要提示网页 加载进度，进行进度条提醒的友好提示，类似微信访问微信公众号会出现进度条。用原声JS实现的方法，只需要引入js脚本文件到页面头部。引入progress.js。 添加到网页头部。document.addEventListener('readystatechange',function() {原创 2017-12-25 12:01:29 · 1398 阅读 · 0 评论 -
移动端原声js + css3实现下拉刷新
1、引入 jquery.js 和 nativePull.js 文件<script src="js/jquery-1.8.3.min.js"></script><script src="js/nativePull.js"></script>2、加载下拉刷新Dom引擎HTML代码块 <!-- beginDown --><div class="pull_down" style=&quo转载 2017-01-06 12:42:10 · 2009 阅读 · 0 评论 -
使用CSS3属性（@media）制作网站响应式布局
使用CSS3属性（@media）制作网站响应式布局。 随着前端技术发展越来越成熟，移动H5也突出了重要的地位。作为在攻城界摸爬滚打小生写了个demo,提供个给大家学习，对于要求不高的网站开发可以考虑使用使用@meida 属性开发自己的一个移动PC 响应式网站。 pc一可分为：头部，左侧，中部，右侧以及底部，移动一般纵向模式居多，以下符上代码。<!DOCTYPE html><html><hea原创 2017-03-22 23:51:21 · 1436 阅读 · 0 评论 -
-webkit 内核浏览器 自定义滚动条样式
实例代码针对-webkit 内核浏览器滚动条样式的设置以及使用方法，记录并提供给大家学习参考。 声明出现滚动的容器（#scrollWrap）：overflow：auto。#scrollWrap::-webkit-scrollbar-track { background-color: transparent}#scrollWrap::-webkit-scrollbar {转载 2018-01-23 13:36:55 · 364 阅读 · 0 评论 -
（常用代码）CSS3 进度条效果的实现
（常用代码）CSS3 进度条效果的实现不需要阴影3D 的效果注释样式/*box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);*/构建HTML 结构和样式div class="progress"> div class="loader-container">div>div>style&原创 2018-01-30 16:49:28 · 4344 阅读 · 1 评论 -
针对常用移动端H5页面CSS 样式控制。禁用页面文本复制、禁用系统默认菜单、禁止链接点击高亮的处理。。。。
* { -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*禁用文本复制*/ -webkit-tap-highlight-color:transparent; /*取消点击链接或者JavaScript可点击元素赋给的高亮背景色*/}针对不同浏览器内核-webkit-，-原创 2018-01-23 14:07:20 · 2470 阅读 · 0 评论 -
原生JS实现H5页面侧滑删除的效果
目前很多H5框架都有类似QQ、微信消息侧滑删除的功能。如果工程并没有提供侧滑功能的时候该如何是好？。。。。得来全不费功夫，特此花费些时间编写的侧滑插件，希望能够帮助前端学习者的一些参考~~。本文根据实现此类效果展开说明以及演示。基于移动端触摸事件touchstart、ontouchmove以及touchend事件。注意此三种事件的触发只能在手机上有效，电脑调试需切换手机调试模式。使用CSS原创 2017-10-20 17:05:13 · 6775 阅读 · 0 评论 -
flex 布局的使用
网页传统的布局方式依赖“display”、“position”、“float”属性，对于垂直居中、容器大小分配就会显得很不方便。Flex 就很好的解决这些问题，实现响应式的页面布局。对于Flex 的钟爱，记载可能是为了下一次理解 与 回忆 。容器的属性：.box{ display: flex; flex-direction: row | row-reverse | column |转载 2017-12-04 14:40:49 · 1520 阅读 · 0 评论 -
整合53种纯CSS3炫酷loading指示器动画特效
很好用的loading 加载效果。53种纯CSS3炫酷loading指示器动画特效。常用于移动开发领域，请求网络loading 加载的提示。 附件Demo : http://download.youkuaiyun.com/detail/china_guanq/9919553转载：转载 2017-08-03 09:23:15 · 5188 阅读 · 0 评论 -
rem布局，移动H5页面布局规范（1）。
功能决定成度，样式决定美感度，在移动H5页面布局上规范必然时不可少。 在H5页面 UI设计图的基础，如何根据设计图片写出比例相同， 在不同移动设备上页面上的样式依然保持一致。响应式页面，rem布局的使用方法。 1、设置viewport<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,原创 2017-09-13 10:59:09 · 2017 阅读 · 0 评论 -
px,em,rem 解释精透
你可能已经很熟练使用这两个灵活的单位，但你可能不完全了解何时使用rem，何时使用em。 本教程将帮你弄清楚!em和rem都是相对单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值1em或1rem，它可以被浏览器解析成 从16px到160px或其他任意值。padding设置了1em解析出来的值为16pxpadding设置了1em解析出来...转载 2016-06-29 14:19:01 · 1420 阅读 · 0 评论 -
js css3仿ios toast提示。
1、引入的样式与js文件：<link href="toast.css" rel="stylesheet" /><script src="toast.js" type="text/javascript"></script>2、文件确保引入正确。 调用方法showToast（text,原创 2017-08-08 18:59:55 · 501 阅读 · 0 评论 -
纯JS、CSS3实现高仿IOS消息alert弹窗（警告框，确认框，提示框）。老铁们，没毛病。
简洁，大方的ios弹窗风格。网上有很多关于alert 弹窗的栗子可以借鉴使用。本文章主要应用在移动端上面的弹窗实现。 在项目没有应该到其他框架的弹窗的基础上， 此实例应该可以满足大部分弹窗上的要求,可直接应用于项目之中。使用方法： 1、引入依赖的样式文件和脚本，（也可直接引入非压缩文件，附件包含）：<link href="popup.min.css" type="text/css" rel="st原创 2017-08-25 10:43:25 · 5695 阅读 · 0 评论 -
移动H5页面CSS 样式控制，禁止页面文本复制代码
*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-use原创 2017-08-15 13:24:51 · 4154 阅读 · 0 评论 -
JavaScript 实现loading加载效果实现页面遮罩层
1、引入需要JS文件<script src="js/page-over.min.js" type="text/javascript"></script>2、HTML页面加载 遮罩块代码如下。 <div id="overlay"></div>3、JavaScript 如何实现打开 和 关闭遮罩原创 2017-08-03 14:09:02 · 15632 阅读 · 0 评论 -
CSS渐变效果的使用，线性渐变、径向渐变。
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（Ra原创 2017-09-14 13:07:39 · 1069 阅读 · 0 评论 -
基于Jquery/cropper插件的使用。头像截切/裁剪图片。
—-》闲来无事，学习了解一点新的东西还是可以消磨时间，非常敬业、提炼升仙。本栗针对移动页面上需要头像裁剪上传的功能。 基于Jquery库/Cropper插件 实现头像旋转、裁剪、转换canvas等功能。模仿QQ头像上传的样式，具体使用方法请参考如下实例。使用方法： 1、引入插件需要的js、css文件即可。请jquery文件放在cropper.js前面引用。<link rel="styleshe原创 2017-10-11 17:23:40 · 1477 阅读 · 0 评论 -
精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能效果实现！
精致的H5 列表侧滑组件。H5页面侧滑删除、修改的效果。这里只支持手机端访问，Chrome浏览器调试 切换到Mobile 调试模式学习无止境，何时是终点、时间让人沉思。代码分享，是对以下文章的更新版本！http://blog.youkuaiyun.com/china_guanq/article/details/78297430此此修改，大部分整理修改了组件存在的Bug 以及优化处理。为了不给自己埋井原创 2018-01-25 17:05:09 · 5999 阅读 · 1 评论