CSS
dawkdamwdkmadk
前端
展开
-
img图片增加用户体验
本篇文章主要写html中img标签增强用户体验: 通过伪元素和content来实现直接上代码: css部分img{ width: 800px; height: 300px; display: inline-block; position: relative; overflow: hidden;}img::after{ content: attr(alt); posit...原创 2018-02-26 11:20:03 · 221 阅读 · 0 评论 -
【quickly-css】(极易上手)一款使用Sass构建的高效开发CSS库
简介quickly-css是一个快速书写CSS样式的类库,项目采用scss,gulp构建,quickly-css方便了我们日常开发重复书写css的烦恼,它类似于bootstrap但又不同于bootstrap。###基本的使用###<div class="w-full text-red">test</div>相当于:<div class="test"&...原创 2019-03-28 14:01:34 · 543 阅读 · 0 评论 -
前端动画开源库animate.css
ad. 张京项目展示地址&个人网站:https://www.zj1024.comAnimate.css 1.简介:一个跨浏览器的 css3 动画库,内置了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)、放大缩小(等多达 60 多种动画效果,几乎包含了所有...原创 2018-04-13 21:28:11 · 3399 阅读 · 0 评论 -
纯css3自定义网页滚动条,浏览器统一scroll滚动条
支持-webkit-前缀的浏览器,滚动栏有五个css修饰:整体部分, ::-webkit-scrollbar两端按钮, ::-webkit-scrollbar-button外层轨道, ::-webkit-scrollbar-track内层轨道, ::-webkit-scrollbar-track-piece滚动滑块, ::-webkit-scrol...原创 2018-03-30 11:19:35 · 1335 阅读 · 0 评论 -
html中inline-block出现缝隙间距的解决方案
不同浏览器之间的间隔距离是不一样的,亲测有下面4中情况浏览器缝隙大小(PX)备注Firefox4 Chrome5IE4qq,360,搜狗等浏览器8 html显示:出现这个问题的原因就是:1.代码部分标签之间出现空格像这样:<div> <a href=""></a><!-- 这些都是缝隙 --> <a href="">原创 2018-02-17 11:24:21 · 661 阅读 · 0 评论 -
html单行元素居中显示,多行元素居左显示
有很多的业务需要元素或者文字如果单行,居中显示,如果数据增多,居中显示代码(直接复制到编辑器可用):<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>单行居中,多行居左显示</title><styl原创 2018-02-22 23:55:20 · 1657 阅读 · 0 评论 -
css利用margin外部尺寸实现等高布局经典案例
我们可能会有一个这样的需求: 两个板块并排排列,分别有内容,当任意一个内容增加总的高度也增加如图所示:我们正常的块状标签排列时候是这样的:通过属性margin设置后:下面直接上代码:html部分:<div class="wrap"> <div class="left"> <h1>内容1</h1> ...原创 2018-03-08 18:05:31 · 489 阅读 · 0 评论 -
高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)
前言事实上, 只有10%-20%的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩余80%-90%的最终用户体验。–Steve Souders在这篇博客中,我根据工作中的实际项目经验和一些测试的经验中总结出了前端页面在性能上优化方案。其中一些经验吸收自《高性能网站建设指南》Steve Souders 著 电子工业...原创 2019-05-31 21:33:11 · 2687 阅读 · 0 评论