您的位置：首页 > Web前端 > CSS

css初步

2010-03-29 10:55 148 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<mce:style tpye="text/css"><!--
body{text-align:center;}           /***********这个是限定主面的居中效果，如果没有，默认在左侧显示*********/
#header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}
#mainbox{margin:auto 0px;width:800px;background:blue;height:410px;}
#sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;}     /*******上右下左*******/
#menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
#content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:yellow; padding-left:0px;}
#footer{margin-top:0px;width:800px;height:40px;background:#fff000;}
--></mce:style><style tpye="text/css" mce_bogus="1">body{text-align:center;}           /***********这个是限定主面的居中效果，如果没有，默认在左侧显示*********/
#header{margin:0px;clear:both;background:black;width:800px;height:100px;text-align:center;padding-top:12px;}
#mainbox{margin:auto 0px;width:800px;background:blue;height:410px;}
#sidebar{margin:12px 2px 5px 12px;float:left;background:red;width:200px;height:400px;clear:right;}     /*******上右下左*******/
#menu{margin:12px 2px 5px 12px;float:right;background:red;width:550px;height:30px;}
#content{float:right;margin:4px 2px 2px;12px;width:550px;height:361;background:yellow; padding-left:0px;}
#footer{margin-top:0px;width:800px;height:40px;background:#fff000;}</style>
</HEAD>
<BODY>
<div id="header"><FONT SIZE="8" COLOR="#FFFF33">家园中文网站长站演示文档</FONT></div>
<div id="mainbox">
<div id="sidebar">
</div>
<div id="menu">4323434</div>
<div id="content">
<div align="left"><img src="you.jpg" mce_src="you.jpg" alt="家园中文网站长站" width="550" height="361"></div>
</div>
</div>
<div id="footer">这里是foot部分，放置版权啥的</div>
</BODY>
</HTML>

如果你当前的块级元素向右浮动的，但是你不想这个元素后面的元素紧贴现在的元素就clear:left.反之则用clear:right.我不想让下一个元素和我在一行用clear:both，这个还是要根本实际情况来写，另外和自己的习惯有点关系。

比如你一个盒子 DIV 用了 float:left 那么下面的那个盒子左边受到影响这时候你可以用 clear：left

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航