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 
  >