乘着闲暇时间,自己弄了个web,主界面是用div+css布局,用ajax+javascript进行界面控制及获取数据!
我就说说其中的div+css布局。
整个页面分为三大块,可以称之为:页眉(站标+横幅),主体(左边菜单+右边内容),页脚(显示版权及备案等信息)。三大块我用position:relative;相对定位来设置,这样有个好处,就是当某一块内容太多要阔涨时,其它部分也会相应的调整位置。
每一块内部采用float为left或right布局;在主体中,我左边为
#divLeft
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
}
{
width:228px;
height:400px;
left:26px;
float:left;
padding:0;
margin:0;
filter:revealTrans(duration=2,transition=3) progid:DXImageTransform.Microsoft.Gradient(startColorStr=#adde21, endColorStr=#d8e7c2, gradientType=0);
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
}
右边为
#divRight
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
}
{ float:left;
left:286px;
width:744px;
height:400px;
padding:0;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#f5efda, endColorStr=#F7f7f7, gradientType=0);
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
}
请注意,在这两部分布局中我都采用了float:left;,这样当我左边divLeft部分隐藏时,右边divRight部分会自动往左移动,如果#divRight用float:right;right:0;则达不到这样的效果!
我就说说其中的div+css布局。
整个页面分为三大块,可以称之为:页眉(站标+横幅),主体(左边菜单+右边内容),页脚(显示版权及备案等信息)。三大块我用position:relative;相对定位来设置,这样有个好处,就是当某一块内容太多要阔涨时,其它部分也会相应的调整位置。
每一块内部采用float为left或right布局;在主体中,我左边为
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)