CSS学习笔记
没有沫沫的泡泡
活到老,学到老。。。。。。
展开
-
css-列表图标兼容性
ul{list-style-image: url('pic.gif');}对于ul 的li的标记图形自定义化图形后,浏览器兼容问题就出来了:这段代码的使用在所有浏览器中显示并不相同,IE和Opera显示图像标记比火狐,在Chrome和Safari浏览器上更高一点点。。。。。。解决办法如下:ul{list-style-type: none;padding: 0原创 2017-03-17 20:14:55 · 474 阅读 · 0 评论 -
css-选择器大汇总
1、*(清空选择器 / 通用选择符)::兼容性----IE6+、Firefox、Chrome、Safari、Opera2、#X(ID选择器)::兼容性----IE6+、Firefox、Chrome、Safari、Opera3、.X(类选择器)::兼容性----IE6+、Firefox、Chrome、Safari、Opera4、X Y(后代/descendant选择器)::兼容性---原创 2017-03-21 16:45:10 · 265 阅读 · 0 评论 -
css-响应Web设计-img
使用 width 属性如果 width 属性设置为 100%,图片会根据上下范围实现响应式功能:img { width: 100%; height: auto;}注意:图片可能会比它的原始图片大。我们可以使用 max-width 属性很好的解决这个问题。使用 max-width 属性如果 max-width 属性设原创 2017-03-20 23:06:15 · 348 阅读 · 0 评论 -
css-响应Web设计3
加上其他的设备的情况,即多加一个断点:/* For mobile phones: */[class*="col-"] { width: 100%;}@media only screen and (min-width: 600px) { /* For tablets: */ .col-m-1 {width: 8.33%;} .col-m-2 {原创 2017-03-20 22:23:34 · 215 阅读 · 0 评论 -
css-响应Web设计2
为移动端优先设计移动端优先意味着在设计桌面和其他设备时优先考虑移动端的设计。这就意味着我们必须对 CSS 做一些改变。我们在屏幕小于 768px 进行样式修改,同样在屏幕宽度大于 768px 时也需要修改样式。以下是移动端优先实例:/* 为移动端设计: */[class*="col-"] { width: 100%;}@media only s原创 2017-03-20 22:20:48 · 217 阅读 · 0 评论 -
css-响应Web设计1
如何理解[class*="col-"] ??这个是正则的css 比如class*="col-",表示所有css以col开始的都使用这个规则,由于bootstrap里面很多cssname=col-xxx-xxx 所以这个css是为了定义所有col-xxx-xxx的规则的* { box-sizing: border-box;}.row原创 2017-03-20 20:34:06 · 250 阅读 · 0 评论 -
css-属性选择器
①属性选择器[title]{color:blue;}②属性和值选择器[title=w3cschool]{border:5px solid green;}③属性和值的选择器 - 多值[title~=hello] { color:blue; } Hello world Hello CSS students![lan原创 2017-03-20 18:27:40 · 267 阅读 · 0 评论 -
css-opacity
示例;img{opacity:0.4;filter:alpha(opacity=40);/* For IE8 and earlier */}原创 2017-03-20 16:31:36 · 226 阅读 · 0 评论 -
css-对齐
水平对齐:使用margin-left:auto;margin-right;auto;注意:宽度100%无效果,另外对于IE-5,使用text-align:left,不然每行文字有可能处于居中效果左右对齐:position:absolute;left : 0 ;/ right : 0;注意:absolute跳出文档流,可覆盖其他页面元素 floa原创 2017-03-20 15:28:40 · 245 阅读 · 0 评论 -
css-anchor
顺序如下:a:link {color:#FF0000;} /* 未访问的链接 */a:visited {color:#00FF00;} /* 已访问的链接 */a:hover {color:#FF00FF;} /* 鼠标划过链接 */a:active {color:#0000FF;} /* 已选中的链接 */原创 2017-03-20 15:38:59 · 674 阅读 · 0 评论 -
css-display/visibility
有如下两种方式:display:none或visibility:hidden结果截然不同:前者属于消失的状态,不占用网页空间; 后者只是处于透明状态,看不见,但是占空间;原创 2017-03-17 23:46:12 · 249 阅读 · 0 评论 -
css-position
Static 定位HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。Fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动;注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.Fixed原创 2017-03-17 23:55:07 · 231 阅读 · 0 评论 -
css- : first-letter
:first-letter选择器用来指定元素第一个字母的样式。:first-letter是伪元素,它生成包含元素的第一个字母的伪元素。:first-letter样式是元素的第一个字母。任何引导标点符号都应与第一个字母一起设置样式。在CSS2.1之前,:first-letter可以只附加到块级元素。CSS2.1扩展其范围,包括块,列表项,表调用,表标题和内联块元素原创 2017-03-20 15:54:01 · 906 阅读 · 0 评论