不用表格，用样式进行排版定位

来源：互联网发布：女娇是什么网络用语编辑：程序博客网时间：2024/05/22 10:48

以博客为例不用表格，用样式进行排版定位。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

<body>

<ul>

</ul>

<br>

</div>

<p>艾萨克的BLOG</p>

</div>

<h4 class="category"><span>我的文章分类</span></h4>

<ul>

<li><a href="#">CSS样式风格</a></li>

<li><a href="#">Ajax学习心得</a></li>

<li><a href="#">新疆甘肃游记</a></li>

</ul>

<br>

</div>

<h4 class="latest"><span>最新文章列表</span></h4>

<ul>

<li><a href="#">又是一年银杏黄</a></li>

<li><a href="#">beep饭局</a></li>

<li><a href="#">夜访中戏小记</a></li>

<li><a href="#">植物园看郁金香</a></li>

<li><a href="#">玉渊潭看花</a></li>

<li><a href="#">学校的春天</a></li>

<li><a href="#">美术馆小记</a></li>

<li><a href="#">巧学巧用Flash</a></li>

</ul>

<br>

</div>

<ul>

<li><a href="#">[fresheggs] re一下</a></li>

<li><a href="#">[licc] 哇，第一张尤其zan！</a></li>

<li><a href="#">[bingri] 来总导这里挖坑~~</a></li>

<li><a href="#">[inming] 博士加油</a></li>

</ul>

<br>

</div>

<ul>

</ul>

<br>

</div>

<h3><a href="#">又是一年银杏黄</a></h3>

<p class="author">isaac @ 2007-10-31 14:19:36</p>

学校的四季都是那么的美丽，转眼间金色的银杏就成了秋天园子里的主角，而忙碌在校园里匆匆的人们，依旧骑车飞驰在这东西干道上，不曾抬头。<br><br>

周日清晨，一缕阳光撒在刚刚下过大雨的二校门前，急忙赶往考场的人们询问着三教的方向。我和舍友偶有小闲，端着相机捕捉着光影下的一个个瞬间。想想去年此时还在为学生节忙碌得没日没夜，而如今找工作焦头烂额的同时，却依旧期待着大礼堂那晚精彩的演出。人，真的是这么一步步走下来的。<br><br>

正当拍摄得起劲，视野中出现了一对中年的夫妇，笑容满面的在银杏叶中穿梭、拍照、打闹。上前一问果然是校友，和我们一样，看着昨晚下雨，料想今天是个好天气，便早早的来了，还一边乐呵呵的劝清洁的大师傅晚点再打扫。他们，已经在这条路上拍照了十年。“以前这条路还没怎么修的时候，泥土的感觉更好”，一边说着一边坐到栏杆上微笑的继续拍照。<br><br>

我离开的时候清洁车已经全面出动了，将满地绚烂的银杏打扫得干干净净，这也是他们的职责，或许某位老大爷也扫了十年了吧，我不知道。<br>

......

</p>

</div>

<p class="author">isaac @ 2007-08-22 23:47:35</p>

以前从来没有迎过新，昨天晚上忽然听闻新生入学的消息，加上reconzansp发文，看看这家伙都连续迎了、年了，想想今年也去凑凑热闹吧，顺带见见各位老朋友。于是早上早早就到紫荆园吃过早饭，到达紫操南面的时候咱系还没有多少人，放眼望去都是陌生的面孔，以为来早了，后来才听说reconzansp早晨点就在号楼前搬桌子了，真是自愧不如啊。<br><br>

骑车围着紫荆转了一圈，回来的时候紫操就已人山人海，发条短信给RedDevils，问问熟人都在哪。再四周望望看到香老师，依旧那么的年轻。跟她打招呼她已经不记得我了，一个劲的说“你好面熟啊，可我就是想不起来了”，我笑笑“您忙您的吧”，转身便看到reconzansp，已经带完一个学弟归来，准备带第二个了，真是reconzansp啊。香老师看到他一脸惊喜：“你今年又来了...”<br><br>

离开紫操南面，顺路去了躺食堂拍IC卡相片的地方。由于今年迎新只有天，人非常多，当时估计也就点半刚过，外面已经排起了长队开始分批进入。我挤到前面端起相机“我是学校记者”就混进去了。一进门，里面的温度就有让人有窒息的感觉，可是负责照相的阿姨们却非常的耐心，不断的让同学调整姿势，还时不时的询问是否要跟换眼镜。整个食堂也秩序井然，很多志愿者虽都大汗淋淋，可也尽职尽责。<br>

......

</p>

</div>

<h3><a href="#">beep饭局</a></h3>

<p class="author">isaac @ 2007-06-27 18:47:29</p>

很久没有动笔写点什么了，就简单流水一下beep的饭局吧。<br><br>

早早就听说beep回国来举行婚礼了，还特别隆重的在校园里拍婚纱pp，可惜一直没能见到。终于在月日这个周末的傍晚，beep招呼着bg，让大家见到了久违的碧婆。引用以前blog中的一段：“beep，8字班师兄，胖乎乎圆溜溜的，当年的山西高考状元，考前一个礼拜从零开始学习就拿到微所NO.1，中文名字看上去跟linear是两口子，硕士阶段修完了所有社会学课程去了伯克利读社会学，自由空间前任站长，站规的起草者，电子系nb的学生节创始人之一……”<br><br>

还没走上大厅的楼梯，就远远的看见身着蓝色T恤的硕大身躯，笑盈盈的向大伙走来。地点虽然不像大饭店那样气派，但足足坐了桌子人，从上一个字班（wissen等）一直到最近的字班（tuonene等）都有人前来捧场，而且各行各业工作的人事也都远道而来，不乏从上海专程前来的bxc等人，其人面之广真是让人叹服。<br><br>

饭局中beep忙前忙后，招呼这伙应付那伙，大家都乐呵呵的谈论着那些永远让人回味无穷的beep专有话题。小小回忆如下：<br>

......

</p>

</div>

</div>

</body>

</html>

样式文件：1.css

body{

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

margin:0px;

padding:0px;

text-align:center; /* 居中且宽度固定的版式，参考.2节*/

background-color:#000000;

}

#container{

position:relative;

margin:1px auto 0px auto;

width:760px;

text-align:left;

background-color:#FFFFFF;

border-left:1px dashed #AAAAAA; /* 添加虚线框*/

border-right:1px dashed #AAAAAA;

border-bottom:1px dashed #AAAAAA;

}

#globallink{

width:760px; height:163px; /* 设置块的尺寸，高度大于banner图片*/

margin:0px; padding:0px;

/* 再设置背景颜色，作为导航菜单的背景色*/

background: #9ac7ff url(banner.jpg) no-repeat top;

font-size:12px;

}

#globallink ul{

list-style-type:none;

position:absolute; /* 绝对定位*/

width:417px;

left:400px; top:145px; /* 具体位置*/

padding:0px; margin:0px;

}

#globallink li{

float:left;

text-align:center;

padding:0px 6px 0px 6px; /* 链接之间的距离*/

}

#globallink a:link, #globallink a:visited{

color:#004a87;

text-decoration:none;

}

#globallink a:hover{

color:#FFFFFF;

text-decoration:underline;

}

#parameter{

position:relative;

float:left;

width:210px;

padding:0px;

margin:0px;

}

#parameter div#author{

text-align:center;

margin-top:5px;

}

div#author p{

margin:0px 10px 0px 10px;

padding:3px 0px 3px 0px;

border-bottom:1px dashed #999999;

border-top:1px dashed #999999;

}

div#author p.mypic{

border:none;

padding:15px 0px 0px 0px;

margin:0px 0px 8px 0px;

}

div#author p.mypic img{

border:1px solid #444444;

padding:2px; margin:0px;

}

#parameter div{

clear:both;

margin-top:25px;

position:relative;

}

#parameter div h4{ /* 统一设置*/

background:url(leftbg.jpg) no-repeat;

font-size:12px;

padding: 6px 0px 5px 27px;

margin:0px;

}

#parameter div ul{

list-style:none;

margin:5px 15px 0px 15px;

padding:0px;

}

#parameter div ul li{

padding:2px 3px 2px 15px;

background:url(icon1.gif) no-repeat 8px 7px;

border-bottom:1px dashed #999999; /* 虚线作为下划线*/

}

#parameter br{

display:none;

}

#parameter div ul li a:link, #parameter div ul li a:visited{

color:#000000;

text-decoration:none;

}

#parameter div ul li a:hover{

color:#008cff;

text-decoration:underline;

}

div#lcategory{

position:relative;

top:10px;

margin-bottom:35px;

}

#main{

float:left;

position:relative;

font-size:12px;

margin:0px 20px 5px 20px;

width:510px;

}

#main div{

position:relative;

margin:20px 0px 30px 0px;

}

#main div h3{

font-size:15px;

margin:0px;

padding:0px 0px 3px 0px;

border-bottom:1px dotted #999999; /* 下划淡色虚线*/

}

#main div h3 a:link, #main div h3 a:visited{

color:#662900;

text-decoration:none;

}

#main div h3 a:hover{

color:#0072ff;

}

#main p.author{

margin:0px;

text-align:right;

color:#888888;

padding:2px 5px 2px 0px;

}

#main p.content{

margin:0px;

padding:10px 0px 10px 0px;

}

#footer{

clear:both; /* 消除float的影响，排版相关的章节已经大量涉及*/

text-align:center;

background-color:#daeeff;

margin:0px; padding:0px;

color:#004a87;

}

#footer p{

margin:0px; padding:2px;

}