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 |
打印 |