热门标签： c c# c++ asp asp.net linux php jsp java vb Python Ruby mysql sql access Sqlite sqlserver delphi javascript Oracle ajax wap mssql html css flash flex dreamweaver xml

最新文章 : css

css:div属性详解

margin：层的边框以外留的空白
background-color：背景颜色
background-image：背景图片
padding：层的边框到层的内容之间的空白
border：边框
content：内容

步骤一、
分析一个典型的定义div例子：
#sample{
margin:10px;
border: #111 10px solid;

padding:10px;
background: url(background.jpg) #ccc no-repeat right bottom;
color: #009;text-align:right;
line-height: 150%;
width:800px;
height:600px;
}

说明如下：
● margin是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。
如果上右下左margin值均为10px, 则代码为:
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

"10px 10px 10px 10px"分别代表"上右下左四个边距, 上面也可简写为
margin: 10px 10px 10px 10px;

当上下, 左右margin值分别一致, 可简写为:
margin: 10px 10px;
前一个10px代表上下margin值, 后一个10px代表左右margin值.

当上下左右margin值均一致, 可简写为:
margin: 10px;  & ......

使用CSS格式化Table样式

在网页里使用table的时候，样式一般比较难管理，因为table的有些样式与其它控件不太一样
1、table的分外边框，tr边框，td边框，它们之间都是有间距的
2、你可以指定它们之间的间距为0，但当你设置边框时，会发现边框是2px宽的，因为在table里，tr、td等元素是相邻的
所以想做一个好看的table样式可以参考以下的步骤：
1、table设置
border-collapse:collapse; /*设置间距为0*/
border: 1px solid #808080; /*设置table的最外层边框*/
2、tr设置
/*设置tr的上边与下边样式*/
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #808080;
border-bottom-color: #808080;
3、th,td设置
/*设置th,td的左边与右边样式*/
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #808080;
border-left-color: #808080;
4、.NoBorder类设置
/*设置不显示边框的样式*/
.NoBorder {
border-top-styl ......

css 之 padding

逐渐喜欢上padding 虽然它并不完美，任何事物都有两面性，无所谓对错，关键是要用对地方！
padding 和 margin相比较，padding 可以将div 等撑起来占用实际空间，而margin则比较小心。
但是就是padding这点缺帮我解决了一个input 和 submit的对齐问题。 ......

DIV css 相对父容器水平、垂直居中

终于把它写出来了。哈哈
<div style="width:100%;height:100%;position:relative;overflow:hidden;"
    ><br style="line-height:0;"
    /><div style="position:relative;top:50%;left:50%;"><br style="line-height:0;"
    /><div style="position:relative;
          background-color:Yellow;
          height:200px;width:200px;
          margin-top:-100px;margin-left:-100px;overflow:auto;"
    ><br style="line-height:0;"
    /><div>
        名称：<asp:TextBox runat="server" ID="name"></asp:TextBox>
    </div>
    <br />
    <div>
        显示名：<asp:TextBox runat="server" ID="TextBox1">< ......

IE8的css hack

首先感谢“丸子
”提供的这个
IE8的css hack；
关注过IE8的css hack的人相信大家都在使用这个hack，就是“\9”的css hack：
.test{
color:#000000;                  /* FF,OP支持 */
color:#0000FF\9;       /* 所有IE浏览器(ie6+)支持；但是IE8不能识别“*”和“_”的css
hack；所以我们可以这样写hack */
[color:#000000;color:#00FF00;      /* SF,CH支持 */
*color:#FFFF00;                 /* IE7支持 */
_color:#FF0000;               /* IE6支持 */
}
包括我自己也是使用这种的，这是我前段时间整理的《主流浏览器的一些CSS
hack
》。(转载请注明出处：WEB前端开发 http://www.css88.com/
)
很多人再研究color:#0000FF\9;中的为什么IE6-IE8支持“\9”写法，和它的原理，我只是个� ......

CSS样式表命名规则

样式选择符命名
选择符以类型分，同类放一起，类的定义顺序以HTML中实际的顺序为参考，以方便查找为主, 使用类似下面的规则:
[模块前缀 | 类型 | 作用]_[名称]_[状态 | 位置]
约定模块、类型、状态、位置等的所使用的单词或其缩写，保持上面的顺序，尽量保持在两到三个单词说清用途。

通用名词缩写
设置
set
文本
txt
成功
suc
颜色
c
提示
hint
背景
bg
操作
op
边框
bor
密码
pw
居中
center
菜单
menu
图标
icon
按钮
btn
弹出
pop
例：
文本输入框 .input_tx
密码输入框 .input_pw
登录密码输入框 .input_pw_login
日志设置成功提示 .hint_suc_blogset
相册弹出的设置层 .pop_set_photo
公共提示 .hint_bg
文本颜色 .c_tx
段落文本颜色 .c_tx_p

样式属性书写顺序
mozilla.org Base Styles
/Suggested order:
//显示属性
//自身属性
//文本属性
* display
* width
* color
* list-style
* height
* font
* position
* margin
* text-decoration
* float
* padding
* text-align
* clear
* border
* vertical-align

* background
* white-space

* other text
& ......