CSS+div页面排版

落日映苍穹つ 2022-08-19 08:47 145阅读 0赞

CSS排版过程：首先在整体上进行<div>标记分块，然后进行CSS定位，最后添加相应的内容，如果网页是拓扑结构，则可以修改CSS属性进行重新定位即可。

# 【网页框架设计】 #

CSS+div的设计的第一步：（1）明确页面组成，**通过div对页面进行分块**，分块内容包括Banner、content(主题内容)、links(菜单导航）和footer（脚注）几个部分，每个部分可以通过不同的id进行标识。

（2）设计页面板式，常见的有双栏板式：

![SouthEast][]

（3）用CSS定位，对页面进行整体规划，定位的规则是由大到小（body--container）、由上到下、由左到右的位置进行（banner--content--links--footer），每个分块需要注意的属性：

![SouthEast 1][]

# 【CSS+div **VS** table排版】 #

table排版的优势表现在：**思路简单**，使用table嵌套可以完成划分模块以及重新划分模块，相对于float和position来说有很大的优势；**表格大小自动调整，**不存在背景色填充不满的问题。

但它升级很困难，一旦页面设计完成，重新排版相当于重新设计；显示慢，必须等表格内容全部显示出来页面才能显示完整；而div各个模块可以分别下载，这样就提高了下载速度。

美工方面，div+CSS将美工与后台操作完全分离，而table的美工还必须去代码中寻找排版方式。

# 【CSS注意知识点】 #

由于浏览器的不同，css属性也有很多不一样的显示方式，这些内容需要我们在应用中一点一点的积累，首先我们要了解div的盒装模型：

![SouthEast 2][]

这种盒装模型在给我们定位提供便利的同时也会有很多兼容性问题：

![SouthEast 3][]

在设计的过程中规避这些不同点，才能让我们的网页适应不同的浏览器。

# 【总结】 #

网站设计过程中可以下载很多现成的模板，但了解这些css+div的基础知识，才能更加随心所欲的去修改自己的页面，美化是一个不断实践的过程。

[SouthEast]: /images/20220731/242fb29a02194440a00a14706105d514.png
[SouthEast 1]: /images/20220731/e8e4063b61854326a84c4e2f87df1ee1.png
[SouthEast 2]: /images/20220731/f049071efc7c4ab081c335a6f2869898.png
[SouthEast 3]: /images/20220731/4dca844572334ad681726a2dff502e62.png

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 float排版对齐

<view class="category"> <view class="cate"> <view cl

悠悠/ 2022年12月15日 03:50/ 0 赞/ 100 阅读

相关 Bootstrap 排版

Bootstrap 排版实例 <!DOCTYPE html> <html lang="en"> <head> <meta ch

太过爱你忘了你带给我的痛/ 2022年08月23日 14:00/ 0 赞/ 141 阅读

相关 Bootstrap--排版

1.标题 Bootstrap中定义了所有的标题 2.内联子标题如果需要添加内联子标题，只需要简单的在元素两旁添加 <h1>我是标题1 h1. <smal

朴灿烈づ我的快乐病毒、/ 2022年08月22日 15:27/ 0 赞/ 178 阅读

相关 CSS+div页面排版

CSS排版过程：首先在整体上进行<div>标记分块，然后进行CSS定位，最后添加相应的内容，如果网页是拓扑结构，则可以修改CSS属性进行重新定位即可。

落日映苍穹つ/ 2022年08月19日 08:47/ 0 赞/ 146 阅读

相关英文段落排版

![SouthEast][] [SouthEast]: /images/20220810/053a8f21be1d476dac2c6b2c9e5bce70.png

爱被打了一巴掌/ 2022年08月12日 00:14/ 0 赞/ 135 阅读

相关 h5页面被QQ浏览器重新排版

第一次碰到这个问题，网上的回答是[http://bbs.csdn.net/topics/391005417][http_bbs.csdn.net_topics_39100541

你的名字/ 2022年08月05日 02:23/ 0 赞/ 137 阅读

相关 CSS格式化排版

1 文字排版--字体我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。

喜欢ヅ旅行/ 2022年06月14日 01:47/ 0 赞/ 204 阅读

相关 PLSQL Developer保存页面排版

若想下次进入PLSQL Developer页面显示的信息和当前信息一样，可以点击Windows菜单--点击Save Layout即可。如图： ![70][]

柔情只为你懂/ 2022年05月20日 08:49/ 0 赞/ 219 阅读

相关文字段落排版

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码： p{color:red;} /权值为1/ p span{

àì夳堔傛蜴生んèń/ 2022年05月17日 02:24/ 0 赞/ 227 阅读

相关 chrome插件之自定义开发页面排版

基于上一篇：搜索引擎快捷导航一个简单的chrome插件 [https://blog.csdn.net/ardo\_pass/article/details/82898870]

迷南。/ 2022年05月09日 02:10/ 0 赞/ 165 阅读