随笔分类 -  css

1 2 下一页
CSS中position属性的理解，相对位置relative，绝对位置absolute，固定fixed，页脚固定的实现2种方法
摘要：页脚固定的底部的两种方式： 1、使用fixed属性值 注意点：要给第一个div设置一个margin-bottom，要不会被fixed的div给覆盖，而使用相对位置绝对位置的则不要 效果图如下： 2、使用相对绝对位置 实现的效果图和使用fixed的一致，第一个的div的大小会自适应，但是bottom为 阅读全文
posted @ 2017-02-04 17:43 ^^-^^- 阅读(4183) 评论(0) 推荐(0)
css -- 布局元素
摘要：默认情况下拥有布局的元素：HTML ,table,tr,td,img,hr,input,select,textarea,button,iframe,embed,object,applet,marquee 设置以下css属性会自动让元素拥有布局：float，display：inline-block，w 阅读全文
posted @ 2016-06-13 23:48 ^^-^^- 阅读(148) 评论(0) 推荐(0)
css -- 元素消失的方法
摘要：元素从屏幕消失的方法: A:display:none B:opacity C:visibility D:text-intent:-10000em; E:margin可远可远了 F：position：absolute；left：-1000； G：transform：scale（0） H:height: 阅读全文
posted @ 2016-06-13 23:47 ^^-^^- 阅读(570) 评论(0) 推荐(0)
css -- 映像 ，分页（上一页下一页）
摘要：1、映像：-webkit-box-reflect:blow 2px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(0.52,transprent), to(white)); 2、对于页码的 阅读全文
posted @ 2016-06-13 23:35 ^^-^^- 阅读(1353) 评论(0) 推荐(0)
css -- 导航条
摘要：1、垂直导航条 HTML： 去除默认样式： 对a链接进行操作： 对最后一项a进行操作： 2、水平导航条 在1、垂直导航条的基础，对li进行左浮动 注意：当元素浮动的时候，它不再占据文档流中的任何空间，因此，父列表中实际没有东西，它就会收缩，从而掩藏列表背景。有几种办法可以让父元素包含子元素： A：添 阅读全文
posted @ 2016-06-13 23:03 ^^-^^- 阅读(220) 评论(0) 推荐(0)
css3 -- 过渡与动画
摘要：1、注意使用前缀 2、属性： transition-property：none/all/属性 3、持续时间： transition-duration：默认值是0，即使是负值，按照0进行处理 4、transition-timing-function：ease(默认值) / linear / ease- 阅读全文
posted @ 2016-05-29 14:27 ^^-^^- 阅读(181) 评论(0) 推荐(0)
css3 -- 2D变换
摘要：1、transform 2、旋转 原始的，转换前的元素会保持它在文档流中的位置，所以后续的所有元素都会受到它的影响，经过变换的元素并不影响页面的布局，但它会位于页面剩余部分之上的一个新层次上，这就意味着这个新的元素可以覆盖后续的元素 3、变换原点 4、平移 经过变换的元素会保留它本身的位置 5、倾斜 阅读全文
posted @ 2016-05-29 14:09 ^^-^^- 阅读(206) 评论(0) 推荐(0)
css3 -- 渐变
摘要：1、Firefox中的线性渐变 2、Webkit中的线性变化 3、Firefox中的放射渐变 其中shape使用一个关键字常量值，可以是circle或ellipse（默认值） 渐变开始点以及结束点，半径距离： inner-center与outer-center inner-radius与outer- 阅读全文
posted @ 2016-05-29 13:56 ^^-^^- 阅读(123) 评论(0) 推荐(0)
css3 -- 颜色与不透明度
摘要：1、opacity： opacity的值会被它的所有子元素继承，也就是说不可能让一个元素比他的父元素更加不透明，但你可以让他变得更透明点 Firefox Webkit Opera支持，注意IE 2、使用Alpha通道可以像其他任何颜色值一样被子元素继承，但元素的整体不透明度并不受影响，rgba值只能 阅读全文
posted @ 2016-05-29 11:39 ^^-^^- 阅读(265) 评论(0) 推荐(0)
css3 -- 背景图处理
摘要：1、多背景图片： 2、背景尺寸 contain -- 图片尽可能的放大，不超过包含元素的高度和宽度 cover -- 图片放大到包含元素的宽度或高度 3、背景剪裁和原点 设置背景开始计算的点 4、图片精灵（背景图剪裁） 5、图片遮罩 阅读全文
posted @ 2016-05-27 00:05 ^^-^^- 阅读(702) 评论(0) 推荐(0)
css3 -- 多列
摘要：1、指定分列： Firefox与webkit实现 2、动态分列 列的宽度其实不仅仅100，会根据950px进行一些调整 3、列间隔与分界线 4、处理跨越不只一列的元素 阅读全文
posted @ 2016-05-26 23:11 ^^-^^- 阅读(127) 评论(0) 推荐(0)
css3 -- 文本
摘要：1、坐标轴: 上左为负数 下右为正数 2、text-shadow 还可以负数实现 blur-radius 阴影范围 3、text-outline ：目前浏览器不支持 text-stroke属性与text-outline 一致，webkit浏览器支持。 4、文本限制溢出 text-overflow t 阅读全文
posted @ 2016-05-26 22:19 ^^-^^- 阅读(125) 评论(0) 推荐(0)
css3 -- 网页字体
摘要：1、@font-face规则 local--使用字体的真正名称 url--指向要使用的字体文件 format--指定字体类型 2、local不支持IE9以下 3、font-size-adjust：number Firefox number值是指小写字母X占总高度的比例 阅读全文
posted @ 2016-05-26 17:33 ^^-^^- 阅读(189) 评论(0) 推荐(0)
css3 -- 伪类与伪元素
摘要：伪类： 1、结构伪类 A：E ： first-child{} E ： nth-*（n）{} E ： first-*（even）{} E ： first-*（odd）{} B：nth-child 是根据其父元素中国子元素的总数进行计算 nth-of-type 是根据特定类型的子元素进行计数 nth-l 阅读全文
posted @ 2016-05-25 22:52 ^^-^^- 阅读(194) 评论(0) 推荐(0)
css3 -- 属性选择器
摘要：属性选择器： 1、CSS属性选择器 属性选择器E[attr="value"]{} 包含属性选择器E[attr~="value"]{} 2、CSS3的新属性选择器 任意属性选择器E[attr*="value"]{} 开始子串属性选择器E[attr^="value"]{} 结束子串属性选择器E[attr 阅读全文
posted @ 2016-05-25 22:20 ^^-^^- 阅读(143) 评论(0) 推荐(0)
css3 -- 媒体查询
摘要：媒体查询： 1、媒体查询优点：基于设备的属性检测设备，这样一来就不需要使用浏览器探测脚本，之后允许直接安装设备的功能去设定目标样式表，也就是说检测用户使用小屏幕的设备，css规则就会调整以适应该屏幕的尺寸，从屏幕上去除无关元素，提供更小的图片，让文本变得更加清晰 2、语法 @link元素调用,多种媒 阅读全文
posted @ 2016-05-24 18:32 ^^-^^- 阅读(269) 评论(0) 推荐(0)
css3 -- 浏览器支持
摘要：浏览器支持的前缀： 1、浏览器兼容前缀 2、支持所有IE浏览器 3、支持除IE外的所有浏览器 4、仅仅支持IE10 5、支持IE9 以下版本 阅读全文
posted @ 2016-05-24 17:57 ^^-^^- 阅读(293) 评论(0) 推荐(0)
CSS总结1
摘要：新增：修改placeholder样式 1、内联元素，定义上下边界不会影响到行高 2、只有普通文档流中块框的垂直空白变才会发生空白边叠加，行内框、浮动框或者定位框之间的空白框是不会叠加的 3、居中布局设计： 方式1：margin：0 auto； 方式2：使用定位和负值空白边让设计居中 /*将容器的左边 阅读全文
posted @ 2016-03-11 11:30 ^^-^^- 阅读(144) 评论(0) 推荐(0)
CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术
摘要：基于浮动的布局： 1、除非图片设置了宽度，否则始终应该要对浮动的图片设置一个宽度，这样可以让浏览器给其他内容腾出环绕的空间 2、当侧边栏的高度与主内容区的高度不一致的时候，可以用个margin进行调整 3、在一个非浮动元素<div>中存在一个浮动元素，当浮动元素高于元素本身的时候，内容就会溢出<di 阅读全文
posted @ 2016-01-04 22:23 ^^-^^- 阅读(977) 评论(0) 推荐(0)
CSS3-animation，表格表单的格式化
摘要：animation 1、与transition一样，animation在IE9之前都不支持，不仅如此，还需要大量的供应商前缀 2、定义关键帧：@内容中需要大量的前缀 @keyframes fadeIn（animationName） from{ } 50%{ } to{ } /*from起始关键帧，t 阅读全文
posted @ 2016-01-03 22:00 ^^-^^- 阅读(441) 评论(0) 推荐(0)

1 2 下一页