CSS学习笔记
关注
分享
扫一扫
文章平均质量分 67
chen106106
这个作者很懒，什么都没留下…
展开
-
CSS的Position 4个值的详解
CSS的Position 4个值的详解 CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，力求让您看完本文后对position有着最全面的认识。position的四个属性值： relative absolute fixed static...原创 2011-11-02 15:11:29 · 209 阅读 · 0 评论 -
css table ellipsis 用法
text-ellipsis:ellipsis; 主要用来控制文本超过指定的内容宽度后超过部分以...省略号的形式显示 需要注意的几点 1、应该设置表格的table-layout:fixed;，默认是auto ，浏览器会根据单元格里面的内容多和少自动扩展单元格的宽和高， 如果设置了，那么浏览器就会按照我们指定的宽度显示内容。 2、设置容器的宽度 3...原创 2013-01-08 18:31:25 · 672 阅读 · 0 评论 -
基于display显示的表格
当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。网页元素应用上那些与表格相关的display属性值后，能够模仿出...原创 2013-01-08 17:03:06 · 1058 阅读 · 0 评论 -
css3 圆角，阴影，转换，移动，缩放简单示例用法
下面的代码只可以在chrome浏览器下运行才看到效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/199...原创 2012-08-26 10:56:01 · 95 阅读 · 0 评论 -
只用css 实现下拉导航栏
主要用的知识是css中的hover伪类，当鼠标放停在父导航栏上的li元素时候，我们就修改子菜单下面的ul的display属性，这样就可以实现hover的效果了。 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charse...原创 2012-12-02 21:00:17 · 161 阅读 · 0 评论 -
chrome div 百分比 高度 宽度 无效
chrome下div设置百分比高度失效 只能用px解决.div1 {height:50%}原因是因为div没有参照对象给定body的百分比即可body{height:100%;width:100%}原创 2012-11-22 13:08:38 · 406 阅读 · 1 评论 -
IE下css常见的问题
1、双边距问题 #mydiv{float: leftmargin-left: 100px}在ie6下这个div的左边距和普通的浏览器不同，他会是200px 修复这个问题： 加一个属性 display:inline; 2、IE下面的hasLayout问题 div#box{ background: red; filte...原创 2012-08-15 10:54:17 · 75 阅读 · 0 评论 -
CSS3 Transition
上一节花了大篇幅整理了CSS3中动画属性中的Transform，今天我们接着一起来看CSS3动画属性中的另一个属性Transition。W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动...原创 2012-08-14 17:46:06 · 127 阅读 · 0 评论 -
圣杯布局
1、首先我们需要一个简单的html结构来完成我们的的实验 标准的3列的布局模式，左边列（left column） 的宽度是200px，右边宽度的是150px ，中间的宽度是100% <body> <div id="head"> <h1>head</h1> </div> <..原创 2012-08-14 17:28:57 · 73 阅读 · 0 评论 -
渐进增强式布局探讨（上）
来看一个经典的三栏布局：从内容出发（渐进增强的核心思想），一份合理的HTML结构如下：<div id="page"> <div id="hd"></div> <div id="bd"> <div class="main"><原创 2012-08-14 16:07:46 · 82 阅读 · 0 评论 -
IE下margin:0 auto不居中解决方法
正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。 解决方法一可以是对网页主体<body>声明文本居中，即body{text-align:center}即:<style type="text/css">body{text-align...原创 2012-11-16 10:06:08 · 194 阅读 · 0 评论 -
responsive designs
响应式布局主要用来当遇到不同屏幕大小的时候，我们的网页还可以以比较友好的方式显示给用户。主要有4中类型的屏幕， 1、宽屏的台式机 2、便携式的笔记本 3、平板电脑 4、智能手机 下图是不同设备中同一个网页的不同显示效果 响应式布局主要用到的css中media query，它可以判断当前屏幕的尺寸。 有关css media ...原创 2013-04-18 18:28:30 · 278 阅读 · 0 评论 -
css 布局居中显示 absolute + relative
常用的页面的布局方式一般是固定页面的宽度居中显示，高度自适应，下面的代码就是一个居中显示的例子。固定宽度居中显示 1 通过 设置margin : 0 auto ；width:998px； 还一种方式是 position:absolute;left:50%;margin-left: -494px; 这里设置的宽度应该是你页面设置的宽度的一半，这样也可以实现居中显示的效果。 下面是一...原创 2012-07-30 11:19:32 · 191 阅读 · 0 评论 -
clear 清除浮动问题
div:after{clear:both; content:'.' height:0; visibility:hidden; diplay:block;}只能清楚ff这样的标准浏览器的浮动，ie不可以，这个方法也不完整，你的clear也不那么完美.cleardiv{clear:both;*display:inline;overflow:hidden;}.clear{zoom:1;}...原创 2012-07-19 15:41:19 · 172 阅读 · 0 评论 -
css3 animation 学习
css3中可以实现动画效果，主要是通过css3中新增加的属性(transform , transition,animation )来完成。 他们的详细解释可以参考 W3CSCHOOL 下面是效果图： 类似于tab选项卡，当点击某个input的时候，就以动画的效果来显示对应的内容区域。 <html lang="zh" ><head...原创 2013-03-08 18:25:06 · 114 阅读 · 0 评论 -
css color keyword
css2.1 规范中定义的颜色关键字总共有 17种,总结了一下，以便于我们在项目种进行合理颜色搭配的选择。 keyword 16进制值aqua #00ffff 浅绿色 black #000000 黑色 blue #0000ff 蓝色fuchsia #ff00ff 紫红色 gray #80...原创 2013-01-24 13:34:36 · 164 阅读 · 0 评论