随笔分类 - css3
摘要：兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
阅读全文
摘要：RGBA颜色 red green blue alpha(透明) background:rgba(200, 54, 54, 0.5); ie不支持rgba 加上rgb颜色，然后加 filter:alpha(opacity=50); （会把文字也给透明了） 使颜色透明 不透明黑色： background
阅读全文
摘要：columns 分栏 值：column-width:设置每列的宽度 column-count:设置列数 例：columns{200px 3} 列数和宽度固定 columns{200px} 列宽固定，根据容器宽度动态分布列数 column-width 默认auto,定义列宽，不能为负值 column-
阅读全文
摘要：transformtransform的中文翻译就是变换，改变，改观，转换的意思 在css中的主要作用就是对一个div或元素进行样式的改变。 他的属性（变换方式）有：平移，旋转，缩放，扭曲translate(10px,20px;) 指定对象的2D平移，第一个参数对应X轴，第二个参数对应Y轴。如果第二个
阅读全文
摘要：经典的两个布局方式有圣杯布局和双飞翼布局，圣杯布局主要用在国外，双飞翼布局是淘宝的UED团队开发的，优化了圣杯布局。 主要解决页面分不同列显示的问题， 一般只做页面的时候，我们分三部分，左边，中间，右边，但是浏览器加载页面时，是从上到下加载，但我们需要先加载中间部分，这个时候就需要我们好好布局了，
阅读全文
摘要：transition 它的中文翻译就是过渡，转变，变迁，在css中，用来设置元素或对象变换时的过渡。 由一个样式变成另一个样式的过程。 他有四个值： transition-property 设置对象中参与过渡的属性 transition-duration 设置对象过渡的持续时间 transition
阅读全文
摘要：animation 设置对象的动画特效 有6个主要的值 animation-name 动画名称 animation-duration 动画持续时间 animation-timing-function 动画过渡类型 linear:线性过渡 ease:平滑过渡 ease-in:由慢到快 ease-out
阅读全文
摘要：1.雪碧图 2.滑动门 3.css3渐变背景 background-size: 设置背景图片大小。数值px 百分比 cover(拉伸) contain等关键字 background-repeat: 背景图重复 no-repeat repeat-x repeat-y background-positi
阅读全文
摘要：弹性盒模型（Flexible Box或Flexbox）是一个css3新增布局模块， 官方称为CSSFlexible Box Layout Module,用于实现容器里项目的对其、方向、排序。 弹性盒模型最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。 1.弹性容器（
阅读全文
摘要：<style> .container{ column-width:250px; -webkit-column-width:250px; column-gap:5px; -webkit-column-gap:5px; } .container div{ width:250px; margin:5px
阅读全文
摘要：<h1>极客学院相关课程</h1> <table class="responsive"> <thead> <tr> <th>课程序号</th> <th>课程名称</th> <th>课程操作</th> </tr> </thead> <tbody> <tr> <td class="number">150
阅读全文
摘要：响应式布局（responsive web design）指的是在网页开发过程中针对不同设备开发一套网站，然后根据用户行为 以及设备环境（系统平台、屏幕尺寸、屏幕定向等）自适应地显示不同布局。 响应式布局的核心是媒体查询。媒体查询（media query）是获取用户行为和设备环境、然后提供相应的css
阅读全文
摘要：background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 把图片设置为背景 background-position 设置图片的起始位置 background-repeat 设置背景图
阅读全文
摘要：响应式图片指用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。 同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。 常用的实现方式： 1.用srcset和sizes加载不同图片 <img sizes="(min-width:40em) 80vw, 100vw" sr
阅读全文
摘要：css文字属性定义文本的字体系列，大小，加粗，风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style 设置字体的风格 font-variant 以小型大写字体或正常字体显示文本 font-weight 设置字体的粗细 css3文字相关样式 1.给文
阅读全文
摘要：css列表属性允许你放置，改变列表标志，或者将图像作为列表项标志 list-style 简写列表项 list-style-image 列表项图片 list-style-position 列表标志位置 （inside outside）一个靠里面，一个靠外面 list-style-type 列表类型
阅读全文
摘要：1.css链接的四种状态 a:link 普通的、未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方 a:active 链接被点击的时刻 2.常见的链接样式： text-decoration 属性大多用于去掉链接中的下划线 3.设置背景颜色： backgrou
阅读全文
摘要：1.表格边框 table,tr,th,td{ border:1px solid #666; } 2.折叠边框 table{ /*合并边框*/ border-collapse : collapse; } 3.表格宽高 table{ width:600px; height:400px; } 4.表格文本
阅读全文
摘要：css轮廓主要是用来突出元素的作用 outline 设置轮廓属性 outline-color 设置轮廓的颜色 outline-style 设置轮廓的样式 outline-width 设置轮廓的宽度
阅读全文
摘要：css定位（改变元素在页面上的位置） 普通流：元素按照其在html中的位置顺序决定排布的过程 浮动： 绝对布局： position 把元素放在一个静态的、相对的、绝对的、或固定的位置中 static(偏移量不起作用) relative absolute fixed top 元素向上的偏移量 left
阅读全文