0. 前言
作为一个优秀的前端工程师, 必备技能之一就是网页布局, 俗称PSD切图. 将视觉设计图转换成静态的HTML页面. 网页布局从最早的Table布局到现在的DIV+CSS布局, 虽然Flex布局很流行, 甚至以后会有更先进的布局方式. 但无论那种方式, 只有掌握网页布局的思路才是关键, 这也是很多初学者最头疼的问题之一, 本文将通过电商的商品详情页为例, 从0开始一步一步的带领大家完成网页布局.
1. 设计图
2. 什么是DIV+CSS
所谓网页布局, 通俗的说就是把网页中的各个元素放至在网页的指定位置. 如: LOGO放在顶部, 版权信息在底部中间, 店铺信息在右侧, 商品名称在价格的上方等等.
DIV是HTML的一个标签, 用来定义区域, 我们可以理解为DIV是一个透明的盒子, 我们把LOGO, 版权信息, 店铺信息等等元素都放在各个盒子(DIV)中, 通过CSS来控制这些盒子(DIV)的位置来实现网页布局.
也可以这样理解: 中国相当于网页, 每个省相当于一个DIV, 控制这些DIV就能控制各个省的在中国位置, 每个市又相当于一个DIV, 可以控制各个城市在省内的位置. 城市的每个区, 下面的每个建筑, 建筑里面的每个房间, 这些都相当于DIV. 当你用CSS控制了这些DIV的位置, 中国的地图就做好了. 如果你想对房间进行装修(布局), 卧室、 厨房、客厅又是一个个的DIV, 他们控制了房间的户型, 房间中的床, 厨房中的冰箱等等可以看做是一个一个的HTML组件. 布局(DIV)定好了, 每个组件的位置就好了. DIV+CSS就是用这个原理来实现网页布局的.
3. 创建项目
使用你熟悉的IDE创建一个项目: 包括detail.html, detail.css, 并在HTML中引入CSS.
"UTF-8">
电商的商品详情页
"stylesheet" type="text/css" href="css/detail.css"/>
复制代码4. 通用样式
4.1 重置样式
HTML中的很多标签都有默认的样式, 如列表有默认的符号, 链接有下划线等等. 这些默认的样式在我们布局中有时候不那么需要, 因此为了方便编写CSS, 我们需要重置这些标签的默认样式.
/* 所有标签默认内外间距 */
body, div, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
span, em, a, strong, form, input, button, textarea, table, th, td {
margin: 0; padding: 0;
}
/* 字体类标签无特殊样式(大小,粗细,倾斜等) */
h1, h2, h3, h4, h5, h6, em, i, strong {
font-size: 100%; font-weight: normal; font-style: normal;
}
/* 列表无默认符号*/
ul, ol {
list-style: none;
}
/* 网页的默认字体及颜色 */
body {
color: #333; font-size: 12px; font-family: Microsoft Yahei; line-height: 18px;
}
/* 链接默认颜色,无下划线 */
a {
color: #08c; text-decoration: none;
}
复制代码4.2 固定宽度
仔细观察设计图后会发现: 页眉, 头部, 主体, 页尾中的内容都不是全屏, 有固定宽度的.
这是网页设计中兼容分辨率的一个小技巧, 网页内容的宽度取决于要兼容的最小分辨率, 如要兼容的最小分辨率为1024*800, 那么网页内容的宽度为1024px, 居中显示. 当屏幕分辨率大于1024时, 无论分辨率多大, 网页内容仍能在中间显示, 网页左右两侧多出的部分留白(或使用区域的背景色). 这样做使得网页在所有屏幕上的布局及展现形式一致, 用户在不同的屏幕下不需要重新适应网页.
同时固定宽度也可以使布局更简单(不需要使用百分比布局). 网页兼容的最小分辨率视目标用户群体而定, 按照目前主流的显示器, 设置1200即可. 1200分辨率以下(用户量相对较少)可单独处理或舍弃.
由于所有区域的网页内容都有宽度, 因此我们需要写一个通用的样式来控制内容宽度.
/* 控制网页内容宽度. 左右外边距为auto时, 当宽度小于父容器宽度时会居中 */
.layout {
width: 1200px;
margin: 0 auto;
}
复制代码5. 布局规划
根据设计图对网页进行整体布局规划, 这一步相当于在中国划分好各个省, 然后在每个省划分好各个市, 在每个市划分好各个区的位置, 最后在每个区中就可以任意的设计形形色色的高楼大厦了.
5.1 整体布局
根据本文中的设计图我们可以先把整个网页分为四个大区域:
根据划分的区域写出对应的HTML, 每个区为一个DIV.
"topbar">
"header">
"main">
"footer">
复制代码由于DIV是块级元素(默认占整行), 因此4个DIV依次从上到下排列, 因此不需要CSS控制其位置.
- 块级元素: 和父容器宽度相同, 单独占一行, 不允许其他元素同在一行. 如: DIV, P, UL, H1-H6
- 行级元素: 宽度为内容的宽度. 多个行级元素在同一行, 无法设置宽度和高度. 如: span, a, em
5.2 页眉布局
下面对页眉进行布局, 页眉布局很简单, 分为左侧和右侧两个区域, 都是样式相同的链接.
- 左右两侧的链接样式主体相同, 可使用同一样式
- 通过浮动对两个区域布局, 分别居左和居右
- 页眉非全屏, 有宽度, 需要将内容放在
layout样式内
"topbar">
复制代码设置页眉的背景色:
.topbar {
background-color: #363636;
}
复制代码设置背景色后效果如下图:
对左侧区域的链接设置float: left;使其居左, 右侧设置float: right;
.topbar-items-left {
float: left;
}
.topbar-items-right {
float: right;
}
复制代码设置完成后效果如图, 两个区域已经分别在左右两侧.
但是浮动设置完之后, 页眉没有背景色了, 这是为什么呢?
上面我们讲到HTML的块级元素默认宽度时和父元素相同, 行级元素的宽度取决于内容的宽度. 然而HTML中所有元素默认高度都是0. 只有元素内部有内容时才会有高度, 有高度时背景色才能显示. 那么页眉中有内容为什么还不显示背景色呢?
这是因为一旦某个节点被设置了浮动, 那么这个节点就脱离了父节点, 也就是说父节点的高度和这个子节点没有关系了. 看下图: 蓝色为父节点, 里面有两个子节点(红色,黄色)
- 未设置浮动时, 父节点高度等于红色和黄色的高度之和
- 黄色设置浮动时, 父节点高度等于红色的高度
- 红色也设置浮动时, 父节点高度为0
当节点下面的所有子节点都被设置了浮动, 该节点高度为0, 因此背景色未显示. 可以对节点设置overflow: hidden;, 设置后节点的高度将等于高度最大的节点的高度(红色的高度).
由于页眉中内容全部为链接, 内容较少, 因此手动设置页眉高度即可.
.topbar {
height: 40px; background-color: #363636;
}
复制代码设置页眉高度后效果如下:
下面对设置页眉链接的样式, 链接使用了ul, 每个链接在li中. 由于li是块级元素, 因此不会横向排列, 我们需要对li设置float:left;使其在同一行. 并设置li的间距.
.topbar-items li {
float: left; padding: 0 12px;
}
复制代码链接的布局设置完成, 接下来只需要设置a的颜色及行间距即可.
.topbar-items li a {
color: #bfbfbf; line-height: 40px;
}
复制代码至此, 页眉的基本样式完成.
5.3 头部布局
根据头部样式, 可以按照下图方式进行布局:
- 头部分为两个区域: 使用浮动设置LOGO居左, 搜索区域居右
- 右侧搜索区分为: 搜索框按钮区域, 关键词链接区域. 上下排列不需要设置浮动
- 搜索框按钮区域下包含搜索框及两个按钮, 设置浮动使3个节点在一行
根据划分的区域写出对应的HTML:
"header">
"layout">
"logo" href="#">
"img/logo.png" alt="" />
"searchbar">
"searchbox">
"search-input" type="text" />
"javascript:;" class="search-btn search-goods">搜索宝贝
"javascript:;" class="search-btn search-shop">搜索店铺
复制代码对LOGO设置float: left;使其居左, 搜索区域设置float: right;
.logo {
float: left;
}
.searchbar {
float: right;
}
复制代码LOGO和搜索区域都设置了浮动, 其父元素(头部)的高度为0, 因此需要设置父元素高度.
.header {
height: 70px;
}
复制代码设置右侧搜索框按钮区域样式: 由于搜索输入框及两个按钮是行内元素, 无法设置宽度和高度, 因此需要对三个元素设置float: left;使其在一行(行内元素设置浮动后可设置宽高).
设置搜索输入框的宽高使其变大, 并设置边框. 设置两个按钮的宽度及各自的背景色.
.searchbar .search-input {
float: left; height: 30px; width: 340px; padding: 5px 10px;
font-size: 14px; border: 2px solid #FC8080; border-right: none;
}
.searchbar .search-btn {
float: left; height: 44px; text-align: center; line-height: 44px;
font-size: 14px; padding: 0 20px; color: #fff;
}
.searchbar .search-goods {
background-color: #FC5656;
}
.searchbar .search-shop {
background-color: #aaa;
}
复制代码三个元素都设置了浮动, 其父元素(右侧搜索框按钮区域)的高度为0, 因此需要设置父元素高度.
.searchbar .searchbox {
height: 44px;
}
复制代码设置搜索关键字链接的间距及顶部距离搜索框的间距
.searchbar .keywords {
margin-top: 6px;
}
.searchbar .keywords a {
margin-right: 10px;
}
复制代码调整头部的内边距, 使其距离页眉及主体有一定的间距
.header {
height: 70px; padding: 15px 0;
}
复制代码至此, 头部的样式设置完成.
5.4 页脚布局
页脚布局相对简单, 两个区域分别为链接区域和版权信息. 两个区域上下排列不需要设置浮动.
"footer">
"coryright">Copyright 2018 atd681 版权所有
复制代码设置链接区域的字体颜色及链接的左右边距使其与分隔符("|")产生相应的间距.
.footer .links a {
margin: 0 10px; color: ##bfbfbf;
}
复制代码设置版权信息的字体颜色, 设置与上面链接区域的距离(外边距)
.footer .copyright {
color: #bfbfbf; margin-top: 10px;
}
复制代码设置页脚的背景色及所有文字居中, 同时调整页脚的内边距, 使页脚高度增加.
.footer {
text-align: center; background-color: #363636; padding: 40px 0;
}
复制代码页脚制作完成.
未完待续....