css-精华

最新推荐文章于 2022-04-12 20:50:42 发布

摩西_玄晨

最新推荐文章于 2022-04-12 20:50:42 发布

阅读量804

点赞数

分类专栏： Web前端技术文章标签： border class xhtml css stylesheet html

Web前端技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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;
}