http://www.52css.com/css/
在线手册
◆ FF下使连续长字段自动换行 (2009-8-2)
IE: word-wrap:break-word
FF中使用JS插入 的方法来解决
<style type="text/css">
/*<![CDATA[*/
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
/*]]>*/
</style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script type="text/javascript">
// <![CDATA[
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord(37)
// ]]>
</script>
◆ ff下父容器的高度不能自适应 (2009-8-2)
遇到浮动的问题,加上 <div style="clear:both"></div> 清除掉浮动
◆ 网页调试,一定要用 web developer (2009-8-1 0:23)
可以动态修改页面,css,层等,很方便,特别是ajax调用的页面,不用每次都刷页面调试,
修改css,即可看见修改后的效果
修改html,即可看见效果
一定要熟悉使用,绝对不错
◆ 解决浮动层没有高度,高度不自动适应的问题 (2009-7-31)
在容器上添加以下这个 class
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
◆ 动态加载css文件 (2009-5-21)
function loadjscssfile( filename, filetype ) {
if (filetype=="js"){ //判断文件类型
var fileref=document.createElement('script')//创建标签
fileref.setAttribute("type","text/javascript")//定义属性type的值为text/javascript
fileref.setAttribute("src", filename)//文件的地址
} else if (filetype=="css") { //判断文件类型
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined") {
document.getElementsByTagName("head")[0].appendChild(fileref);
}
}
loadjscssfile("mystyle.css", "css");
◆ <h6>这种标签内部写层 (2009-5-7)
如果需要右浮动的层在同一行,则浮动的层要写在其他层的前面
<h6 class="margin-btm10">
<span class="float-right" style="font-size:13px;"><a href="/lessons/channels/list/<?=$this->escape($this->level);?>/full"><img src="/images/icons/full_list.gif" alt="Full List"/> Full List</a></span><strong>Latest Lessons:</strong>
</h6>
◆ 固定定位,按滚动条滚动层位置不变 (2008-11-30 在上海书城看书的时候学到的)
#pop {
position:fixed;
width:200px;
top:5px;
right:50%;
}
不会随着页面滚动而滚动,可以使用百分比,层可以不用js计算居中页面
实例
网易博客左上的按钮
gmail的提示信息
◆ 页面居中 (2008-11-30 在上海书城看书的时候学到的)
#container {
width:750px;
margin:0 auto;
}
在最外层即包含容器里设置宽度,margin-left:auto,margin-right:auto
页面可以居中
Div+css学习笔记 (2008-11-25)
http://www.cssrain.cn/article.asp?id=707
鼠标移上加亮显示
对class加hover属性即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
body {
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.title {
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
.line:hover {
background-color: #FAF7D3;
}
.box {
margin:20px;
border:1px solid red;
}
.box:hover {
background-color: yellow;
}
</style>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#990000" align="center" valign="middle" class="title">
<td width="9%" height="25">Name</td>
<td width="14%">Email</td>
<td width="11%">Type</td>
<td width="10%">Level</td>
</tr>
<tr align="center" valign="middle" class="line">
<td height="30">鼠标移上加亮</td>
<td>.line:hover {background-color: #FAF7D3;}</td>
<td></td>
<td></td>
</tr>
</table>
<div class="box">层加亮显示<br/>注意需要加 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></div>
1.常用配置顏色
背景
#F0F8FF
#F0FFFF
#FFFAF0
#F0FFF0
#66CCFF
#99CCFF
#F5FFFA
字体
#FF4500
2.彈出窗口
.open_window {
position:absolute;
top:100px;
left:163px;
z-index:10000;
margin:5px;
padding:5px;
border:1px solid #E6E6FA;
background:#fff;
width:80%;
height:90%;
}
.background-div {
background-color:#66CCFF;
filter:alpha(opacity=30);
-moz-opacity: 0.4;
position:absolute;
z-index:1000;
top:0px;
left:0px;
}
3.提示層
.status {
border:1px solid #EE82EE;
background:#FFF8DC;
display:none;
margin-top:10px;
padding:10px;
}
4.常用属性
overflow
word-break
text-decoration
list-style
border
position
z-index
编码
1)文件开头: @charset "utf-8";
2)文件保存为utf-8
字体
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
该CSS属性默认值由浏览器确定
因为不知道用户的浏览器支持哪些字体,所以尽量用一个列表,包含几种字体,以供选择。保险起见,字体列表最后最好跟一个 generic-name 值,比如 serif
按照优先级排列,每个字体用逗号分割。如果字体名称包含空格,则应使用引号括起。
family-name 任何浏览器支持的字体名称。例如 Tmes, Helvetica, Courier, Arial, Tahoma 等。
generic-name 下列字体中的任何一种:serif, sans-serif, cursive, fantasy, or monospace。
5.页面变形,居中
页面撑开
overflow:auto;word-break:break-all;
页面变形
zoom:1
页面居中
margin:0 auto;
6.常用css
* {
margin:0;
padding:0;
}
body {
text-align:center;
font-family:"宋体",arial;
margin:0;
padding:0;
background:#FFF;
font-size:12px;
color:#000;
}
a:link {
color: #0B55C4;
text-decoration:none;
}
a:visited {
color:#0B55C4;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
color:#bc2931;
}
img {
border:0;
}
ul {
list-style:none;
}
.hide {
display:none;
}
.left {
float:left;
}
.right {
float:right;
}
.clear {
clear:both;
}
.red {
color:red;
}
.blue {
color:blue;
}
.width100 {
width:100px;
}
.blank10 {
height:10px;
}
.title {
font-size:15px;
font-weight:bold;
}
.status {
border:1px solid #EE82EE;
background:#FFF8DC;
display:none;
margin-top:10px;
padding:10px;
}
.button {
width:70px;
height:22px;
line-height:20px;
border:1px solid #ccc;
margin:0 5px;
color:#666;
font-weight:bold;
background:url(../images/sch.gif) repeat-x;
}
7.分页样式
a {
text-decoration:none;
}
.current_page {
background-color:#99CCFF;
border:1px solid #ddd;
padding:2px 8px;
margin:0 1px;
font-size:12px;
font-weight:normal;
color:#fff;
}
.page{
text-align:center;
margin-top:20px;
color:#ff6000;
font-weight:bold;
font-size:13px;
}
.page a{
background-color:#F5FFFA;
border:1px solid #ddd;
padding:2px 8px;
margin:0 1px;
color:#333;
font-size:12px;
font-weight:normal;
}
.page a:hover{
background-color:#f5f5f5;
color:#ff6000;
}