DIV+CSS之float
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="c.css" mce_href="c.css" />
</head>
<body>
<div id="footer2">
this is a footer2 div
</div>
<p id="p1">
this is a p1 p
</p>
<p id="p2">
this is a p2 p
</p>
<div id="footer3">
this is a footer3 div
</div>
</body>
</html>
c.css:
div#footer2 {
float:left;
background-color: #faf;
width: 200px;
height:80px;
margin: 10px;
}
#p1{
float: right;
background-color: #afa;
width: 200px;
height:80px;
margin: 2px;
}
#p2{
float: right;
background-color: #afa;
width: 200px;
height:80px;
margin: 2px;
}
#footer3 {
float:right;
background:#afe;
width: 200px;
height:80px;
margin: 2px;
}
1.
中间有两个<p>元素,那么问题就来了,如果在css里没有设置margin则在FF中样子会与想像中的不同,div 与
p 的高度会不相同。
加个margin就没事了,即使傎是0。
2.css中float 与 clear 不能一起使用,一起用clear会不起作用。
所以现在还不晓得既让footer2 clear both又让它向右浮动该咋办?
相关文档:
CSS(Cascading Style Sheets)层叠样式表。
·传统HTML页面排版和显示效果设置方面的问题。
·引入CSS后:Html标记专门用于定义网页的内容,而是用CSS来设置其效果。
CSS分类:
内嵌样式(Inline Style):以属性形式直接在HTML标记中给出,用于设置该标记所定义的信息效果。例如:
<body style ......
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定表头和列</title>
<style>
.FixedTitleRow
......
我在www.c09.com 发表了这个笔记并上传了原著的PDF,今天有空,转到BLOG上来。
招数和过滤器
IE的有条件注释:仅用这一项,就可以解决IE的兼容问题,至于其它浏览器的不同版本,我们完全可以忽略不计。[code]
/*有条件注释仅在IE中支持且IE5以后的所有版本均支持*/
<!--[if IE]
<style type='text/css'>
@im ......
我在www.c09.com 发表了这个笔记并上传了原著的PDF,今天有空,转到BLOG上来。
第九章、bug和bug修复
9.1 常见CSS问题[code]
/*以下代码视图让所有.intro的段落显示橙色的背景*/
#content p{
background-color:transparent;
}
.intro{
background-color:#FEECA9;
}
/*以上代码失败的 ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS渐变条</ ......