responsive designs

响应式布局主要用来当遇到不同屏幕大小的时候,我们的网页还可以以比较友好的方式显示给用户。主要有4中类型的屏幕,   1、宽屏的台式机   2、便携式的笔记本   3、平板电脑   4、智能手机     下图是不同设备中同一个网页的不同显示效果     响应式布局...

2013-04-18 18:28:30

阅读数 10

评论数 0

css3 animation 学习

  css3中可以实现动画效果,主要是通过css3中新增加的属性(transform , transition,animation )来完成。   他们的详细解释可以参考 W3CSCHOOL   下面是效果图:     类似于tab选项卡,当点击某个input的时候,就以动画的...

2013-03-08 18:25:06

阅读数 9

评论数 0

css color keyword

  css2.1 规范中定义的颜色关键字总共有 17种,总结了一下,以便于我们在项目种进行合理颜色搭配的选择。   keyword        16进制值 aqua       #00ffff  浅绿色 black      #000000  黑色  blue       #0...

2013-01-24 13:34:36

阅读数 8

评论数 0

css table ellipsis 用法

  text-ellipsis:ellipsis; 主要用来控制文本超过指定的内容宽度后超过部分以...省略号的形式显示   需要注意的几点   1、应该设置表格的table-layout:fixed;,默认是auto ,浏览器会根据单元格里面的内容多和少自动扩展单元格的宽和高,   ...

2013-01-08 18:31:25

阅读数 21

评论数 0

基于display显示的表格

  当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于tab...

2013-01-08 17:03:06

阅读数 9

评论数 0

只用css 实现下拉导航栏

主要用的知识是css中的hover伪类,当鼠标放停在父导航栏上的li元素时候,我们就修改子菜单下面的ul的display属性,这样就可以实现hover的效果了。     <!DOCTYPE HTML> <html&a...

2012-12-02 21:00:17

阅读数 13

评论数 0

chrome div 百分比 高度 宽度 无效

chrome下div设置百分比高度失效 只能用px解决 .div1 {height:50%} 原因是因为div没有参照对象 给定body的百分比即可 body{height:100%;width:100%}

2012-11-22 13:08:38

阅读数 14

评论数 0

IE下margin:0 auto不居中解决方法

正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF、Chrome里能居中,而在IE678里不居中的现象。   解决方法一 可以是对网页主体<body>声明文本居中,即bo...

2012-11-16 10:06:08

阅读数 6

评论数 0

css3 圆角,阴影,转换,移动,缩放简单示例用法

下面的代码只可以在chrome浏览器下运行才看到效果   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3...

2012-08-26 10:56:01

阅读数 7

评论数 0

IE下css常见的问题

  1、双边距问题   #mydiv{ float: left margin-left: 100px } 在ie6下这个div的左边距和普通的浏览器不同,他会是200px   修复这个问题:   加一个属性  display:inline;     2、IE下面的has...

2012-08-15 10:54:17

阅读数 8

评论数 0

CSS3 Transition

上一节花了大篇幅整理了CSS3 中动画属性中的Transform ,今天我们接着一起来看CSS3 动画属性中的另一个属性Transition 。 W3C 标准中对css3 的transition 这是样描述的:“css的transition 允许css的属性值在一...

2012-08-14 17:46:06

阅读数 6

评论数 0

圣杯布局

1、首先我们需要一个简单的html结构来完成我们的的实验   标准的3列的布局模式,左边列(left column) 的宽度是200px,右边宽度的是150px ,中间的宽度是100%   <body> <div id=...

2012-08-14 17:28:57

阅读数 8

评论数 0

渐进增强式布局探讨(上)

来看一个经典的三栏布局: 从内容出发(渐进增强 的核心思想),一份合理的HTML结构如下: <div id="page"> <div id="hd&q...

2012-08-14 16:07:46

阅读数 7

评论数 0

css 布局居中显示 absolute + relative

常用的页面的布局方式一般是固定页面的宽度居中显示,高度自适应,下面的代码就是一个居中显示的例子。 固定宽度居中显示 1 通过 设置margin : 0 auto ;width:998px;  还一种方式是 position:absolute;left:50%; margin-left: -49...

2012-07-30 11:19:32

阅读数 19

评论数 0

clear 清除浮动问题

div:after{clear:both; content:'.' height:0; visibility:hidden; diplay:block;} 只能清楚ff这样的标准浏览器的浮动,ie不可以,这个方法也不完整,你的clear也不那么完美 .cleardiv{clear:both;*...

2012-07-19 15:41:19

阅读数 4

评论数 0

CSS的Position 4个值的详解

CSS的Position 4个值的详解 CSS中主要难以理解的属性包括盒型结构,以及定位。正如positioniseverything,本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识。 position的四个属性值: ...

2011-11-02 15:11:29

阅读数 18

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭