CSS
曲小强
前行之路,负重而行。
展开
-
css 气泡框
【代码】css 气泡框。原创 2023-12-12 17:18:13 · 280 阅读 · 0 评论 -
Skeleton 骨架屏 css制作
css实现骨架屏原创 2022-11-14 13:57:15 · 283 阅读 · 0 评论 -
等高对其css的样式
'啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊'原创 2022-11-14 13:29:32 · 173 阅读 · 0 评论 -
css 横向滚动条加高度自适应
css 横向滚动条加高度自适应原创 2022-09-14 14:33:07 · 1481 阅读 · 0 评论 -
css文字渐变色
css文字颜色渐变原创 2022-09-13 13:26:32 · 354 阅读 · 0 评论 -
css3Hover的几个展示效果
css链接:https://pan.baidu.com/s/1NmqTvHU1HKI6i3VGqhZ5sA 提取码:zeb0html链接:https://pan.baidu.com/s/1jEngaQzS05Vd5kyXoHw7Eg 提取码:sl3b原创 2022-02-14 15:55:46 · 257 阅读 · 0 评论 -
小程序换行
通过\n原创 2020-12-17 11:50:02 · 229 阅读 · 0 评论 -
移动端适配模板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" content="这是一个模板"> <script src="https://static-mumway.oss-cn-zhangji原创 2020-10-12 18:17:46 · 265 阅读 · 0 评论 -
element UI el-upload多张图 隐藏上传空间
先包裹displayNone一个class名 然后通过css隐藏<div class="displayNone"> <el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :file-list="fileList"> <i class="el-icon-plus"></i> <原创 2020-09-24 09:57:01 · 249 阅读 · 0 评论 -
h5在ios下拉上拉会带动整个页面滑动
html,body,#app { width: 100%; // 删掉 height: 100%; // 删掉 background-color: #F5F5F5;}只要删掉这俩个属性就行了让内容自由的撑开就可以原创 2020-09-18 14:59:04 · 2207 阅读 · 1 评论 -
css3 抖动效果
.shaky { -webkit-animation-name: shaky-slow; -ms-animation-name: shaky-slow; animation-name: shaky-slow; -webkit-animation-duration: 0.5s; -ms-animation-duration: 0.5s; animation-duration: 0.5s; -webk原创 2020-09-15 16:21:45 · 384 阅读 · 0 评论 -
css3 文字渐变动画效果
.css { background-image: -webkit-linear-gradient(left, red, blue 25%, #147B96 50%, yellow 75%, green); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 5s infi原创 2020-09-15 11:06:11 · 387 阅读 · 0 评论 -
css动画 呼吸的按钮
animation: animat 1.1s infinite;@keyframes animat { 0%{ transform: scale(.8); } 50%{ transform: scale(1); } 100%{ transform: scale(.8); }}原创 2020-06-28 14:34:07 · 887 阅读 · 0 评论 -
如何让swiper的小圆点放在外面
很简单<div class="swiper-wrapper homeSwiper" style="padding-bottom: 40px;">只需要在swiper-wrapperli 写个样式就行style="padding-bottom: 40px;";原创 2020-05-18 17:09:44 · 2512 阅读 · 0 评论 -
利用高效的css 提高你的开发效率~(下)
18。竖文排版<div style="writing-mode: tb;color: darkorange;"> 伊人山水间,<br /> 芦苇河畔。<br /> 逝水流年,转轮回。<br /> 将军沙场,<br /> 难归还~!<br /></div>19.overflow-x排版横向列表.video_list { white-space: nowrap; ov.原创 2020-05-15 10:45:10 · 1687 阅读 · 0 评论 -
利用高效的css 提高你的开发效率~
1、清除浮动<div class="parent clearfix"> <div class="left child">left</div> <div class="right child">right</div></div>.clearfix:after { content: "\00A0"; display: block; clear: both; line-height: 0;}.cl原创 2020-05-12 16:35:56 · 345 阅读 · 0 评论 -
element UI table 更换表头颜色
<el-table :data="gridData" border :header-cell-style="{background:'#eff3f6'}"> <el-table-column property="name" label="姓名" width="100" align="center"></el-table-column> <el-table-column property="phone" label="联系电话" wid原创 2020-05-11 16:02:17 · 3073 阅读 · 0 评论 -
英文单词和数字断行不折叠
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>英文单词和数字断行不折叠</title><style>p{width:200px;border:1px...原创 2020-04-27 11:25:38 · 191 阅读 · 0 评论 -
vue实现列表文字太长显示展开收起
<div class="content" v-for="(item, index) in evaluate" :key="index" > <div class="photo"> <img src="@/assets/15Qrg.png" alt=...原创 2020-04-17 11:50:24 · 3566 阅读 · 5 评论 -
css横向滚动列表
<ul class="video_list"> <li> <img src="@/assets/video.png" alt="视频展示页" /> <img src="@/assets/play.png" alt="播放"> </li> <li> <img src="@/a...原创 2020-04-13 16:43:39 · 1965 阅读 · 0 评论 -
移动端简单适配
// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值@function rem($px) { @return ($px / $vw_fontsize) * 1rem;}// 根元素大小使用 vw 单位$vw_design:...原创 2020-03-11 11:54:00 · 219 阅读 · 0 评论 -
CSS 的简写属性
工作中常会看到有人这样写CSSbackground-color: #000;background-image: url(images/bg.gif);background-repeat: no-repeat;background-position: top right;还有这样的:font-style: italic;font-weight: bold;font-size: .8...原创 2019-11-01 11:55:01 · 466 阅读 · 0 评论 -
css解决浏览器输入框记住账号密码后的背景色
谷歌chrome浏览器在用户登录记住密码之后通常会改变input框的背景色,这是每一个程序猿不想看到的事情,下面提出解决这个问题的方法之一:↓ ↓ ↓ css代码:input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !impor...原创 2018-07-03 15:21:16 · 7210 阅读 · 2 评论 -
高效整洁的 css 代码——css优化
css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则。css 优化的原则1、不影响页面的布局2、去掉不必要的样式3、合并相同的样式4、尽可能缩小样式的大小css 样式中常见的问题1、除 body 之外的样式重写了与 body 一样的样式,如:1 ...原创 2018-04-19 09:45:46 · 2301 阅读 · 0 评论 -
reset.css 重置浏览器的默认样式
@charset "utf-8";/*! * @名称:base.css * @功能:1、重设浏览器默认样式 * 2、设置通用原子类 *//* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */html { background:white; color:black;}/* 内外边距通常让各个浏览器样式的表现位置不同 */body,di...原创 2018-04-19 09:39:34 · 5504 阅读 · 2 评论 -
normaliz.css 浏览器公认重置样式
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css *//* Document ========================================================================== *//** * 1. Correct the li...转载 2018-04-13 11:13:45 · 536 阅读 · 0 评论 -
css font简写
一、字体属性主要包括下面几个font-family,font-style,font-variant,font-weight,font-size,fontfont-family(字体族): “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜);font-variant (字体变...原创 2018-04-17 16:27:12 · 2687 阅读 · 0 评论 -
css3动画效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet/less" type="text/css" href="css原创 2018-04-10 11:21:30 · 240 阅读 · 0 评论 -
Flex 布局教程:语法篇
一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器,必须加上-webkit前缀。.box{ dis...转载 2018-03-26 15:33:03 · 326 阅读 · 0 评论 -
Css实现单行文本、多行文本、截断
一、单行文本截断 text-overflow文本溢出经常用到的应该就是 text-overflow:ellipsis 了,只需轻松几行代码就可以实现单行文本截断。div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}二、-webkit-line-clamp 实现div { /......原创 2018-11-06 17:51:37 · 9921 阅读 · 0 评论 -
div css 数字字母不换行问题
div{ word-wrap: break-word; word-break: normal; }解决!原创 2018-11-26 14:23:11 · 1799 阅读 · 0 评论 -
CSS预处理器之sass的用法
学过css的肯定知道层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。CSS 是开放网络的核心语言之一,由 W3C规范 实现跨浏览器的标准化。CSS节省了大量的工作。 ...原创 2019-08-27 16:50:05 · 1237 阅读 · 0 评论 -
CSS书写规范和顺序
前言对于项目,那就是我们的亲儿子啊,作为一个前端菜鸟,面向用户就是将自己的儿子介绍给别人认识,肯定要让他白白净净,漂漂亮亮的啦,给别人一眼就喜欢上的感觉咯,哈哈哈~常在河边走,哪有不湿鞋,在我们编程的工程中,尤其是前端的同学,肯定少不了跟Css打交道,命名、缩写、书写顺序等都是有一定规范,这个规范可能来源于你、我、或者浏览器等不定向人群(这个规范是我瞎编的),今天自己整合收集,以及个人项目用到...原创 2019-08-15 17:39:56 · 394 阅读 · 0 评论 -
CSS垂直水平居中的几种方法
作为一个前端小猴子,不管是面试的时候还是工作中,我们都会或多或少的遇到“使用css居中”的效果,今天就写一篇关于css垂直水平居中的几种方法。栗子1:从最简单的水平居中开始margin: 0 auto;块级元素使用margin: 0 auto;可以在父元素的中间位置居中,不过要记得设置块级元素的宽高。HTML部分<div class="wrap"> <div c...原创 2019-08-19 15:16:44 · 838 阅读 · 0 评论 -
左图有文字的一些CSS样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...原创 2019-07-12 13:29:19 · 339 阅读 · 0 评论 -
css垂直布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name ="viewport" cont...原创 2019-07-02 16:32:28 · 3599 阅读 · 0 评论 -
移动端页面开发总结(随时扩展)欢迎补充
一、meta标签的相关知识1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />2、移动端页面设置视口宽度等于定宽(如640px...原创 2019-01-03 10:12:53 · 222 阅读 · 0 评论 -
移动端的垂直布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">原创 2018-03-20 13:36:30 · 556 阅读 · 0 评论 -
css绘制三角形
正三角形#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 倒三角形#triangle-dow...原创 2018-12-03 15:23:05 · 162 阅读 · 0 评论 -
iOS输入框和button圆角问题
/*1、解决ios下input[type="text"]圆角问题:*/border-radius:0;/* 2、解决ios下input[type="button"],button圆角问题:*/-webkit-appearance : none ;原创 2017-11-15 16:03:15 · 415 阅读 · 0 评论