与原计划稍微有一点出入,我们先完成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 >
< 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 >