CSS布局效果

 

与原计划稍微有一点出入，我们先完成BlogDigger的原型级产品：OnlineRssReader!

前台后台数据库都动起来了。我在学习CSS+DIV+AJAX。

下面是一个CSS的成果:-)

< html >
< head >
< meta  http-equiv =Content-Type  content ="text/html; charset=gb2312" >
< style > ...
body{...}{color:#ffcc11;font-size:12px}
#menu{...}{float:left;width:120px;border:1px solid blue;margin-right:30px;color:rgb(12,12,12)}
/**//* 为了不变形，需要加入float:right和width:value */
#info{...}{float:right;width:620px;border-top :1px dashed red;border-bottom :1px dashed green;}
/**//*info内部的两个模块，实现了布局的嵌套*/
#info-left{...}{float:left;width:220px;}
#info-right{...}{float:right;width:120px;border-left :1px dashed green;border-bottom :1px dashed green;color:brown}
</ style >


< body >
< div  id ="pagebody"  style ="width:800" >

< div  id ="menu" >
< pre >
人民大学(8) 
中国农大(2) 
北京交大(1) 
上海交大(1) 
合肥工大(1) 
东南大学(1) 
浙江大学(1) 
西安交大(1) 
武汉大学(4) 
华中科大(30) 
华中农大(1) 
武汉理工(1) 
中南财经政法(1) 
黄冈师院(1) 
长沙理工(1) 
兰州大学(1) 
四川大学(1) 
厦门大学(1) 
澳门大学(1) 
</ pre >     
</ div >

< div  id ="info" >
< div  id ="info-left" >
< pre >
float版本：CSS1　 兼容性：IE4+ NS4+　继承性：无

 
语法：
 
float : none | left |right 
 
参数：
 
none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边
 
说明：
 
该属性的值指出了对象是否及如何浮动。请参阅clear属性。
当该属性不等于none引起对象浮动时，对象将被视作块对象
(block-level)，即display属性等于block。也就是说，
浮动对象的display特性将被忽略。
对应的脚本特性为styleFloat。请参阅我编写的其他书目。
 
示例：
 
div { clear : left }
img { float: right }

</ pre >
< br >
Raywill, 2007-3-29。
</ div >

< div  id ="info-right" >
广告广告

< li > 热点推荐 </ li >
< pre >
体验爱上Mac的理由 
留住五·一精彩瞬间 

烟台五·一走进南山 

暑期义教报名事宜 

缘聚校内精彩线下行 

浓情感恩五月母亲节 

(校友录)圈人得站衫
</ pre >
</ div >

</ div >

</ div >

</ body >

</ html >