CSS
a_Joker_Ling
这个作者很懒,什么都没留下…
展开
-
CSS3新增选择器nth-child等
CSS3新增选择器1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素<style type="text/css"> .list div:nth-child(2){ background-color:red; }</style>......<div class="list">...原创 2020-04-14 08:35:48 · 2131 阅读 · 0 评论 -
js条件语句
条件语句通过条件来控制程序的走向,就需要用到条件语句。运算符1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)2、赋值运算符:=、 +=、 -=、 *=、 /=、 %=3、条件运算符:==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)注:===是为了解决==的bug例:<script t...原创 2020-04-13 21:57:40 · 307 阅读 · 0 评论 -
JavaScript函数
函数函数就是重复执行的代码片。函数定义与执行<script type="text/javascript"> // 函数定义 function fnAlert(){ alert('hello!'); } // 函数执行 fnAlert();</script>变量与函数预解析JavaScript解析过程分为两...原创 2020-04-13 20:10:28 · 119 阅读 · 0 评论 -
常用css列表
常用css列表color 设置文字的颜色,如: color:red;font-size 设置文字的大小,如:font-size:12px;font-family 设置文字的字体,如:font-family:‘微软雅黑’;font-style 设置字体是否倾斜,如:font-style:‘normal’; 设置不倾斜,font-style:‘italic’;设置文字倾斜...原创 2020-04-13 13:40:47 · 140 阅读 · 0 评论 -
流体布局,响应式布局
适配布局类型PC及移动端页面适配方法设备屏幕有多种不同的分辨率,页面适配方案有如下几种:1、全适配:响应式布局+流体布局2、移动端适配:流体布局+少量响应式基于rem的布局流体布局流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒...原创 2020-04-13 09:02:27 · 557 阅读 · 0 评论 -
CSS3 浏览器前缀,H5新增标签
浏CSS3 浏览器前缀览器样式前缀为了让CSS3样式兼容,需要将某些样式加上浏览器前缀:-ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safari比如:div{ -ms-transform: rotate(30deg); -webkit-transform: rotate...原创 2020-04-12 22:21:44 · 299 阅读 · 0 评论 -
CSS3 transform变换,案例
CSS3 transform变换1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示7、translateX、tr...原创 2020-04-12 20:16:00 · 360 阅读 · 0 评论 -
CSS3 animation动画,风车旋转、loading、人物走路动画案例
CSS3 animation动画1、@keyframes 定义关键帧动画2、animation-name 动画名称3、animation-duration 动画时间4、animation-timing-function 动画曲线 linear(匀速) | ease(缓冲) | steps(步数)5、animation-delay 动画延迟6、animation-iteration-co...原创 2020-04-12 19:44:40 · 1428 阅读 · 0 评论 -
CSS3 transition动画、案例
CSS3 transition动画1、transition-property 设置过渡的属性,比如:width height background-color2、transition-duration 设置过渡的时间,比如:1s 、500ms3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速) | ease(缓冲运动)4、transit...原创 2020-04-12 17:09:54 · 465 阅读 · 0 评论 -
CSS3圆角、rgba显示
CSS3圆角、rgbaCSS3圆角设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 此时为椭圆角border-top-left-radius:30px; 此时为正圆角同时分别设置四个角: border-radius:30px 60px 120px 150px; 此时为正圆角。设置四个圆角相同:border-radius:...原创 2020-04-12 13:41:36 · 214 阅读 · 0 评论 -
CSS权重
CSS权重CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。权重的等级可以把样式的应用方式分为几个等级,按照等级来计算权重1、!important,加在样式属性值后,权重值为 100002、内联样式,如:style=””,权重值为10003、ID选择器,如:#content,权重值为1004、类,伪类...原创 2020-04-12 12:56:40 · 88 阅读 · 0 评论 -
重置样式reset.css
重置样式reset.css/* 将标签默认的间距设为0 */body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{ margin:0; padding:0;}/* 去掉默认的小圆点 */ul{ list-style:none;}/* 去掉默认的下划线 */a{ text-decoration:none;}/* 设置不...原创 2020-04-11 22:46:46 · 394 阅读 · 0 评论 -
解决img标签图片下几像素空白的bug
解决图片下3像素空白的bug,为出现问题的img标签添加样式:.div img{ display:block;}原创 2020-04-11 21:28:25 · 391 阅读 · 0 评论 -
CSS-定位
定位文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。关于定位我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。a...原创 2020-04-11 19:34:01 · 165 阅读 · 1 评论 -
CSS浮动,清除浮动
浮动浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来3、相邻浮动的块元素可以并在一行,超出父级宽度就换行4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)5、浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字...原创 2020-04-11 19:18:03 · 125 阅读 · 0 评论 -
盒模型使用技巧及相关问题
margin相关技巧1、设置元素水平居中: margin:x auto;2、margin负值让元素位移及边框合并外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下:1、使用这种特性2、设置一边的外边距,一般设置margin-top3、将元素浮动或者定位margin-top 塌陷在两个...原创 2020-04-10 20:36:58 · 138 阅读 · 0 评论 -
css元素溢出
css元素溢出当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。overflow的设置项:1、visible 默认值。内容不会被修剪,会呈现在元素框之外。2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。3、scroll 内容会被修剪,但是浏览器会显示滚动条以便...原创 2020-04-11 18:58:15 · 182 阅读 · 0 评论 -
块元素、内联元素、内联块元素
块元素、内联元素、内联块元素元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。块元素块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:支持全部的样式如果没有设置宽度,默认的宽度为父级宽度100%盒子占据一行、即使设置了宽度内联元素内联...原创 2020-04-11 19:08:58 · 146 阅读 · 0 评论