css
heroboyluck
学习,睡觉,看电视,打游戏。
展开
-
Less 使用小结
less css预处理;基本使用:嵌套、变量定义;混合器使用;extend 关键字使用;原创 2020-09-19 01:37:09 · 345 阅读 · 0 评论 -
定位fixed,使得可点击元素不可点击问题解决
使用bootstrap做标签页,左侧栏需要自己加一点样式,使得退出item要始终处于最下方,设置:position:fixed; bottom:0;问题直接就脱离了父元素,背景都没有了,和其他元素中有空白,然后设置父元素:position:fixed;bottom:0;top:0;这样是好了,样式也统一了,可是各个item项却不能点击了,解决:父元素添加 z-ind原创 2017-08-02 19:43:27 · 9328 阅读 · 3 评论 -
bootstrap学习使用——快速入门
前言: 最近在学习了bootstrap后,立马就使用它重新做了某个项目的页面,不要多想,怎么才学bootstrap!我只是刚参加工作的新手,以前比较喜欢写原生的CSS样式以及JS方法,页面效果的实现,一般一个项目的页面做完需要好几天的时间,改了又改!再加上一些JS效果,功能方法部分也得一周的时间,在使用了boobstrap之后,重新做了页面,只花了两天!好吧,开始我的学习笔记吧。1. 栅格系原创 2017-08-05 23:23:13 · 1256 阅读 · 0 评论 -
CSS3 2D平移,旋转,缩放,倾斜
首先,我们先看一看效果: 在线演示四种最基本的转换:移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew),混合在一起做复杂变化知识梳理: 使用这些操作变化就要使用css属性 transform:translate(x,y);两个参数x,y ;可以是百分数(%),其他尺寸单位。一个参数没有效果。rotate(15deg);旋转度数,牵扯到另一个属性trans原创 2017-08-30 23:30:26 · 1902 阅读 · 0 评论 -
css选择符,属性设置
css选择符组合选择符 示例 含义 示例 含义 div p div后的所有p元素 div > p div的直接子元素 div + p 与div后同级紧邻的第一个p元素 div ~ p 与div后同级的所有p元素 [target] 选择带有target属性元素 [title~=flower] 选择标题属性包含单原创 2017-09-18 17:20:02 · 489 阅读 · 0 评论 -
CSS-Flex布局
Flex布局对于我们平常遇到的问题的解决方法。1.在父容器中的处置居中。2.使容器内的子项占据等量的空间(宽、高)。3.使容器内的列等高排列。在线查看Flex布局示例及其属性使用,效果展现:在线示例下面是各个属性的描述:.box{ display:flex;}设置容器的display属性为flex,如果是行内元素使用inline-flex.flex-direction...原创 2018-10-15 21:43:57 · 279 阅读 · 0 评论 -
CSS grid布局(一)
css grid 布局在线实例grid布局示例grid 基础使用 — 网格轨道定位放置元素网格布局,简单控制行、列。display:grid; // display:inline-grid;控制行、列的行为:grid-template-columns控制显示多少行;grid-template-rows控制显示多少列网格中的行、列 基本定义...原创 2019-01-28 00:16:19 · 568 阅读 · 0 评论 -
sass使用总结
参考:sass中文教程初步学习使用,更多的操作实例并未记录。CSS编写语法糖,提供了变量。安装单独安装使用,想深入学习,学习ruby使用变量声明、变量使用$标识变量,进行声明。作用域在{}包含的块内使用。$common-color:#000;div{ $common-bgcolor:#fff; // 只能在块内使用 background-color:$c...原创 2019-02-19 00:25:02 · 239 阅读 · 0 评论 -
文本超出处理、背景透明-文字不透明、图片适应处理
文本超出省略,显示...基本要素,有固定的宽度,文本会超出;设置文本超出后不换行;.box{ width:100px; height:30px; background:#000; color:#fff; line-height:30px; }.box p{ white-space:nowrap; // 或 white-space:pre;...原创 2019-07-11 22:56:12 · 188 阅读 · 0 评论