CSS3
文章平均质量分 67
CSS3
I-T枭
这个作者很懒,什么都没留下…
展开
-
uniapp动态修改样式_Vue如何动态修改CSS变量
想要动态修改css样式就得能动态的给<style></style>赋值,可是<style></style>里面又写不了变量(有可能可以但是我不会。。),所以想了个这种办法,通过给模板文件的:style动态复制从而间接的修改<style></style>里面的变量<template> <div :style="{'--color':'red'}"></div></templat...原创 2021-07-06 17:02:22 · 4375 阅读 · 0 评论 -
移动端吸顶效果(小程序,h5)
前言:实例源码:#sticky-nav { position : sticky ; top : 100px ;}原创 2020-11-16 17:43:52 · 1247 阅读 · 0 评论 -
vue-解决弹出蒙层滑动穿透问题(IOS穿透)
【实现思路】 1. vue提供的@touchmove.prevent可以用来阻止滑动,但是这个方法会对其内的子div的滑动事件也禁止掉了,这样会导致中间文字无法滑动。如果没有中间滑动需求,用@touchmove.prevent实现是一个很好的方法。 2. 蒙层设为fixed悬浮在最上,底部列表设置overflow-y: hidden;这样可以列表内容就不可以滑了,但实际过程中没有效果,于是想到继续往列表父div向上追溯,对body和html标签设置相关样式,这样就控制住了底部列表滑动问题...原创 2020-08-07 23:37:10 · 1493 阅读 · 0 评论 -
VScode cssrem/px to rem插件使用 详细教程
VScode cssrem插件使用 详细教程1. 下载插件打开扩展,搜索cssrem如图:点击安装image.png2. 重新加载下载安装完成重新加载一遍,使插件生效image.png3. 设置根字体点击VScode左下方图标,选中设置image.pngimage.png往下滑到cssrem,三个选项随你改...转载 2019-11-29 17:05:05 · 4921 阅读 · 0 评论 -
px值转rem值的Sublime Text 3自动完成插件
一个CSS的px值转rem值的Sublime Text 3自动完成插件。插件效果如下:安装克隆项目 https://github.com/hyb628/cssrem.git 进入packages目录:Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里。 重...转载 2019-11-29 16:39:18 · 103 阅读 · 0 评论 -
移动端Rem布局--雪碧图css sprite
为什么使用雪碧图[摘要]CSS Sprites又称css精灵或者谐音css雪碧,是一种网页图片应用处理方式,今天为大家分享一个一键生成css雪碧图片的工具,复杂的事情简单化,提高开发效率。CSS Sprites又称css精灵或者谐音css雪碧,是一种网页图片应用处理方式。将一个页面内所需要显示的图片全部整合到一张大图中,并使用css属性background进行调用。这样的话,当页面渲染...原创 2019-11-29 10:52:33 · 805 阅读 · 0 评论 -
css布局 - 九宫格布局的方法汇总
方法一 column:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { height: 100%; wi...原创 2019-11-20 15:14:49 · 408 阅读 · 0 评论 -
Flex 布局教程:语法篇
1.4 弹性盒子(flex IE11+ IE10/-ms-)兼容性是支持>=IE11,IE10需要添加浏览器私有前缀(-ms-)。使用弹性布局使用了弹性布局,float clear vertical将失效。更多请见阮一峰的博客。display:flex; // 块元素用display:inline-flex; // 行内元素用弹性布局设置这些就暂时当作参...原创 2018-05-06 00:59:52 · 130 阅读 · 0 评论 -
小程序View内的文字不换行(cover-view)
今天发现View内的文字一行过去直接被屏幕右边吃掉,没有预期的换行,设置width也不管用,最后用它解决了1. white-space:pre-line(不会保留空白和tabs)2. white-space:pre-wrap(会保留空白和tabs).roomDesc { width: 710rpx; height: 184rpx; background: rgba(240...原创 2019-07-25 17:36:16 · 1619 阅读 · 0 评论 -
小程序CSS兼容之color,box-shadow,linear-gradient颜色值设置
1,颜色值不能使用八位,应该换成六位,或者使用rgba代替,否则在Ios能正常显示,但是在Android下该颜色会直接被忽略,如:以下颜色color,阴影box-shadow,渐变linear-gradient的使用color:#8A96A0ff;#替换成color:#8A96A0;box-shadow:0px 2px 4px #0000001A,0px 0px 2px #0000...原创 2019-07-24 14:34:30 · 754 阅读 · 0 评论 -
一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)
一、先来个实战1. 测试案例需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。例如://html<body> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" />...转载 2019-06-29 00:27:48 · 348 阅读 · 0 评论 -
如何用Css3实现Switch组件
基于表单的Checkbox效果图switch.gif原理Checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先得清除浏览器默认的样式, apperance: none, 本文代码只在chrome中运行, 如果需要写兼容性代码, 给apperance和transition加上前缀就好html代码<input...转载 2019-06-25 11:43:21 · 271 阅读 · 0 评论 -
[iOS开发]iPhoneX系列顶部和底部尺寸图解
iPhoneX屏幕大小.png竖屏尺寸:1125px × 2436px(375pt × 812pt @3x) 横屏尺寸:2436px × 1125px(812pt × 375pt @3x)与其它iOS设备的差异以下是与iPhone 6、7、8 (375×667pt) 相比。Status Bar 高度由 20pt 增长为44pt。status bar.png底部需要预留...原创 2019-06-03 10:05:12 · 12344 阅读 · 0 评论 -
HTML+CSS的制作-经验
先审查整个设计稿,在心里构思出页面的大致结构。 逐步细化每一块的结构,同时包括CSS大致怎么写,比如双列布局的时候 两个DIV 各自左右浮动,这个 在没做之前心里要有一个轮廓。否则 扎笔(键盘)就写,很容易各种返工、修改。基础。 HTML标签的用法、CSS常用的规则。一时想不起来的话,W3C、MDN去复习。 JS部分现在应该很多人都是在用jQuery ,那么对于jQuery的常用API也要有所熟悉...原创 2018-06-05 17:14:55 · 194 阅读 · 0 评论 -
image-响应式设计和HTML的<picture>标签
picture标签实现通过媒体查询的方式,根据页面宽度(当然也可以添加其他参考项)加载不同图片,具体picture详情点击查看<picture> <source srcset="3.jpg" media="(min-width: 320px)"> <source srcset="2.jpg" media="(min-width: 480px)&a原创 2018-06-07 10:25:30 · 851 阅读 · 0 评论 -
CSS 面包屑导航栏
做之前,先看一下效果图。demo01.png首先,书写好 HTML 代码。 <div id="crumbs"> <ul> <li><a href="#">Home</a></li> </ul>转载 2018-08-15 16:36:19 · 2502 阅读 · 0 评论 -
关于H5在移动端架构的优化设计总结
各大互联网公司采取的策略 一、百度移动前端首页 1. 对于首屏的静态文件css/js,在上线前全部编译直出到HTML文件中;整个首页的渲染只需要一次请求; 2.使用缓存;把不变的js/css/html全部存储到localstorage中去,然后根据cookie中添加版本号的MD5值判断是从服务器中更新还是本地获取; ...原创 2018-08-16 23:16:15 · 325 阅读 · 0 评论 -
使用CSS实现一个简单的幻灯片效果
方法一: 简单的CSS代码实现幻灯片效果话不多说,直接上代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>CSS实现简单的幻灯片效果</title> <st转载 2018-09-09 23:15:00 · 956 阅读 · 0 评论 -
【基础】这15种CSS居中的方式,你都用过哪几种?
简言CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。1 水平居中1.1 内联元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(i...原创 2018-09-10 23:58:45 · 299 阅读 · 0 评论 -
纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)
三角形? 1 2 3 4 5 6 7 8 9 10 11 <div class="box"></div> <style> .box{ width: 0; heigh...原创 2018-09-26 21:39:31 · 1329 阅读 · 0 评论 -
css图片宽高相等设置
<div class="image-header"><img src="demo.jpg"></div> .image-header{position:relativewidth:100%height:0padding-top:100%}.image-header img{position:absolutetop:0left:...原创 2018-10-20 23:25:09 · 2144 阅读 · 0 评论 -
前端开发环境的安装、搭建及配置
干货( Dry goods?)node.js brew(just for mac) ruby npm cnpm yarn git webpack bower browser-sync express gulp grunt sass vue angular react cutterman(填坑中) 待续...node.jsWindow官网下载地址:下...转载 2018-12-30 01:14:55 · 9495 阅读 · 0 评论 -
移动端页面布局
一、移动端app分类1、Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C2、Hybrid App 混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机应用3、Web App 基于Web的app手机应用程序 完全使用html5页面加前端js框架开发的手机应用...原创 2019-04-04 20:27:35 · 242 阅读 · 0 评论 -
rem与px的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定。我们知道,浏览器默认的字号16px,来看一些px单位与rem之间的转换关系:| px | rem |------------------------| 12 | 12/16 = .75 || 14 | ...转载 2019-04-04 20:33:08 · 234 阅读 · 0 评论 -
JS动态计算移动端rem的解决方案
首先介绍下rem说起rem就的说px,em;PX为单位在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。...原创 2019-04-04 20:47:47 · 480 阅读 · 0 评论 -
react-native Animated, 旋转动画
import React, {Component} from 'react';import { StyleSheet, View, Animated, Easing } from 'react-native';const circle = require('../../resources/img/loginCircle.png');class Index extends Componen...转载 2019-04-09 17:22:27 · 6287 阅读 · 3 评论 -
rem布局实现不同分辨率移动终端的自适应、整体缩放
前言现在手机屏幕分辨率越来越多,但我们的需求比较唯一——最佳视觉。当用户浏览网页时,根据屏幕的尺寸,来向用户展示更适合用户的布局、文字、图片、按钮等等,因此,rem应运而生。rem(font size of the root element)是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化,那么整个网页中运用到 rem的也会随之变化。加之当前手机淘汰...原创 2019-04-12 21:25:30 · 304 阅读 · 0 评论 -
js 关于时间方面的通用函数(时间格式化,分钟数转换为小时+分钟,计算天数差的函数)
项目中经常需要把数据转换,把经常用到的做过总结:一、时间格式化 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 exportfunctionformatDate (da...原创 2019-04-16 15:12:26 · 1320 阅读 · 0 评论 -
position:fixed抖动解决办法
最近用到position:fixed的定位方式,然后当页面滚动速度过快时,再谷歌浏览器上出现了抖动现象。网上搜了一下 很多同行写了博客提到这个问题 并且总结了很多方法来解决这个问题目前在我的项目中,选了下边的解决方案position: fixed; -webkit-transform: translateZ(0);...原创 2019-04-18 11:03:35 · 2098 阅读 · 0 评论 -
CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢...原创 2018-05-28 09:22:51 · 122 阅读 · 0 评论