CSS / Less
关注
分享
扫一扫
文章平均质量分 86
前端开发黑子Kuroko
热爱前端开发，不常看消息，有事卫星联系：mnikay
展开
-
【问题记录】html双横杠换行问题，white-space的重要性
css处理换行的几个方法原创 2023-03-15 18:10:03 · 917 阅读 · 1 评论 -
【解决方案】display: box; 盒子布局无效的问题
例子如下css：.find_nav_list ul {display: -moz-box;display: -webkit-box;display: box; }.find_nav_list ul li {display: block; -moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1; } PS：注意此处盒子模型虽然是...原创 2017-07-24 17:24:41 · 1278 阅读 · 0 评论 -
【解决方案】子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
重点： 给父容器的CSS添加一个 overflow 属性， overflow:hideen; -------------------------------------------------------------------------------------以下为转载内容--------------------------------------------------------...转载 2017-08-09 10:02:04 · 1365 阅读 · 0 评论 -
CSS 选择所有子元素添加样式
方法：> *以实际项目中less为例：.lk-toolbar { .el-input { width: 169px; margin-right: 10px; } > * { margin-bottom: 20px; }}上面代码成功实现了 .lk-toolbar 下一切子元素的 margin...原创 2018-09-26 20:40:15 · 47487 阅读 · 1 评论 -
rem的正确使用姿势 -- 完美解决H5页面不同尺寸屏幕的适配问题
实例代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>废土坱行&a原创 2018-10-13 15:46:26 · 10569 阅读 · 1 评论 -
CSS书写规范
一、CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(...转载 2018-07-31 13:54:07 · 349 阅读 · 0 评论 -
A4打印时宽高mm对应像素px
A4纸大小：201mm*297mm对应的像素：794px*1123px所以 1mm = 3.78px原创 2018-01-10 17:38:36 · 28819 阅读 · 1 评论 -
网页布局基础--简介
CSS盒子模型的4个属性：border（边框）、margin（外边距）、padding（内边距）、content（内容）。 CSS布局模型主要有3种：流行模型、浮动模型、层模型。换言之，CSS中3种定位机制：标准文档流、浮动、绝对定位。 一、标准文档流normal flow，这是默认的网页布局模式。如何实现网页的自动居中： body{width:700p...原创 2016-03-14 14:19:02 · 920 阅读 · 0 评论 -
网页制作：一个简易美观的登录界面
这次来总结一下公司的Task 1 实现一个登录界面。登录界面其实在大三的时候就有做过，但是当时做的界面超级low，主要区别在于有无css，由于公司的设计要求，对于该界面的很多细节处理实在不容易。所以，还是想要写点东西记录一下。先截个图，展示一下效果吧：然后我们看一下代码：在我们做一个页面之前，要先想好他的一个整体布局，也就是我们这里面的login.html主页面，大致结构如...原创 2016-03-09 17:22:59 · 175546 阅读 · 45 评论 -
css 文本超出就隐藏并且显示省略号
一行的情况overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行 两行的情况overflow: hidden;text-overflow: ellipsis;display:-webkit-box; //作为弹性伸缩盒子模型显示。-webkit-bo...转载 2018-11-22 13:40:49 · 488 阅读 · 0 评论 -
项目中安装 less 和 less-loader 命令
npm命令如下：npm install less less-loader --save-dev或者 yarn命令如下：yarn add less less-loader --dev建议安装在本地依赖，没必要装全局环境，安装成功后 package.json 如下： 要安装全局的话，直接参考less官网： ...原创 2019-01-03 17:05:28 · 64762 阅读 · 1 评论 -
footer位置的自动适配（主内容不足一屏时显示在最底部，超出一屏时跟随主内容显示）
直接上自测可行的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...原创 2019-04-29 09:20:57 · 1906 阅读 · 4 评论 -
【解决方案】禁止手机页面中A标签长按弹出路径框
给a标签设置CSS：-webkit-touch-callout: none; ps：关于Label不可选中文本的css: -webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Chrome/Safari/Opera */-moz-user-select: none; /* Fi...转载 2017-07-31 16:23:39 · 2205 阅读 · 0 评论 -
css限制显示字数，文字长度超出部分用省略号表示
直接放关键代码： #bookName{ white-space:nowrap; /*文本不换行*/ text-overflow:ellipsis;/*设置超出部分显示...*/ -o-text-overflow:ellipsis; overflow: hidden;} ------------------------------------------------...原创 2016-07-14 13:07:26 · 5593 阅读 · 0 评论 -
CSS中关于多个class样式设置的不同写法
html中： <div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式 <div class="containerB"> 这是BBBBBBBBBBBBBBBBBBBBBB样式 </div> </div> css中： .containerA .containerB...原创 2016-04-14 10:17:02 · 24109 阅读 · 1 评论 -
自定义滚动条样式
参考：用CSS美化你的滚动条自定义浏览器滚动条的样式 看一下效果图：看一下代码： <body><div class="container"> <p> test text test text test text test text test text test text test text test text...转载 2016-04-11 17:07:59 · 802 阅读 · 0 评论 -
css中如何修改鼠标光标（指针）的样式和颜色
今天在开发过程中遇到一个问题，如下：我的输入框的背景比较暗导致鼠标的指针（系统默认为黑色）停留在那也看不清楚。上网查了一下，全是关于修改鼠标指针样式的，而没有颜色的教程。那么，我在这里先简单地记一下修改样式的方法吧：如果要自定义指针的图形的话，你可以导入自己的图片，方法就是：cursor: url("小图片地址")好了，即使我该了样式，但是我发现光标停在输入框中闪烁...原创 2016-03-30 11:14:21 · 21029 阅读 · 0 评论 -
CSS盒子模型的宽度和高度如何理解
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。 因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 元素的高度也是同理。比如：css代码：div{ width:200px; padding:20px; ...转载 2016-02-26 10:50:21 · 9102 阅读 · 0 评论 -
CSS3 -webkit-transition(属性渐变)
-webkit-transition：CSS属性(none|all|属性) 持续时间 时间函数 延迟时间CSS属性(transition-property)：要变化的属性，比如元素变宽则是width，文字颜色要变色这是color；W3C给出了一个可变换属性的列表：除了以上属性外，还有CSS3中大放异彩的css3变形，比如放大缩小，旋转斜切，渐变等。该取值还有个强大的“all”取值，表示上...转载 2016-11-22 14:50:38 · 4584 阅读 · 0 评论 -
【解决方案】CSS 给 label 设置宽高无效
如图，我的代码是这样的：html中： <label class="statusCheck0">订</label> <label class="statusCheck1">馆</label> css中：.statusCheck0 , .statusCheck1{ color: white; widt...原创 2016-10-23 12:07:25 · 10014 阅读 · 0 评论 -
修改checkbox样式
效果如下：点击之后：代码如下： <span style="font-size:14px;"><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>testCheck</title&g原创 2016-11-08 21:40:16 · 9819 阅读 · 0 评论 -
CSS设置元素垂直居中的几种方法
.center1 { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;}.center2 { position: absolute; left: 0...原创 2017-03-22 09:45:50 · 640 阅读 · 0 评论 -
【解决方案】去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
1、使用Chrome的都知道，当鼠标焦点在input、textarea这些元素上时，Chrome默认的会给它们加上黄色的边框，我以前一直以为这是chrome的特性，没法去掉，原来是css的效果，outline这个属性。 你可以用下面的css代码去掉所有元素的边框： *:focus { outline: none; } 用下面的代码去掉你要去掉的元素的边框： .nohig...转载 2017-03-22 17:25:03 · 7389 阅读 · 2 评论 -
CSS 禁止文字选中
现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。原因：鼠标点快了。解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。body{-moz-user-select: none; /*火狐*/-webk...转载 2017-03-23 11:19:51 · 1187 阅读 · 0 评论 -
CSS3动画入门 CSS动画如何使用（举例说明）
本文直接通过代码演示及注释初步了解一下CSS2动画的使用。演示效果可以直接拷贝代码运行一下即可~另外推荐几个不错的动画网站：Animate.cssAnimista动画工具 动画演示 .test { width: 200px; height: 28px;原创 2017-03-27 13:18:33 · 1417 阅读 · 0 评论 -
CSS3阴影 box-shadow的使用和技巧总结
本文转自：http://blog.csdn.net/freshlover/article/details/7610269 text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius...转载 2016-05-18 16:12:30 · 1005 阅读 · 0 评论