DIV+CSS中10句新手最有用的css代码
来源:互联网 发布:稻叶浩志 知乎 编辑:程序博客网 时间:2024/06/05 07:39
1.float:left
功能:使多个div平行并排
用法:
<div id="div1" style="float:left;width:20px;"></div>
<div id="div2" style="float:left;width:20px;"></div>
2.clear:both
功能:多个div平行并排的时,不得不加一个空div用clear:both进行描述。因为如果不加以限制,IE显示正常,而firefox则排版错误。
用法:
<div style="clear:both;height:0px;overflow:hidden;"></div>
3.margin:0 auto
功能:如果你要让页面居中对齐,而宽度并不等于屏幕宽度。这样margin:0 auto就会显示其巨大的价值
用法:
<div style="width:800px;margin:0 auto;"></div>
4.margin:0px
功能:你是否有页面中添加一个form然后怎么调也调不好其排版,它总是给你换行或者撑大外容器。只要用margin:0px即可
用法:
<form name="test" action="" method="post" style="margin:0px;"></form>
5.margin:-x px
功能:如果要将一个img和一个span文字内容并排,你会发现高低总会不一致。这样就可以用margin定义外边距,这个数值可以是负的
用法:
<img src="http://images.cnblogs.com/test.gif" style="margin-top:-2px;" />(表示图片向上移2px)
6.padding:x px
功能:怎么样才能让内容和容器有一定的间距呢?这就是内边距padding的作用,这儿之所以把它提出来是要注意它的用法
用法:
<div style="height:20px;padding-top:10px;">Here is data!</div>(这个div的显示高度是多少?30px)
7.line-height:x px
功能:许多时候一段文字太紧密,看起来心烦。那就将其行间距拉大,这儿用line-height定义其行高
用法:
<div style="line-height:18px;">Here is data!</div>
8.a
功能:定义链接属性。许多时候新手容易问:为什么我定义了css属性却显示不正确?那么你很有可能写乱了a的顺序,正确的顺序应该是lvha
用法:
a:link{
font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none;
}
a:visited{
font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none;
}
a:hover{
font-size:12px;font-family:宋体;font-weight:bolder;color:orange;text-decoration:underline;
}
a:actived{
font-size:12px;font-family:宋体;font-weight:bolder;color:red;text-decoration:none;
}
9:border:0px
功能:如果你给一个img加了链接,那么就会出现一个讨厌的边框,这时候将其定义为0去掉它。
用法:
<a href="url" target="_blank"><img src="http://images.cnblogs.com/img.gif" style="border:0px;"></a>
10:display:none
功能:有时候可能需要隐藏对象,这时候用display最合适。特别是在许多在线编辑器的编辑模式时最有用
用法:
<input type="hidden" name="content" id="content" />
<IFRAME ID="eWebEditor1" src="/eWebEditor/ewebeditor.htm?id=content&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME>(往数据库新加内容时)
<textarea name="content" id="content" style="display:none;"><%=data%></textarea>
<IFRAME ID="eWebEditor1" src="/eWebEditor/ewebeditor.htm?id=content&style=coolblue" frameborder="0" scrolling="no" width="550" height="350"></IFRAME>(更新数据库内容时使用)
链接自:php讨客网
- DIV+CSS中10句新手最有用的css代码
- [DIV/CSS] 【译】60个有用CSS代码片段
- 有用的css代码段
- 有用的CSS代码片段
- css -- 有用的css
- css 有用代码
- 10个不可忽视的CSS代码片段(有用)
- 30+有用的CSS代码片段
- 30+有用的CSS代码片段
- 30+有用的CSS代码片段
- 新手学习DIV+CSS难点
- 一句代码让CSS兼容IE7、IE8、IE9 DIV+CSS教程
- CSS中div的范围
- css中div的布局
- 最规范的网站DIV+CSS标准
- DIV + CSS 实现最经典的布局
- DIV + CSS 实现最经典的布局
- DIV+CSS布局最基本的内容
- css 实现背景图片拉伸
- Linux系统调用的实现机制分析
- Inside Geometry Instancing(上)
- 数据结构学习之汉诺塔代码
- Ubuntu12.04lts疑难杂症----用户无法登入(正确输入密码后又跳回登入界面)
- DIV+CSS中10句新手最有用的css代码
- IOS开发之添加第三方lib或从其他工程引入lib时的链接错误:ld: symbol(s) not found for architecture i386
- Hadoop操作HDFS命令
- 设计一个学习系统
- 如何在windows server 2008的桌面上显示 我的电脑 我的文档 网上邻居?
- android progressbar
- jsp页显示时间标签JSTL标签 <fmt:formatDate/> 实例大全
- 10个步骤引导你开发出畅销的移动应用
- linux I/O和oracle的关系(二)