Css3
Mr_lwb
生在河北,去过山西,逗留江苏,踩过上海,停在京城......
出身农民,当过菜工,下过建筑,干过保洁,最后闯入IT......
展开
-
Meta 基础知识
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略将页面中的数字识别为电话号码meta name="forma原创 2017-02-16 09:44:39 · 292 阅读 · 0 评论 -
Css3 活动抽奖弹框
style:<style type="text/css">.active-btn { width:60px; height:60px; background:url(images/activtiy-btn-bg.png) no-repeat center; background-size:100% 100%; position:fixed; top:50%; ri...原创 2018-08-20 13:13:38 · 518 阅读 · 0 评论 -
Css3 浮窗定时左右摇摆
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, mini原创 2018-06-12 16:38:02 · 1071 阅读 · 0 评论 -
css3 弹性盒模型(三)
flex,box 讲解 元素弹性空间 display:flex; 案例代码#demo{ height:200px; border:1px solid #000; /*新版的弹性盒模型*/ display:flex; /*老版的弹性盒模型*/ /* display:-webkit-box; */原创 2017-02-23 11:29:04 · 478 阅读 · 0 评论 -
移动端事件(一)
移动端的三大事件手指按下:ontouchstart手指移动:ontouchmove手指抬起: ontouchend提示:在移动端开发时,浏览器的模拟器时好时坏,一般不用on 来绑定事件的函数,采用事件绑定的方式1、事件演示Demobody{ margin:0;}#test{ width:200px; height:2原创 2017-02-24 10:06:51 · 1567 阅读 · 0 评论 -
flex
/* ============================================================ flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水平居中 flex-pack-justify:子元原创 2017-02-15 17:58:08 · 303 阅读 · 1 评论 -
@media 讲解
一、媒体 all 所有媒体braille 盲文触觉设备embossed 盲文打印机print 手持设备projection 打印预览screen 彩屏设备speech '听觉'类似的媒体类型tty 不适用像素的设备tv 电视demo #box{原创 2017-02-23 18:03:50 · 574 阅读 · 0 评论 -
css3 弹性盒模型(二)
flex,box 讲解 新版的弹性盒模型下 display:flex; /*元素在主轴的开始位置,富裕空间在主轴的结束位置*/ justify-content:flex-start; /*元素在主轴的结束位置,富裕空间在主轴的开始位置*/ justify-content:flex-end;/*元素在主轴的原创 2017-02-22 16:49:59 · 371 阅读 · 0 评论 -
css3 弹性盒模型(一)
*{padding:0;margin:0;}#demo{ height:200px; border:1px solid #000; /*新版的弹性盒模型*/ display:flex; /*新版下设置主轴方向为水平方向*/ flex-direction:row; /*新版下设置主轴方向为垂直方向*/ flex-direction:c原创 2017-02-22 14:54:20 · 367 阅读 · 0 评论 -
getBoundingClientRect()
getBoundingClientRect() 获取页面元素的位置document.getElement.getBoundingClientRecttest test为了方便就直接用绝对定位的元素document.getElementById('test').onclick=function (){ if (document.do原创 2017-02-22 10:11:02 · 589 阅读 · 0 评论 -
移动端常见的一些问题
1、QQ强制竖屏或者横屏显示orientation" content="portrait | landscape" />2、QQ设置全屏3、UC强制竖屏或者横屏显示4、UC全屏显示5、禁止拨打电话号码和邮箱15210222829 15210222829">请拨打电话号码请发送邮箱6、去掉点击时候的高亮颜色a,input,button{-原创 2017-02-21 15:39:00 · 252 阅读 · 0 评论 -
clip:rect / turn 介绍
1、clip:rect矩形剪裁功能及一些应用介绍CSS中有一个属性叫做clip,为修剪,剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果clip 属性剪裁绝对定位元素。当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。个属性用于定义一个剪裁原创 2017-03-01 15:49:40 · 407 阅读 · 0 评论 -
Sticky Footer,完美的绝对底部
写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部。但是,我们期望的效果是页脚应该一直处于页面最底部(如图二):笔者最近在项目中也遇到过这样的场景,在寻找最佳解决方案的过程中,了解到了 “Sticky Footer” 这个名词。本文将带大家重新认...转载 2019-05-15 14:18:13 · 171 阅读 · 0 评论