css学习笔记,欢迎大家补充，谢谢
1、 <li> 中的LI前面的符号不出现而且不占位置
list-style:none;
margin:0px;padding:0px;
2、CSS相对定位语法
当父对象的position为absolute或者relative的时候
子对像如果设置了position为absolute,则top,left,right,bottom相对于父对象
例子：
<div id= "AAA " style= "position:relative; "> 基准点
<div id= "num1 " style= "position:absolute;top:50px;left:1px; "> 测试1 </div>
<div id= "num2 " style= "position:absolute;top:80px;left:1px; "> 测试2 </div>
</div>
3、CSS中的对齐属性
垂直顶部对齐（不是所有元素对这句都有效）
vertical-align:top;
水平居中对齐
text-align:center;
4、层的显示与隐藏
<script>
function hidlayer(){
document.all.Layer1.style.display= "none ";
}
</script>
<div id= "Layer1 " style= "display:block "> </div>
<a href= "# " onClick= "hidlayer() "> 隐藏层 </a>
5、怎么能得到 <div> 的高度值
document.getElementById( "divID ").offsetHeight
6、在 <table> 或 <div> 中如何让传入的文本自动换行
<div style= "width:100px ">
你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你
</div>
这样的话。div中内容。会到100px自动换行的。但是
<div style= "width:100px ">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</div>
也就是其中内容是英文的话就不会换行？？？内容将会撑大直到完全显示
如果你输入的不是一连串的如:aaaaaaaaaa或！！！！！！！！这样的无意义字符，在你指定了容器的宽度之后，是会自动换行的；
如果有大篇章这样的字符，可以考虑使用word-break:break-all或table-layout:fixed
<div style= "width:100px;word-break:break-all; ">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</div>
7、文字应该放在div里面还是p里面还是span里面呢
内容较多的时候，分多行显示，一般会用div或者p，span一般用在行内
8、 <div> 与 <span> 有什么区别
SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN
例子：
<div> 1 </div> <div> 2 </div>
<span> 1 </span> <span> 2 </span>
从上面例子中可以看到span是不换行的
9、如何让页面中的表格不服从CSS中的table布局
可以为这个表格重新定义一个样式：background:none;
.asd{
background:none;
}
<table class= "asd ">
</table>
10、层的换行
很少用DIV做东西，今天碰到点问题，还是到婆家求助：
<div nowrap>
<div style= "float:left "> 此处显示新 Div1 标签的内容 </div>
<div style= "float:left "> 此处显示新 Div2 标签的内容 </div>
<div style= "float:left "> 此处显示新 Div3 标签的内容 </div>
<div style= "float:left "> 此处显示新 Div4 标签的内容 </div>
<div style= "float:left "> 此处显示新 Div5 标签的内容 </div>
<div style= "float:left "> 此处显示新 Div6 标签的内容 </div>
<div style= "float:left "> 此处显示新 Div7 标签的内容 </div>
<div style= "float:left "> 此处显示新 Div8 标签的内容 </div>
<div style= "float:left "> 此处显示新 Div9 标签的内容 </div>
<div style= "float:left "> 此处显示新 Div10 标签的内容 </div>
</div>
现在层是自动换行了，我不想让它换行，想在一行显示全部内容，请问怎样设置
答：
需要为容器指定宽度，如：
<style>
ul {margin:0px;padding:2px;width:300%;border:1px solid #630;}
li {display:inline;border:1px solid #f00;}
</style>
<ul>
<li> 此处显示新 li1 标签的内容 </li>
<li> 此处显示新 li2 标签的内容 </li>
<li> 此处显示新 li3 标签的内容 </li>
<li> 此处显示新 li4 标签的内容 </li>
<li> 此处显示新 li5 标签的内容 </li>
<li> 此处显示新 li6 标签的内容 </li>
<li> 此处显示新 li7 标签的内容 </li>
<li> 此处显示新 li8 标签的内容 </li>
<li> 此处显示新 li9 标签的内容 </li>
<li> 此处显示新 li10 标签的内容 </li>
</ul>
11、为什么我表格中的背景显示不出来
你输出的时候应该把没有数据的td填入一个空格或者
css遵循一个规则：没有前景就没有背景
12、html很多标签都有display属性，dipslay的值block,inline,none,list-item 分别表示什么
block : 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
none : 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline : 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block : 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
list-item : 将块对象指定为列表项目。并可以添加可选项目标志
13、用css如何实现下面表格的效果
<table width= "500 " border= "1 ">
<tr align= "center ">
<td> 姓名 </td>
<td> 年龄 </td>
<td> 联系地址 </td>
<td> 联系电话 </td>
<td> </td>
</tr>
<tr align= "center ">
<td> 张三 </td>
<td> 22 </td>
<td> 深圳市福田区华强北路 </td>
<td> 12345678 </td>
<td> 编辑 </td>
</tr>
<tr align= "center ">
<td> 李四 </td>
<td> 25 </td>
<td> 不详 </td>
<td> 321 </td>
<td> 编辑 </td>
</tr>
</table>
答：
<style type= "text/css ">
#dydiv { border: 1px solid #aaa; float: left; }
#dydiv ul { padding: 1px ;margin: 0px; list-style: none; float: left; }
#dydiv ul li { padding: 3px; margin: 1px; border:1px solid #aaa; text-align: center; }
</style>
<div id= "dydiv ">
<ul>
<li> 姓名 </li>
<li> 张三 </li>
<li> 李四 </li>
</ul>
<ul>
<li> 年龄 </li>
<li> 22 </li>
<li> 25 </li>
</ul>
<ul>
<li> 联系地址 </li>
<li> 深圳市福田区华强北路 </li>
<li> 不详 </li>
</ul>
<ul>
<li> 联系电话 </li>
<li> 12345678 </li>
<li> 321 </li>
</ul>
<ul>
<li> </li>
<li> 编辑 </li>
<li> 编辑 </li>
</ul>
</div>
14、鼠标停滞显示文字
可以用对象的title 或alt属性
也可以用下面的代码实现
<html>
<head>
<STYLE type=text/css> BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体 "
}
A {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
}
A:active {
FONT: 9pt "宋体 "; CURSOR: hand; COLOR: #ff0033
}
</style>
<title> Untitled Document </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
</head>
<body>
<script>
function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
my_tips.style.display= " ";
if (url!=null){my_tips.innerHTML= " <img src= ' "+url+ " 'align=left> "+tips;}
else{ my_tips.innerHTML=tips;}
my_tips.style.left=event.clientX+10;
my_tips.style.top=event.clientY+10;
}
else
{
my_tips.style.display= "none ";
}
}
</script>
<a href= "# " tips= "我是第一个 " onmousemove=show(this.tips,1) onmouseout=show(this.tips,0)> Hello,world! </a>
<a href= "# " tips= "我就是第二个 " onmousemove=show(this.tips,1, 'http://be10.ods.org/51js/images/standard/online_member.gif ') onmouseout=show(this.tips,0)> 你好，中国 </a>
<a href= "# " tips= "那我就是最后一个了 " onmousemove=show(this.tips,1, 'http://be10.ods.org/51js/images/standard/online_moderator.gif ') onmouseout=show(this.tips,0)> 永远都好 </a>
<div id=mytips style= "position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3); ">
</div>
</body>
</html>
[解决办法]
?
[解决办法]
请问我可以路过吗??!!
[解决办法]
总结的挺不错的！！！
支持你！
[解决办法]
是不多，且CSDN的这个版块里没有那么一群人。
你的收集很不错，不过一些细微之处还是有些不足，比如你没有考虑过IE以外的浏览器。
[解决办法]
- -b
呵呵，没有仔细编号。认真排版一下了
[解决办法]
虽然都比较基础，但会整理一下发出来，不错^_^
[解决办法]
谢谢,
[解决办法]
Ding
[解决办法]
ding
[解决办法]
嗯，顶.
[解决办法]
顶
[解决办法]
顶你
------解决方案--------------------
进来学习
[解决办法]
建议买本CSS的书 看看
[解决办法]
ding
[解决办法]
再添两笔吧：
在 xhtml 里对 body 默认不占浏览器整高的解决方案：
html, body{height: 100%; max-height:100%;}
对于文字与图片混排时文字靠下的解决方案：
a, em, font, img, input, label, span, strong{vertical-align: middle;}
对于 li 在IE和FF里左边的空间不一致：
li{padding: 0; margin: 0 0 0 32px;}
对于带链接的图片会出现两像素边框的解决：
img{border: none;}
[解决办法]
有些东西 去blueidea看看就可以，csdn上讨论的和总结的比较少～
[解决办法]
支持 顶
[解决办法]
to 梅花雪
其实很多新人学的时候都是windows系统ie浏览器的
这个也是大家的通病,我也是用了FF之后才开始知道微软之外还有一片天的
对新人不能苛责的
不过还是谢谢提醒
[解决办法]
关注
[解决办法]
有分我就路过
[解决办法]
学习
[解决办法]
不错，收藏。
[解决办法]
哈哈, 俺完全可以手写CSS, 不过可能是首次进这版...
来个简洁点滴...
<style type= 'text/css '>
// <![CDATA[
.fltr{float:right;}
.fltl{float:left;}
.wlf{width:80px;}
//]]>
</style>
<div style= "margin:10% 20%;display:table; ">
<h2 style= 'text-align:center;display:table;width:100%; '> 添加新用户 </h2>
<form method= 'post ' id= 'nForm '>
<div class= 'fltl wlf '> * username: </div>
<input type= 'text ' size= '50 ' name= 'username ' />
<br clear= 'both '/> <div class= 'fltl wlf '> * userpwd: </div>
<input type= 'password ' name= 'userpwd ' />
<br clear= 'both '/> <div class= 'fltl wlf '> * e-mail: </div>
<input type= 'text ' name= 'useremail ' />
<br clear= 'both '/> <div class= 'fltl wlf '> nickname: </div>
<input type= 'text ' name= 'usernick ' />
<br clear= 'both '/> <div class= 'fltl wlf '> homepage: </div>
<input type= 'text ' name= 'userhomepage ' />
<br clear= 'both '/> <div class= 'fltl wlf '> msn: </div>
<input type= 'text ' name= 'usermsn ' />
<br clear= 'both '/> <div class= 'fltl wlf '> qq: </div>
<input type= 'text ' name= 'qq ' />
<br clear= 'both '/> <div class= 'fltl wlf '> avatar: </div>
<input type= 'text ' name= 'useravatar ' />
<br clear= 'both '/> <div class= 'fltl wlf '> icon: </div>
<input type= 'text ' name= 'uicon ' />
<br/> <input type= 'submit ' /> <input type= 'reset ' />
</form>
</div>
[解决办法]
看来帖子置顶还是有点用的。呵呵……
[解决办法]
收藏 up
[解决办法]
up
[解决办法]
good
[解决办法]
ding..
[解决办法]
好东西啊！
[解决办法]
收藏了.
[解决办法]
css很强大，不过很少有人注意到。
[解决办法]
Very good, 请LZ多贴些呵，正准备深入学习css
[解决办法]
mark
[解决办法]
嘿嘿。UP
[解决办法]
用表格跟div没有什么错误啊
初学的可以表格和div混排
[解决办法]
UP
[解决办法]
混排，优势就不是很明显了
[解决办法]
真的很不错！
[解决办法]
Nice!!!!!!!!
[解决办法]
继续啊， 我的等着收藏，哈哈
-> meizz(梅花雪) 你后面那个红红的是什么东西？能不能给我玩玩？
[解决办法]
哈哈，200分啊！！！
抢，很久没抢过分了
[解决办法]
顶你一下
[解决办法]
不错的说,接分
[解决办法]
这些东西都有必要整理一下~~收了
[解决办法]
mark
[解决办法]
不错，学习了
[解决办法]
谢谢LZ，对我的学习很有帮助
[解决办法]
不错
[解决办法]
补充一个，今天刚遇到的问题
解决img标签IE下的空格bug
img{
display:block;
}
[解决办法]
学习！
[解决办法]
css!
[解决办法]
再学习
[解决办法]
m
[解决办法]
学习,一直ing
[解决办法]
学习
[解决办法]
谢谢楼主的最后一例，正找着呢，不过可惜的是不能兼容FF。
[解决办法]
修改了下最后一个例子目前兼容FF...
14、鼠标停滞显示文字
可以用对象的title 或alt属性
也可以用下面的代码实现
<html>
<head>
<STYLE type=text/css> BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体 "
}
A {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
}
A:active {
FONT: 9pt "宋体 "; CURSOR: hand; COLOR: #ff0033
}
</style>
<script type= "text/javascript ">
var s_obj;
function $(name) {
return document.getElementById(name);
}
function show(e) {
e = window.event || e;
s_obj.style.display = "block ";
if (this.getAttribute( "imageu ")) {
s_obj.innerHTML = ' <img src= " ' + this.getAttribute( "imageu ") + ' " align= "left "> ' + this.getAttribute( "tips ");
} else {
s_obj.innerHTML = this.getAttribute( "tips ");
}
s_obj.style.left = e.clientX + 10;
s_obj.style.top = e.clientY + 10;
}
function clearshow() {
s_obj.style.display = "none ";
}
window.onload = function () {
var a = document.getElementsByTagName( "a ");
for (var i = 0; i < a.length; i ++) {
a[i].onmousemove = show;
a[i].onmouseout = clearshow;
}
s_obj = $( "mytips ");
}
</script>
<title> Untitled Document </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
</head>
<body>
<a href= "# " tips= "我是第一个 " imageu= " "> Hello,world! </a>
<a href= "# " tips= "我就是第二个 " imageu= "http://be10.ods.org/51js/images/standard/online_member.gif "> 你好，中国 </a>
<a href= "# " tips= "那我就是最后一个了 " imageu= "http://be10.ods.org/51js/images/standard/online_moderator.gif "> 永远都好 </a>
<div id=mytips style= "position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3); ">
</div>
</body>
</html>
[解决办法]
顶
[解决办法]
mark
[解决办法]
- -b 我去copy blueidea的精华会不会遭天谴呢？HoHO
[解决办法]
要收藏
[解决办法]
good ,,,,,,
我收藏了,,不介意吧,,,哈哈,,,
学习学习,,,,,
[解决办法]
好东西啊,收藏了
[解决办法]
mark
[解决办法]
支持！
FF里是不是不认word-break:break-all？
[解决办法]
不错
------解决方案--------------------
顶你
[解决办法]
up
[解决办法]
mark
[解决办法]
正在学习用CSS.谢谢楼主.
不知哪位有没有Mobile支持与不支持的CSS资料
[解决办法]
学习中,谢谢LZ!
[解决办法]
路过
[解决办法]
我好似在看天书
[解决办法]
帮顶
[解决办法]
不错
[解决办法]
mark~
[解决办法]
mark
[解决办法]
up
[解决办法]
不知道在移动设备上(window mobile)上有没有相关的资料.
[解决办法]
up
[解决办法]
document.getElementById( "divID ").offsetHeight
好多东西是IE私有的啊
[解决办法]
mark
[解决办法]
高度：
document.getElementById( "divID ").style.height
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
回复人：brothercat(猫猫 ^_^) ( 一星(中级)) 信誉：100 2007-01-07 10:46:59 得分:0
?
支持！
FF里是不是不认word-break:break-all？
************************
FF里设置max-width的值就可以了，IE没有max-width的，用word-break;
[解决办法]
路过就顶
[解决办法]
学习
[解决办法]
还是浏览器的兼容性有问题；而且你这个罗列的也不单纯是CSS
[解决办法]
继续关注中……
[解决办法]
马克
[解决办法]
mark
[解决办法]
非常的好啊
想问一下你 <script>
function hidlayer(){
document.all.Layer1.style.display= "none ";
}
可以隐藏层,那么怎么打开这个层啊
<script>
function showlayer(){
document.all.Layer1.style.display= "block ";
}
我用这个打开就出现说我的document.all.Layer1.style为空或者不是对象啊
应该怎么做啊?
[解决办法]
好东西,收藏了,谢谢
[解决办法]
收藏
[解决办法]
路过
