网页布局------几种布局方式
1、认识布局
（1）确认页面的版心宽度
版心是指页面的有效使用面积，主要元素以及内容所在的区域，一般在浏览器窗口中水平居中显示。在设计网页时，页面尺寸宽度一般为1200-1920排序。但是为例适配不同分辨率的显示器，一般版心宽度为1000-1200px。例如，屏幕分辨率为1021*768的浏览器，在浏览器内有效可视区域为1000px,所以最好设置版心宽度为1000px。常见的宽度为960px，980px，1000px，1200px
（2）分析页面中的模块
页面一般由头部(header)，导航栏(nav)，焦点图(banner)，内容(content)，页面底部(footer)共5个部分组成
2、单列布局
单列布局从上到下分为头部、导航栏、焦点图、内容和底部区域，每个模块各占一行，且宽度和版心相等
下面定义页面结构
<div id="top">头部</div>
<div id="nav">导航栏</div>
<div id="banner">焦点图</div>
<div id="content">内容</div>
<div id="footer">页面底部</div>
下面编写css样式
body{
margin: 0;
padding: 0;
font-size: 24px;
text-align: center;
}
div{
width: 980px;
margin: 5px auto;
background: #d2ebff;
}
#top{height: 40px;}
#nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
#footer{height: 90px;}
3、两列布局
页面结构
<div id="top">头部</div>
<div id="nav">导航栏</div>
<div id="banner">焦点图</div>
<div id="content">
<div class="content-left">内容左部分</div>
<div class="content-right">内容右部分</div>
</div>
<div id="footer">页面底部</div>
页面样式
body{
margin: 0;
padding: 0;
font-size: 24px;
text-align: center;
}
div{
width: 980px;
margin: 5px auto;
background: #d2ebff;
}
#top{height: 40px;}
#nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
#footer{height: 90px;}
.content-left{
width: 350px;
height: 200px;
background-color: #ccc;
float: left;
margin: 0;
}
.content-right{
width: 625px;
height: 200px;
background-color: #CCC;
float: right;
margin: 0;
}
使用浮动设置了内容区域盒子的显示状态，使用margin:0;清楚之前设置的margin属性不影响内容区域布局
4、三列布局
页面结构
<div id="top">头部</div>
<div id="nav">导航栏</div>
<div id="banner">焦点图</div>
<div id="content">
<div class="content-left">内容左部分</div>
<div class="contnt-center">内容中间部分</div>
<div class="content-right">内容右部分</div>
</div>
<div id="footer">页面底部</div>
页面样式
body{
margin: 0;
padding: 0;
font-size: 24px;
text-align: center;
}
div{
width: 980px;
margin: 5px auto;
background: #d2ebff;
}
#top{height: 40px;}
#nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
#footer{height: 90px;}
.content-left{
width: 200px;
height: 200px;
background-color: #ccc;
float: left;
margin: 0;
}
.contnt-center{
width: 570px;
height: 200px;
background-color: #ccc;
float: left;
margin: 0 0 0 5px;
}
.content-right{
width: 200px;
height: 200px;
background-color: #CCC;
float: right;
margin: 0;
}
在上述代码中使用margin：0 0 0 5px;将中间内容与左侧内容隔开
5、通栏布局
通栏布局的关键是在相应模块的外面添加一层div，并将外层div的宽度设置为100%
页面结构
<div id="top">头部</div>
<div id="topbar">
<div class="nav">导航栏</div>
</div>
<div id="banner">焦点图</div>
<div id="content">内容</div>
<div id="footer">
<div class="inner">页面底部</div>
</div>
页面样式
body{
margin: 0;
padding: 0;
font-size: 24px;
text-align: center;
}
div{
width: 980px;
margin: 5px auto;
background: #d2ebff;
}
#top{height: 40px;}
#nav{
width: 100%;
height: 60px;
background-color: #3CF;
}
.topbar{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
#footer{
width: 100%;
height: 90px;
background-color: #3CF;
}
.inner{height: 90px;}
分别将nav和footer的宽度设置为100%
6、网页模块命名规范
通常网页布局需要遵循以下几个原则
-
避免使用中文字符命名（例如 id="导航栏"）
-
不能以数字开头命名（例如 id="1nav"）
-
不能占用关键字（例如 id="h3"）
-
用最少的字母表达最容易的意义
在网页中，常用的命名方式有"驼峰式命名"和“帕斯卡命名"两种
-
驼峰式命名：除了第一个单词外其余单词首字母都要大写。例如partOne
-
帕斯卡命名：单词之间用”_“链接，例如content-one
下面是网页中常用的命名
| 相关模块 | 命名 | 相关模块 | 命名 |
|---|---|---|---|
| 头部 | header | 内容 | content/container |
| 导航栏 | nav | 尾 | footer |
| 侧栏 | sidebar | 栏目 | column |
| 左边、右边、中间 | left right center | 登录条 | loginbar |
| 标志 | logo | 广告 | banner |
| 页面主题 | main | 热点 | hot |
| 新闻 | news | 下载 | download |
| 子导航 | subnav | 菜单 | menu |
| 子菜单 | submenu | 搜索 | search |
| 友情链接 | frIEndlink | 版权 | copyright |
| 滚动 | scroll | 标签页 | tab |
| 文章列表 | list | 提示信息 | msg |
| 小技巧 | tips | 栏目标题 | title |
| 加入 | joinus | 指南 | guild |
| 服务 | service | 注册 | regsiter |
| 状态 | status | 投票 | vote |
| 合作伙伴 | partner | ||
| CSS文件 | 命名 | CSS文件 | 命名 |
| 主要样式 | master | 基本样式 | base |
| 模块样式 | module | 版面样式 | layout |
| 主题 | themes | 专栏 | colums |
| 文字 | font | 表单 | forms |
| 打印 |
