- 博客(10)
- 收藏
- 关注
RSS订阅原创 用弹性盒完成移动端的搜索栏自适应，简述flex-grow和justify-content的使用方法
弹性盒中项目放大比例flex-grow: 1;和主轴方向两端对齐justify-content:space-between;的使用方法。首先建立基本盒子结构如下：<div class="box"> <div class="box1">我是box1</div> <div class="box2">我是box2</div> <div class="box3">我是box3</div></di
2020-12-19 15:53:39
450
2
原创 CSS3中新增属性
1、边框阴影box-shadow:水平阴影位置 垂直阴影位置 模糊距离 [阴影尺寸] 颜色 [内阴影inset];文本阴影text-shadow:水平阴影位置 垂直阴影位置 模糊距离 颜色 ;2、背景新增属性1.background-origin背景原点 padding-box 背景图像填充框的相对位置(默认值) border-box 背景图像边界框的相对位置 content-box 背景图像的相对位置的内容框2.background-clip背景裁切 bord
2020-12-19 11:21:01
187
1
原创 常用的几个伪类选择器
伪类选择器1.结构性伪类选择器X:first-child 匹配子集的第一个X元素(非css3)X:last-child 匹配子集的最后一个X元素X:only-child 匹配唯一的子元素X:nth-child(n) 匹配索引值为n的子元素,索引值从1开始X:nth-last-child(n) 从最后一个开始算索引X:first-of-type 匹配同类型兄弟元素中的第一个X元素(子元素中每个类型的第一个类型)X:last-of-type 匹配同类型兄弟元素中的最后一个X元素X:only-o
2020-12-17 17:57:08
4088
原创 H5中几个常用的新增语义化标签
语义化标签优点：代码结构更加清晰，移动设备能完美展现，便于搜索。块元素section元素 表示页面中的一个区块 <section></section> article元素 文章内容<article></article>aside元素 侧边栏,辅助信息<aside></aside>header元素 页面头部<header></header>footer元素 页面底部<foote
2020-12-17 17:52:47
623
原创 3D转换的位移、旋转、缩放以及动画如何执行暂停等
3D转换 视距：给父元素加 perspective：2000px；模拟人眼到物体的距离，以便能观察到比较明显的3d效果-进大远小###显示3D效果 transform-style: preserve-3d; 1、位移 transform:translateZ();z轴方向移动 transform:translate3d(100px,200px,300px);xyz轴同时移动相同写法： tr
2020-12-17 17:45:40
572
原创 2D效果的旋转、位移、缩放、倾斜和注意事项
2D转换1、位移不会脱离文档流 transform:translate(x);水平方向位移 transform:translate(x,y);水平垂直方向位移 transform:translateX(100px);水平方向位移 transform:translateY(100px);垂直方向的位移2、旋转 transform:rotate(60deg);正值是顺时针选转，负值是逆时针选转(默认是元素中心为中心)
2020-12-17 17:41:33
657
1
原创 左移和右移的算法
<<(左移)1.运算规则： 按二进制形式把所有的数字向左移动对应的位数，高位移出(舍弃)，低位的空位补零。2.语法格式： 需要移位的数字 << 移位的次数 例如： 3 << 2，则是将数字3左移2位 计算过程： 3 << 2 首先把3转换为二进制数字0000 0011，然后把该数字高位(左侧)的两个零移出，其他的数字都朝左平移2位，最后在低位(右侧)的两个空位补零。则得到的最终结果是0000 1100，则转换为十进制是12。|0000 0011|0
2020-12-01 14:16:30
36019
1
原创 常用的适合低版本IE的过滤器
1、下划线 _下划线只能是IE低版本(6及以下)可以识别，其他浏览器高版本不识别（_height)2、！important高版本可以把权重添加到最高在IE6以下的低版本浏览器，是单纯的不识别！important这个单词而已3、 \9 只能是IE浏览器识别并且是11以下4、 \0 只能是IE浏览器识别并且是IE8以上5、 + 只能是IE浏览器识别并且是IE7及以下识别6、 :root IE9及以上识别...
2020-11-28 17:33:47
132
原创 页面中常遇到的BUG，及解决方法
1、解决图片底下三像素的间距：hack1：给img设置vertical-align:top;hack2：给img设置display:block;2、谷歌浏览器表单元素在点击时会有外边线 googlehack1：input,textarea,select,button,area{outline:none;}3、IE浏览器加了超链接的图片会带有一个边框 IEhack1：img{border:none/0;}4、透明写法hack1：opacity:0~1;IE9以上及其它的浏览器
2020-11-27 20:52:17
1651
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人