有图有代码--DIV+CSS从0至1实现商品详情页布局(一)-程序员宅基地

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.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>电商的商品详情页</title>
        <!-- 引入CSS -->
        <link rel="stylesheet" type="text/css" href="css/detail.css"/>
    </head>
    <body>
    </body>
</html>
复制代码

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.

<body>
    <div class="topbar"></div>
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
</body>
复制代码

由于DIV是块级元素(默认占整行), 因此4个DIV依次从上到下排列, 因此不需要CSS控制其位置.

块级元素: 和父容器宽度相同, 单独占一行, 不允许其他元素同在一行. 如: DIV, P, UL, H1-H6
行级元素: 宽度为内容的宽度. 多个行级元素在同一行, 无法设置宽度和高度. 如: span, a, em

5.2 页眉布局

下面对页眉进行布局, 页眉布局很简单, 分为左侧和右侧两个区域, 都是样式相同的链接.

左右两侧的链接样式主体相同, 可使用同一样式
通过浮动对两个区域布局, 分别居左和居右
页眉非全屏, 有宽度, 需要将内容放在layout样式内

<div class="topbar">
    <!-- layout样式控制页眉内容的宽度 -->
    <div class="layout">
        <!-- 页眉左侧内容. topbar-items: 统一控制链接样式, topbar-items-right: 控制居左  -->
        <ul class="topbar-items topbar-items-left">
            <li class="item"><a href="#">首页</a></li>
            <li class="item"><a href="#">客户端</a></li>
            <li class="item"><a href="#">英文版</a></li>
        </ul>
        <!-- 页眉右侧内容. topbar-items: 统一控制链接样式, topbar-items-right: 控制居右  -->
        <ul class="topbar-items topbar-items-right">
            <li class="item"><a href="#">登录</a></li>
            <li class="item"><a href="">注册</a></li>
            <li class="item"><a href="#">个人中心</a></li>
            <li class="item"><a href="#">我的订单</a></li>
            <li class="item"><a href="#">收藏夹</a></li>
            <li class="item"><a href="#">购物车</a></li>
        </ul>
    </div>
</div>
复制代码

设置页眉的背景色:

.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:

<div class="header">
    <!-- layout样式控制头部内容的宽度 -->
    <div class="layout">
        <!-- 左侧LOGO区域. 由于LOGO可点击, 因此使用a标签 -->
        <a class="logo" href="#">
            <img src="img/logo.png" alt="" />
        </a>
        <!-- 右侧搜索区域 -->
        <div class="searchbar">
            <!-- 搜索框按钮区域 -->
            <div class="searchbox">
                <input class="search-input" type="text" />
                <!-- search-btn: 控制按钮样式, search-goods/search-shop: 控制按钮背景色 -->
                <a href="javascript:;" class="search-btn search-goods">搜索宝贝</a>
                <a href="javascript:;" class="search-btn search-shop">搜索店铺</a>
            </div>
            <!-- 搜索关键词链接区域 -->
            <div class="keywords">
                <a href="#">关键词1</a>
                <a href="#">关键词2</a>
                <a href="#">关键词3</a>
                <a href="#">关键词4</a>
            </div>
        </div>
    </div>
</div>
复制代码

对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 页脚布局

页脚布局相对简单, 两个区域分别为链接区域和版权信息. 两个区域上下排列不需要设置浮动.

<div class="footer">
    <div class="links">
        <a href="#">关于本站</a>|
        <a href="#">关于我们</a>|
        <a href="#">团队成员</a>|
        <a href="#">联系我们</a>|
        <a href="#">意见反馈</a>
    </div>
    <div class="coryright">Copyright 2018 atd681 版权所有</div>
</div>
复制代码

设置链接区域的字体颜色及链接的左右边距使其与分隔符("|")产生相应的间距.

.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;
}
复制代码

页脚制作完成.

未完待续....