CSS布局效果

最新推荐文章于 2025-05-31 09:45:05 发布

iteye_11581

最新推荐文章于 2025-05-31 09:45:05 发布

阅读量108

点赞数

文章标签：数据库

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

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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