Web服务应用开发（基于J2EE）CSS+DIV学习

CSS+DIV(HBuilderX编写)

综合实例：

代码：





样式表文件名：pac.css

CSS+DIV页面布局:

CSS布局的步骤大致为：首先整体上对页面进行分块，接着按照分块设计使用div标记，并理清div标记的嵌套和层叠关系，然后对各div标记进行CSS定位，最后在各个分块中添加相应的内容。
“三行模式”或“三列模式”：
  此模式特点是把整个页面水平、垂直分成三个区域，其中“三行模式”将页面头部、主体及页脚三部分；“三列模式”将页面分成左、中、右三个部分。分别进行DIV分区设计，写出DIV结构代码和CSS样式文件。

“三行二列”、“三行三列”模式：
  此模式特点是先将整个页面水平分成三个区域，再将中间区域分成两列或三列。分别进行DIV分区设计，写出DIV结构代码和CSS样式文件。

多行多列复杂模式：
  中央人民政府、中关村在线、淘宝网、腾讯、网易、新浪、搜狐、人民网等采用“多行三列模式”。公安部、财政部、阿里巴巴、网上超市1号店、去哪儿网、赶集网等网站采用“多行四列模式”。

网站菜单表现形式丰富多样：从菜单层次上看，可以分为一级、二级和多级菜单。从排列方式上看，可分为水平导航、垂直导航菜单。从技术实现角度上看，导航菜单通常采用无序列表、表格、超链接和样式表相结合的方法来实现，也可以使用如CSS3 Menu、jQuery等第三方插件等技术来实现。

商业网站上导航菜单一般有多种表现形式，分别是一级导航菜单、二级导航菜单、多种形式并存的导航菜单。
一级水平导航菜单：

1. 采用“表格+超链接”来设计
   使用表格布局设计一级导航菜单非常容易而且布局均匀，根据导航栏目数量确定表格的列数。采用1行10列表格，第1、第10单元格插入空格，留出左右边空白，其余单元格内插入超链接即可实现。
   
   

2. 采用“无序列表+超链接”来设计
   采用无序列表设计“一级水平导航菜单”需要做两件事：一是要去掉列表项前面的符号；二是将垂直显示的列表项转换成水平显示。
   
   
   
   二级水平导航菜单：
   1.下拉导航菜单
     借助于JavaScript设计网站下拉菜单的案例比较多见，而采用纯CSS设计网站下拉菜单需要对样式进行详细的定义才能实现。不过要考虑到不同浏览器之间的兼容性。
     采用< ul></ ul>、< li></ li>、< a></ a>等标记和CSS样式定义来实现一个简单的二级下拉菜单的设计过程。
   
   具体设计步骤如下：
   1）首先编写下拉菜单的HTML代码，链入外部样式表。
   2）逐步设置样式，依次设置ul、li、a等的样式，让菜单越来越美。
   
   
   2.横向二级导航菜单
     所谓横向二级导航菜单，即一层主菜单是水平排列、二层子菜单也是水平排列，各占一行，其中二层子菜单可能会占多行，取决于子菜单的数量。
     采用纯CSS打造横向二级导航菜单，需要对HTML中的div、ul、li、a等标记进行样式定义，并应用样式。在设计下拉菜单的基础上，很容易实现横向二级导航菜单，如下图所示。
   
   
   
   附v9/20150213112820232图片：
   
   附b1、b2图片：