css
关注
分享
扫一扫
woshidamimi0
这个作者很懒，什么都没留下…
展开
-
css设置元素样式隔行变色
通过使用nth-child这个css3的选择器可以很方便的实现隔行变色odd表示选中奇数行even表示选中偶数行<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...原创 2019-10-14 08:21:41 · 5041 阅读 · 0 评论 -
css3怎样设置div边框圆角 怎样把div变成圆形
如果没有设置圆角则会显得比较方正通过设置border-radius可以让边角变得圆润如果设置border-radius为50%则可以让宽高相等的div变成圆形当然也可以设置某一部分，比如border-top-left-radius设置左上角...原创 2019-08-31 14:18:04 · 30901 阅读 · 0 评论 -
css 怎样给div下拉菜单添加过渡动画效果
css transition可以让元素的属性在变化的时候有一些动画效果比如高度从30变成300,这样就会让人机交互更自然，比如鼠标经过下拉菜单显示之类的通过transition可以给指定属性添加动画效果请看代码transition: all 表示所有属性，当然，你可以根据自己需要指定某些属性，比如width500ms表示的是从开始到结束过渡的时间<!DOCTYPE html&...原创 2019-08-17 13:50:13 · 7476 阅读 · 0 评论 -
flex布局怎样让div居中
用flex布局可以让div或者其他元素居中请看代码可以设置div的display属性为flex，然后设置align-items：center; justify-content:center;即可居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2019-08-24 17:07:46 · 9435 阅读 · 0 评论 -
html css怎样让div居中
很多时候我们都需要div居中用css3的transform属性即可让div居中如代码所示先设置子元素的margin-top和margin-left为50%接着用transform的translate来移动子元素为-50%translate相对的是元素本身进行移动，这样移动-50%（元素宽度的一半）即可居中了不过因为新特性，所以兼容性不好，如果考虑IE的话，慎重使用<!DO...原创 2019-08-16 14:28:45 · 4787 阅读 · 0 评论 -
HTML css怎样设置文字溢出变省略号
单行文字有时候需要把多余的文字变成省略号注意，此方法只可以设置单行文字溢出省略需要设置文字容器的宽高，然后设置line-height跟高度一样，这样可以更美观接着设置white-space:nowrap，让文字不换行，然后设置溢出隐藏，以及设置文本溢出省略<!DOCTYPE html><html lang="en"><head> &...原创 2019-08-24 17:06:23 · 908 阅读 · 0 评论 -
使用table-cell让div居中
给父元素设置display:table-cell，并设置vertical-align:middle然后设置子元素的margin-left和margin-right为auto即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name...原创 2019-08-24 16:59:34 · 968 阅读 · 0 评论 -
什么是css盒模型
css盒模型指的是元素的margin padding border content属性盒模型一般分为两种 ie和w3cie的盒模型 元素的width = content + border + paddingw3c width = cotent比如这里我们设置了width:200px,但是如果是ie渲染的话，那么content内容占的宽度就没有200px,可以通过box-sizin...原创 2019-07-14 16:43:16 · 304 阅读 · 0 评论 -
让网页标签元素的文字不被选中
今天用vue发觉文字被选中时会有一些坑，可以用这个c3属性user-select: none;这样就可以设置文字不被选中了。这个属性默认是text,也就是可以选中。但是ie支持不是特别好如果要兼容ie低版本可以用onselectstart来设置<div onselectstart="javascript:return false;">我是内容，不可以选我哦</...原创 2018-08-21 10:44:08 · 2273 阅读 · 0 评论 -
微信小程序循环数据
新建一个页面在JS中写数据然后在wxml文件用wx:for来循环，items跟之前写的data里面的数据保持一致。而item则是循环之后保存数据的对象。默认就是item。用它即可取值。然后即可看到循环结果。默认的下标变量名叫index。这样即可取得值和下标了...原创 2018-06-10 17:52:45 · 3922 阅读 · 0 评论 -
css3旋转
html lang="en">head>meta charset="UTF-8">meta name="viewport" content="width=device-width, initial-scale=1.0">meta http-equiv="X-UA-Compatible" content="ie=edge">title>Documenttitl原创 2018-01-12 12:32:54 · 180 阅读 · 0 评论