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

使用CSS 排版网页布局

2010-08-07 15:20 615 查看

代码如下：

<html>

<head>

<!--

body {

margin:0px;

font-size:13px;

font-family:Arial;

}

#container{

position:relative;

width:100%;

}

#banner{

height:80px;

border:1px solid #000000;

text-align:center;

background-color:#a2d9ff;

padding:10px;

margin-bottom:2px;

}

#content{

float:left;

text-align:center;

padding-right:200px; /* 内容往回挤200px */

}

#links{

float:right;

width:200px;

border:1px solid #000000;

margin-left:-200px; /* 强行往左拉回200px */

text-align:center;

}

#footer{

clear:both; /* 不受float影响 */

text-align:center;

height:30px;

border:1px solid #000000;

}

-->

</style>

<title>CSS排版</title><body>

<div id="banner">banner</div>

content content content content content content content content content content<br>

</div>

<div class="others">others</div>

</div>

<div class="calendarhead">links<br>links<br>links<br>links</div>

<div class="calendartable">links<br>links<br>links<br>links</div>

<div class="side">links<br>links<br>links<br>links</div>

<div class="syndicate">links<br>links<br>links<br>links</div>

<div class="friends">links<br>links<br>links<br>links</div>

</div>

<div id="footer">footer</div>

</div>

</body>

</html>

运行效果如下：

// //运行文本域代码
function runEx(cod1) {
cod = document.all(cod1)
var code = cod.value;
if (code != "") {
var newwin = window.open('', '', ''); //打开一个窗口并赋给变量newwin。
newwin.opener = null // 防止代码对论谈页面修改
newwin.document.write(code); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
}
}
// ]]> <html> <head> <style type="text/css">  </style> <title>CSS排版</title><body> <div id="container"> <div id="banner">banner</div> <div id="content"> <div class="blog"> <div class="date">date</div> <div class="blogcontent"> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> content content content content content content content content content content<br> </div> </div> <div class="others">others</div> </div> <div id="links"> <div class="calendarhead">links<br>links<br>links<br>links</div> <div class="calendartable">links<br>links<br>links<br>links</div> <div class="side">links<br>links<br>links<br>links</div> <div class="syndicate">links<br>links<br>links<br>links</div> <div class="friends">links<br>links<br>links<br>links</div> </div> <div id="footer">footer</div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

标签：

相关文章推荐

新的分享

章节导航