CSS布局效果

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

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

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

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


<body>
<divid="pagebody"style="width:800">

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

<divid="info">
<divid="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>

<divid="info-right">
广告广告

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

烟台五·一走进南山

暑期义教报名事宜

缘聚校内精彩线下行

浓情感恩五月母亲节

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

</div>

</div>

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值