![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Bambi12
踏踏实实搞技术
展开
-
用户体验问题 关于按钮的显示和隐藏
根据不同的人的权限显示不同内容,顺序:先全部隐藏——>根据权限显示方法一:.disblock { display: none !important;}通过$("#useid").addClass("disblock ");和$("#useid").removeClass("disblock ");隐藏和显示内容。方法二:function displayHideUI()...原创 2018-10-08 14:23:20 · 402 阅读 · 0 评论 -
CSS3学习笔记(一)——关于CSS3
1、CSS3是什么? body{ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style:...原创 2018-12-03 16:48:09 · 183 阅读 · 0 评论 -
CSS3学习笔记(二)——边框
1、圆角效果 border-radiusbody{ border-radius:5px; /*所有圆角的半径均为10px*/ border-radius:1px 2px 3px 4px;/*按顺时针:左上、右上、右下、左下*/}2、阴影 box-shadowbody{ box-shadow:1px 2px 3px 4px red inset; ...原创 2018-12-03 17:28:02 · 218 阅读 · 0 评论 -
CSS3学习笔记(三)——颜色
1、alpha透明度参数body{ background-color:rgba(255,255,255,0.5);/*rgba(R,G,B,A)*/}2、渐变色彩 Gradient: 线性渐变(linear):向下/向上/向左/向右/对角方向 径向渐变(radial):由它们的中心定义线性渐变:默认从上到下...原创 2018-12-03 18:19:12 · 272 阅读 · 1 评论 -
CSS3学习笔记(四)——文字与字体
1、text-overflowtext-overflow:clip;/*表示剪切*/text-overflow:ellipsis;/*表示显示省略标记*/但如果用ellipsis,必须强制文本在一行内显示div{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }2、wor...原创 2018-12-03 19:05:17 · 161 阅读 · 0 评论 -
CSS3学习笔记(五)——与背景相关的样式
1、background-origin 设置元素背景图片的起始位置div{ width:100px; height:100px; border:1px solid red; padding:2px; background-origin:border-box | padding-box | content-box;/*默认值为padding-box*...原创 2018-12-03 21:27:03 · 166 阅读 · 0 评论 -
Select2 样式
(1)圆角设置:.select2-container .select2-selection--single { border-radius: 3px 3px;}原创 2018-11-22 16:06:11 · 7319 阅读 · 0 评论 -
CSS flex布局一(学习笔记)
一、背景Flexbox布局组件(2017年W3C的候选推荐)目标是在未知容器内项目大小或者动态的情况下,用一种更有效的方式对其进行布局、排列和分配空间。Flexbox背后的原理即是赋予容器可以改变其内部项目宽高及排列顺序以更好的填充可用空间的能力。二、基本概念flexbox是一套组件而不是一个单独的属性。采用flex布局的元素,称为flex容器(flex container,父元素),简称...原创 2019-03-20 19:32:24 · 206 阅读 · 0 评论 -
CSS flex布局二 (flex:1学习笔记)
flex:1;转载 2019-03-21 15:22:01 · 231 阅读 · 0 评论 -
CSS position属性、float属性
1、relative: 定义为relative的元素脱离正常的文本流,但其在文本流中的位置依然存在 无论父级存在不存在,无论有没有TRBL,均是以父级的左上角进行定位,但是父级的padding属性会对其影响(会以内容区域的左上角为原点,进行定位。)注: Top的值表示对象相对原位置向下偏移的距离,bottom的值表示对象相对原位置向上偏移的距离,两者同时存在时,只有Top起作用。 lef...转载 2019-03-18 10:39:14 · 209 阅读 · 0 评论 -
CSS 三栏布局
1、浮动布局 float<style>.container{ width:100%; height:100px; }.left{ width:250px; height:100%; background:red; float:left;}.right{ width:250px; height:100%; background:pink; float...转载 2019-03-21 18:12:26 · 352 阅读 · 0 评论 -
CSS3学习笔记(十五)——动画属性
div{ animation: name duration timing-function delay iteration-count direction fill-mode;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2018-12-05 15:15:47 · 220 阅读 · 0 评论 -
CSS3学习笔记(十四)——动画Keyframes
animation可以实现多组属性之间变换Keyframes被称为关键帧,在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。其中0%和100%还可以使用关键词from和to来代表,其中0%对应的是from,100%对应的是to。<!DOCTYPE html><html lang="en...原创 2018-12-04 19:08:41 · 342 阅读 · 0 评论 -
css和html的加载顺序
在做项目的时候,因为css东西太多就放在了html的下面,结果页面先加载出来了,没有样式,然后把css放在前面就ok了。总结:一般情况下,先加载css样式,再加载html...原创 2018-10-18 18:29:25 · 734 阅读 · 0 评论 -
CSS一些样式
1、自动换行.wrap{ width: 100%; //不要设置高度 word-wrap: break-word; word-break: break-all; //如果没有,当内容为数字和英文时,不能自动换行显示}2、垂直居中vertical-align: middle; 3、字体居中text-align:center;4、多余文字省略号显示.ellipsis...转载 2018-10-10 16:51:58 · 172 阅读 · 0 评论 -
CSS3学习笔记(六)——属性选择器
html:<a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我的title是more</a&a原创 2018-12-04 10:15:31 · 201 阅读 · 0 评论 -
CSS3学习笔记(七)——结构性伪类选择器
1、:root 根选择器,等同于<html>元素:root{ background:orange;}html{ background:orange;}/*代码效果相同*/2、:not否定选择器,可以选择除某个元素之外的所有元素input:not([type="submit"]){ border:1px solid red...原创 2018-12-04 11:25:03 · 301 阅读 · 0 评论 -
CSS3学习笔记(八)——UI元素状态伪类选择器
UI元素状态伪类选择器也是CSS3选择器模块组中的一部分,此类选择器主要运用于form表单元素上,用来提高网页的人机交互、操作逻辑以及页面的整体美观。1、:enabled和:disabled要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。<form action="#"> <div> <labe...原创 2018-12-04 14:27:18 · 469 阅读 · 0 评论 -
CSS3学习笔记(九)——UI元素状态伪类选择器 :checked
通过“:checked”状态来自定义复选框效果html<form action="#"> <div class="wrapper"> <div class="box"> <input type="radio" checked="checked" id="boy&quo原创 2018-12-04 14:32:16 · 750 阅读 · 0 评论 -
CSS3学习笔记(十)——UI元素状态伪类选择器 ::before和::after
<!DOCTYPE html><html lang="en"><head> <title>before&after</title> <style> .box h3{ text-align: center; position原创 2018-12-04 15:59:51 · 320 阅读 · 0 评论 -
CSS3学习笔记(十一)——UI元素状态伪类选择器 a标签的伪类选择器
:link 链接被访问之前样式:visited 链接被访问之后样式:hover 链接在鼠标悬停时样式:active 链接在鼠标被按下后样式注:尽量按以上顺序书写<!DOCTYPE html><html><head> <title>apseudo</title> <...原创 2018-12-04 16:01:37 · 294 阅读 · 0 评论 -
CSS3学习笔记(十二)——transform
1、旋转rotate()设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转2、扭曲skew()它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。3、缩放s...原创 2018-12-04 18:37:22 · 550 阅读 · 0 评论 -
CSS3学习笔记(十三)——transition动画
本质:是在一定时间之内,一组css属性变换到另一组属性的动画展示过程。 transition-property :要以动画展示哪些属性,可以使用all关键字 transition-duration:动画过程有多久 transition-timing-function:控制动画速度变化(linear,ease,ease-in,ease-out,ease-in-out,贝塞尔...原创 2018-12-04 19:05:10 · 206 阅读 · 0 评论 -
CSS display:table
概念display:table可以在div等标签中实现表格的效果display:table :相当于table标签display:table-row :相当于tr标签display:table-cell :相当于td标签应用1、利用display:table和display:table-cell让块级子元素垂直居中.box{ width: 200px; height: 200px...转载 2019-03-22 11:31:04 · 2361 阅读 · 0 评论