www.17rumen.com 一起入门视频教程下载

一般我们要制作一个网页 ，都要弄清楚 网站整体的结构，

也就是 导航菜单啊， 网站内容 分多少块显示， 多少列，

还有网站的一些 个人信息 放在什么地方 等等。

这些涉及到布局方面 使用 div 和 css 来实现 真的非常方便。

下面我们先假设 要布局一个 网页

可以看到 这是比较常用的布局， 每一块 我来做一个简单的说明。

好了， 看到了吗 ？ 这是比较常用的布局。

下面我们使用 div + css 来实现这个 网页布局效果。。

别看这个效果 这么多块， 其实总体可以 分成 3个部分，没错，就是 上中下 3大块

上面块（top） 又分成  上下2个部分，

中间块 （content） 又分成左右2个部分。

分别起了名字，  好了 现在规划好了 就开始动手写 div 和 css 了。

都是习惯从 上到下 写下去 呵呵。。。。

好定义好 top 这个 div 了。。。

#top {
 width: 770px;
 height:  120px;
 border: 2px solid #eee;
}

可以网页看到 这一大块了。

-------------

下面到  中间块了 #content

#content {
 width: 770px;
 height: 500px;
 border: 2px solid #eee;
}

----------------
最后 就是 最下面那一块了 #bottom
#bottom {
 width: 770px;
 height: 30px;
 border: 2px solid #eee;
}

==============

很简单就布局出来了吧，

如果你看不懂上面的 div 和 css 代码， 请看前面的一些视频。。。

因为在前面演示介绍过，这里不再解析了 主要是说一下 布局

现在看上去 几块 太靠近了。。

加入 margin-top: 5px; 可以让块之间 有空隙。

到现在为止 已经 总体布局 弄好了， ===============

现在再 弄每一块的布局

例如 top 又分成 logo 和 menu 2块

<div id="top">
 <div id="logo">
 </div>
 <div id="menu">
 </div>
</div>

如果发现 大小不合适，就要进行调整。呵呵， 弄好了

=======================

我们在把中间块 进行划分 成2个部分， 左右各一块， 请看效果图。

<div id="content">
 <div id="left">
 </div>
 <div id="right">
 </div>
</div>

然后再用 css 进行控制。

#left {
 width: 300px;
 height: 500px;
 border: 2px solid #eee;
 float: left;
}
#right {
 width: 450px;
 height: 500px;
 border: 2px solid #eee;
 float: right;
}
预览一下， 和效果图 差不多了。
======================================

下面 就可以吧  top 和 content 的划线去掉了，

现在已经不需要它们了 呵呵

看 是不是 很简单就出来 了， 和效果图 差不多 呵呵。

看到了吗 ？ 我加入了一下 文字描述。。。

这样一个 div + css 网站布局就出来了 ？ 挺简单的吧 ？

如果有什么问题 或者 有什么建议 可以上 网站 www.17rumen.com 给作者留言 谢谢

大家一起交流进步 。。 88

“div+css 07 手工使用记事本编写div css 进行网站布局”有1个评论

1. 04月 17th, 2011 at 23:21:43 #阿吉

   您好，看了你的教学视频，受益匪浅，学到了很多，真是辛苦！
   我是学asp.net的，在系统界面设计的时候，我遇到一个问题就是如何把VS2005 IDE中的那些诸如Button控件之类的空间跟DIV+CSS结合使用，共同完成一个页面的布局，请有空的时候给我点指教，谢谢！我的QQ1246801876

   [回复]