CSS
邓惠子飞吧
加油,做最好的自己!
展开
-
实现一个自适应图片列表
如图,实现一个自适应图片列表,屏幕小于1366放每行3个,屏幕大于1366小于1700每行放四个,屏幕大于1700每行放五个。随着屏幕的变化图片按等比缩放(4:3)。详情查看https://juejin.cn/post/6990520699483848712...原创 2021-07-30 09:40:53 · 318 阅读 · 0 评论 -
基于等比缩放的大屏自适应方案
前端的数据可视化越来越重要,炫酷大屏的需求越来越多,您是否经常为屏幕不能自适应而烦恼?如何高度还原设计稿?如何在多种终端都呈现完美效果?也许本文可以给您带来帮助https://juejin.cn/post/6966103143402700837...原创 2021-07-30 09:38:57 · 497 阅读 · 0 评论 -
前端导出功能在ie11中的兼容问题解决
ie文件导出,1.遇到在IE中展示数据的时候报错。strict模式下不允许分配只读属性。经检查之后发现是使用document.createElement方法创建的元素直接使用.style = 'xxx' 进行样式属性的设置造成的。解决方法:设置样式为 ele.style.styleName = val; 的形式2. 报Unhandled promise rejection Error: 拒绝访问。是由于代码执行到click函数抛异常了.解决方法:...原创 2020-10-14 16:59:08 · 533 阅读 · 0 评论 -
background-clip和background-origin 详解
<div class="box border-box"/><div class="box padding-box"/><div class="box content-box"/><div class="box clip-border-box"/><div class="box clip-padding-box"/><di...原创 2020-01-26 20:31:56 · 588 阅读 · 0 评论 -
rem+vw前端的页面自适应
前置知识:1. rem是相对于根元素也就是<html>元素的字体大小的单位。html{ font-size:12px; } p{ font-size:2rem; /*24px*/}2. vw是可视窗口的宽度单位,和百分比有点一样,1vw =可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px前端屏幕自适应方案:通过改...原创 2019-09-09 15:27:55 · 361 阅读 · 0 评论 -
CSS3实现平行四边形
变换:skewX(-45deg)可以形成平行四边形。但是里面的内容也会跟着倾斜解决方案:嵌套元素方案:对内容再一次应用反向的歪斜()变形,从而抵消容器的变形效果缺点是不得不使用额外的HTML元素包裹内容 div{ transform: skewX(-45deg)}div>div{ transform: skewX(45deg)}<div&...原创 2018-11-04 21:04:28 · 4187 阅读 · 0 评论 -
CSS3 border-radius应用实例
本文主要呈现了使用border-radius的具体案例。border-radius详解见上一篇博文《CSS3 border-radius详解》<html> <head> <style> div{ display: inline-block; height: 50px; width: 160px; border...原创 2018-11-04 19:58:57 · 437 阅读 · 0 评论 -
CSS3 border-radius详解
有两种方法设置元素的各个拐角1.使用边界半径的所对应的各个展开式属性,分别设置四个拐角。边框左上角半径左上角边框右上角半径右上角边框左下角半径左下角边框右下角半径右下角2.使用边界半径简写属性,从左上角开始以顺时针顺序应用到元素的各个拐角。border-radius:1-4长度 | % / 1-4长度 | % ;说明: 拐角半径的长度可以用实际长度px em...原创 2018-11-04 19:35:24 · 1889 阅读 · 0 评论 -
在h5中实现水平滚动菜单
先上样式,每点击一个菜单项,让其在滚动到中间位置。HTML: <div id="header" class="scroll-nav"> <span v-for="(item,index) in wxTopicList" v-show="wxTopicList.length" @click="choo原创 2018-11-09 17:52:29 · 1441 阅读 · 0 评论