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

技术标签： ViewUI  ui  前端  javascript  

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

页脚制作完成.

未完待续....

转载于:https://juejin.im/post/5b856cb06fb9a019c040b590
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34129145/article/details/91472156

智能推荐

874计算机科学基础综合,2018年四川大学874计算机科学专业基础综合之计算机操作系统考研仿真模拟五套题...-程序员宅基地

文章浏览阅读1.1k次。一、选择题1． 串行接口是指( )。A. 接口与系统总线之间串行传送，接口与I/0设备之间串行传送B. 接口与系统总线之间串行传送，接口与1/0设备之间并行传送C. 接口与系统总线之间并行传送，接口与I/0设备之间串行传送D. 接口与系统总线之间并行传送，接口与I/0设备之间并行传送【答案】C2． 最容易造成很多小碎片的可变分区分配算法是( )。A. 首次适应算法B. 最佳适应算法..._874 计算机科学专业基础综合题型

XShell连接失败：Could not connect to '192.168.191.128' (port 22): Connection failed._could not connect to '192.168.17.128' (port 22): c-程序员宅基地

文章浏览阅读9.7k次，点赞5次，收藏15次。连接xshell失败，报错如下图，怎么解决呢。1、通过ps -e|grep ssh命令判断是否安装ssh服务2、如果只有客户端安装了，服务器没有安装，则需要安装ssh服务器，命令：apt-get install openssh-server3、安装成功之后，启动ssh服务，命令：/etc/init.d/ssh start4、通过ps -e|grep ssh命令再次判断是否正确启动..._could not connect to '192.168.17.128' (port 22): connection failed.

杰理之KeyPage【篇】_杰理 空白芯片 烧入key文件-程序员宅基地

文章浏览阅读209次。00000000_杰理 空白芯片 烧入key文件

一文读懂ChatGPT，满足你对chatGPT的好奇心_引发对chatgpt兴趣的表述-程序员宅基地

文章浏览阅读475次。2023年初，“ChatGPT”一词在社交媒体上引起了热议，人们纷纷探讨它的本质和对社会的影响。就连央视新闻也对此进行了报道。作为新传专业的前沿人士，我们当然不能忽视这一热点。本文将全面解析ChatGPT，打开“技术黑箱”，探讨它对新闻与传播领域的影响。_引发对chatgpt兴趣的表述

中文字符频率统计python_用Python数据分析方法进行汉字声调频率统计分析-程序员宅基地

文章浏览阅读259次。用Python数据分析方法进行汉字声调频率统计分析木合塔尔·沙地克;布合力齐姑丽·瓦斯力【期刊名称】《电脑知识与技术》【年(卷),期】2017(013)035【摘要】该文首先用Python程序,自动获取基本汉字字符集中的所有汉字,然后用汉字拼音转换工具pypinyin把所有汉字转换成拼音,最后根据所有汉字的拼音声调,统计并可视化拼音声调的占比.【总页数】2页(13-14)【关键词】数据分析;数据可..._汉字声调频率统计

linux输出信息调试信息重定向-程序员宅基地

文章浏览阅读64次。最近在做一个android系统移植的项目，所使用的开发板com1是调试串口，就是说会有uboot和kernel的调试信息打印在com1上（ttySAC0）。因为后期要使用ttySAC0作为上层应用通信串口，所以要把所有的调试信息都给去掉。参考网上的几篇文章，自己做了如下修改，终于把调试信息重定向到ttySAC1上了，在这做下记录。参考文章有：http://blog.csdn.net/longt..._嵌入式rootfs 输出重定向到/dev/console

随便推点

uniapp 引入iconfont图标库彩色symbol教程_uniapp symbol图标-程序员宅基地

文章浏览阅读1.2k次，点赞4次，收藏12次。1，先去iconfont登录，然后选择图标加入购物车 2，点击又上角车车添加进入项目我的项目中就会出现选择的图标 3，点击下载至本地，然后解压文件夹，然后切换到uniapp打开终端运行注：要保证自己电脑有安装node(没有安装node可以去官网下载Node.js 中文网)npm i -g iconfont-tools（mac用户失败的话在前面加个sudo，password就是自己的开机密码吧）4,终端切换到上面解压的文件夹里面，运行iconfont-tools 这些可以默认也可以自己命名（我是自己命名的_uniapp symbol图标

C、C++ 对于char*和char[]的理解_c++ char*-程序员宅基地

文章浏览阅读1.2w次，点赞25次，收藏192次。char*和char[]都是指针，指向第一个字符所在的地址，但char*是常量的指针，char[]是指针的常量_c++ char*

Sublime Text2 使用教程-程序员宅基地

文章浏览阅读930次。代码编辑器或者文本编辑器，对于程序员来说，就像剑与战士一样，谁都想拥有一把可以随心驾驭且锋利无比的宝剑，而每一位程序员，同样会去追求最适合自己的强大、灵活的编辑器，相信你和我一样，都不会例外。我用过的编辑器不少，真不少～ 但却没有哪款让我特别心仪的，直到我遇到了 Sublime Text 2 ！如果说“神器”是我能给予一款软件最高的评价，那么我很乐意为它封上这么一个称号。它小巧绿色且速度非

对10个整数进行按照从小到大的顺序排序用选择法和冒泡排序_对十个数进行大小排序java-程序员宅基地

文章浏览阅读4.1k次。一、选择法这是每一个数出来跟后面所有的进行比较。2.冒泡排序法，是两个相邻的进行对比。_对十个数进行大小排序java

物联网开发笔记——使用网络调试助手连接阿里云物联网平台（基于MQTT协议）_网络调试助手连接阿里云连不上-程序员宅基地

文章浏览阅读2.9k次。物联网开发笔记——使用网络调试助手连接阿里云物联网平台（基于MQTT协议）其实作者本意是使用4G模块来实现与阿里云物联网平台的连接过程，但是由于自己用的4G模块自身的限制，使得阿里云连接总是无法建立，已经联系客服返厂检修了，于是我在此使用网络调试助手来演示如何与阿里云物联网平台建立连接。一.准备工作1.MQTT协议说明文档（3.1.1版本）2.网络调试助手（可使用域名与服务器建立连接）PS：与阿里云建立连解释，最好使用域名来完成连接过程，而不是使用IP号。这里我跟阿里云的售后工程师咨询过，表示对应_网络调试助手连接阿里云连不上

＜＜＜零基础C++速成＞＞＞_无c语言基础c++期末速成-程序员宅基地

文章浏览阅读544次，点赞5次，收藏6次。运算符与表达式任何高级程序设计语言中，表达式都是最基本的组成部分，可以说C++中的大部分语句都是由表达式构成的。_无c语言基础c++期末速成

推荐文章

热门文章

相关标签