![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
CSS学习
心刻
这个作者很懒,什么都没留下…
展开
-
CSS中间自适应的三栏布局
方式1:流体布局html代码 <div class="left"></div> <div class="right"></div> <div class="main"></div>css代码.left { float: left; width: 200px; height: 400px; background: skyblue;}.right { float: right;原创 2021-04-08 10:45:51 · 124 阅读 · 0 评论 -
多出的内容隐藏用省略号显示
CSS样式 width:420px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;原创 2021-03-05 17:06:25 · 379 阅读 · 0 评论 -
更换li列表里面图片图标的方法
方法1:用属性选择器优点,省了一个类名<ul class="local-nav"> <li> <a href="#" title="景点·玩乐"> <span class="local-nav-icon-icon1"></span> ...原创 2020-04-17 20:23:50 · 1834 阅读 · 0 评论 -
Less基础
维护 css 的弊端CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。CSS 需要书写大量看似没有逻辑的代码,CSS 冗余度是比较高的。不方便维护及扩展,不利于复用。CSS 没有很好的计算能力非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。Less 介绍Less (Leaner Style Sheets...原创 2020-04-10 15:38:30 · 154 阅读 · 0 评论 -
响应式简单介绍和Bootstrap简单介绍
响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:设备划分尺寸区间超小屏幕(手机)<768px小屏设备(平板)>= 768px ~ < 992px中等屏幕(桌面显示器)>= 992px ~ < 1200px宽屏设备(大桌面显示器)>=1200px...原创 2020-04-06 17:28:27 · 213 阅读 · 0 评论 -
CSS让整个网站变灰的做法
通过CSS3的滤镜来做html { /*1是灰度最高,0为原来的颜色*/ -moz-filter: grayscale(100%); -webkit-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-filter: grayscale(1); filter: grayscale(100%);}也可以加在bo...原创 2020-04-06 09:57:35 · 311 阅读 · 0 评论 -
rem布局与媒体查询
rem单位rem (root em)是一个相对单位,类似于em,em是相对父元素字体大小。div { font-size:12px;}p { //em相对于父元素的 字体大小 来说的 width:10em; // 10*12=120px height:10em; // 10*12=120px background:pink;}不同的是rem的基准是相对于html元素的字体大...原创 2020-04-05 21:24:48 · 304 阅读 · 0 评论 -
flex布局
传统布局与flex弹性布局传统布局兼容性好布局繁琐局限性,不能在移动端很好的布局flex弹性布局操作方便,布局极为简单,移动端应用很广泛PC 端浏览器支持情况较差IE 11或更低版本,不支持或仅部分支持flex布局中不会出现外边距合并的问题建议:如果是PC端页面布局,我们还是传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局布局原...原创 2020-04-04 17:35:49 · 189 阅读 · 0 评论