8项目通关前端/美团网布局项目01：宏观布局拆分

搬砖的乔布梭
1,499 阅读8分钟

PS：这样起标题大家爱看么，还是都独立成篇比较好？哪个颜值高的给评论下呗🙃...

项目篇

@Web项目的一般研发流程

请戳某的另一篇博文 👇👇👇

浅谈敏捷开发与互联网江湖的爱恨情仇

@获得设计效果图

由于是直接山寨美团，美团妹子的微信我一个也没有，此处我们只要自行截图并处理一下，以得到美术效果图了。

浏览器截图

  • 使用 Chrome浏览器 打开 美团并缓慢地一撸到底，然后进行完整页面截图

image.png

  • 浏览器会自动下载截图，在文件夹中找到这张图片

image.png

  • 发现美团页面使用的是 单列通栏布局 （参考资料：常见页面布局）

image.png

校正截图尺寸

  • 我们页面上右键检查打开控制台，在Elements选项卡下能够看到页面的HTML布局，从body开始逐渐向下筛查找到页面主体部分，左侧我们看到其宽度为1190像素，记下这个数据；

image.png

  • 打开PS，将前面的截图拖入，ctrl+r打开标尺

image.png

  • 设置一下PS：在窗口菜单下勾选显示 信息面板，然后按下图所示设置一下信息面板；

image.png

  • 按ctrl+加号或减号，将视图缩放到合适尺寸，从左侧标尺拖拽出纵向辅助线，分别对应到主体内容的左右边界；

  • 使用选区工具，框选出任意矩形选区，但其左右边界应对齐上一步中的辅助线，在右侧的信息面板中我们可以看到选区的宽度为1488像素，这就是截图中主体内容的宽度了！

image.png

  • 我们发现1488px这一页面截图的宽度与页面的实际内容宽度1190px并不吻合，截图尺寸要大于实际页面尺寸，因此我们需要对截图进行一下图像缩小，其缩放比例为1190/1488；

  • PS菜单中图像-图像尺寸，打开下面的面板，查看当前图像尺寸 image.png

  • 将尺寸等比缩小到宽度为1578*1190/1488=1,261.98≈1263像素，因此

image.png

  • 现在我们的内容宽度基本为1190像素了！ctrl+s保存图片（怕操作不好建议对原始截图事先备份一下）

image.png

  • 至此，我们完美得到 “设计效果图” 😎~

ZZuBv80y67UxVbl1a0pYaaoNce5MXatr.gif

@PS整体布局分析

页面可以整理理解为页头宽（100%），内容与页脚窄（1190像素）的T字型布局，因此我们可以将大的页面布局拆分如下：

image.png

@页面切分实现

我们来做基本页面拆分，代码实现如下：

HTML

<body>
    <!-- 页头 -->
    <div class="header">页头</div>

    <!-- banner -->
    <div class="banner">BANNER</div>

    <!-- 猫眼电影 -->
    <div class="movie">猫眼电影</div>

    <!-- 民宿推荐 -->
    <div class="minsu">民宿推荐</div>

    <!-- 猜你喜欢 -->
    <div class="likes">猜你喜欢</div>

    <!-- 美团导航 -->
    <div class="navi">美团导航</div>

    <!-- 友情链接 -->
    <div class="links">友情链接</div>

    <!-- 页脚 -->
    <div class="footer">页脚</div>
</body>

下面我们根据类名给这堆破盒子插入样式！

<style>
    /* 清除默认margin和padding */
    * {
        margin: 0;
        padding: 0;
    }

    /* 所有div */
    div {
        font-size: 50px;

        /* 文字水平居中 */
        text-align: center;
    }

    /* 页头 */
    .header {
        /* 与页面等宽 */
        width: 100%;

        /* 高度与行高相等时 文字会垂直居中 */
        height: 197px;
        line-height: 197px;

        /* 背景色 */
        background-color: red;
    }

    /* 后面的大块div的共性：组合选择器 */
    .banner,
    .movie,
    .minsu,
    .likes,
    .navi,
    .links,
    .footer {
        /* 固定宽度 */
        width: 1190px;

        /* 左右居中 */
        margin: 0 auto;
    }

    /* 每个盒子的颜色和高度不尽相同 */
    .banner {
        height: 447px;
        line-height: 447px;
        background-color: green;
    }

    .movie {
        height: 382px;
        line-height: 382px;
        background-color: blue;
    }

    .minsu {
        height: 774px;
        line-height: 774px;
        background-color: red;
    }

    .likes {
        height: 841px;
        line-height: 841px;
        background-color: green;
    }

    .navi {
        height: 330px;
        line-height: 330px;
        background-color: blue;
    }

    .links {
        height: 610px;
        line-height: 610px;
        background-color: red;
    }

    .footer {
        height: 141px;
        line-height: 141px;
        background-color: green;
    }
</style>

就可以啦！页面运行效果如下：

image.png

帅爆了！今天的实操代码到此结束！下课！

src=http___c-ssl.duitang.com_uploads_item_201506_17_20150617133303_tUaSz.thumb.400_0.gif&refer=http___c-ssl.duitang.gif

基础篇

严肃点！以下是今天代码中涉及到的布局知识！

@基础概念

HTML

  • 全写为HyperTextMarkupLanguage，直译为 超文本标记语言
  • 言下之意明明一段字符代码，浏览器在显示（渲染）时却能形成很炫的效果，因此它是“超级文本”；
  • HTML语言的基本元素是标签/元素；
  • 每个标签都有其特定的语义，特定的属性，浏览器能够根据标签的语义和属性，按约定方式去绘制特定的效果；
<div class="minsu">民宿推荐</div>
  • 在上面的HTML代码中 div就是标签名，我们注意到它是成对出现的，class="minsu"是它的一个属性；
  • HTML语言中有狠多标签和属性，每个标签名具体是何含义（语义），每个属性具体代表什么，浏览器应该怎么理解和渲染这些标签和属性，是有一整套标准的，即 W3C标准；

CSS

  • 全称CascadingStyleSheets，直译为层叠样式表；
  • 是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言；
  • CSS文件扩展名为 .css；
  • 通过使用CSS我们可以大大提升网页开发的工作效率；
  • CSS3现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

W3C

  • W3C 指万维网联盟（World Wide Web Consortium）
  • W3C 创建于1994年10月，由 Tim Berners-Lee 创建；
  • W3C 的工作是对 web 进行标准化，创建并维护 WWW 标准，用于规范浏览器对HTML和CSS的渲染行为；
  • W3C 是一个会员组织，其会员包括微软、苹果、谷歌...不一一列举了，凡是造浏览器的厂商都是会员；
  • W3C 标准被称为 W3C 推荐（W3C 规范）
  • “推荐”而非强制，但上一个不响应“推荐”的浏览器已经被其亲妈所抛弃了，即微软抛弃IE的故事；

@HTML常用标签

div标签

  • 语义就是分块（division），常用于页面大块划分
  • 每个div标签在页面中独占一行

@HTML常用属性

class类

  • class属性定义了元素的类名;
  • CSS可以根据类名去定义一套样式，物以类聚，所有具有相同类名的标签/元素都将天下乌鸦一般黑，获得相同的样式；
  • 例如上面的案例中我们给一个div元素添加了类名名曰banner，在CSS样式(style)中，我们为其设置了元素高度、文本行高、背景色等样式，那么所有class为banner的元素都将具有这几个相同样式；
<div class="banner">BANNER</div>

.banner {
    height: 447px;
    line-height: 447px;
    background-color: green;
}

@CSS选择器

标签选择器

  • 选中所有特定的标签并同意添加样式
/* 标签选择器 选中所有div */
div {
    ...
}

类选择器

  • HTML标签上有属性class="xxx"时，CSS可以通过.xxx{具体样式}的方式来定位到所有具有该类名的元素，统一给它们添加相同的样式；
  • 例如上面的.banner

通配符选择器

  • 选中所有元素并统一添加样式！
* {
    ...
}

群组选择器

  • 通过逗号隔开的方式，一次性选中一堆选择器（可以是标签选择器、类选择器、通配符选择器以及我们后续会学的各种复杂选择器），并给命中的元素统一添加样式；
.banner,
.movie,
.minsu,
.likes,
.navi,
.links,
.footer {
    ...
}

选择器权重

  • 大家应该已经注意到了，标签选择器、类名选择器、通配符选择器常常会同时命中同一目标！
  • 下面的例子中，类名为header的div元素会同时被三个选择器命中，如果这三个选择器的样式发生冲突的话，这个元素到底该听谁指挥呢？
* {...}

div {...}

.header {...}
  • 为解决这个问题，W3C就提出了选择器权重这一概念！

image.png

  • 多个选择器同时作用于相同元素且样式冲突的情况下，权重大的具有更高优先级；
  • 因此本例中通配选择器-标签选择器-类名选择器的权重分别为0-1-10，样式冲突的情况下类名选择器会起作用；
  • 后续随着我们的选择器种类越来越多、越来越复杂，相互交织和冲突的机会越来越多，我们在整体进行布局规划时就要尽量保持结构清晰、逻辑清晰！

@盒子模型

理论基础

image.png

  • 如图，我们把任何一个元素都看成是摆在页面上的一个盒子；
  • content部分是盒子中内容的宽高；
  • border部分是盒子的边框；
  • padding部分是内容距离边框的距离，我们称为内边距；
  • margin部分是盒子边框距离相邻元素或页面边界的距离，我们称为外边距；
  • 所以一个元素盒子真正在页面中占据的尺寸为：内容宽高 + 内边距 + 边框粗细 + 外边距；

demo

demos/002/盒模型.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        该元素盒子实际占用宽度
        =内容宽 + 左右内边距 + 边框 + 左右外边距
        =200 + 20 + 10 + 5 = 235px

        该元素盒子实际占用高度
        =内容高 + 上下内边距 + 边框 + 上下外边距
        =100 + 20 + 10 + 5 = 135px
        */
        .box {
            /* 内容宽高 */
            width: 200px;
            height: 100px;

            /* 内边距 */
            padding: 20px;

            /* 边框 */
            border: 10px solid black;

            /* 外边距 */
            margin: 5px;

            /* 背景色 */
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        哥是一个盒子
    </div>
</body>
</html>

image.png

盒子模型是页面布局的基础性概念，大家这里先有一个初步了解，后续我们还将持续用到它，深入它！

@今日样式详解

/* 当前盒子的内容宽度与父元素等宽 */
width: 100%;

/* 内容宽度 */
width: 1190px;

/* 当前盒子中的内容高度 */
height: 197px;

/* 字号为50像素，即每个字符恰好填满一个50像素见方的正方形 */
font-size: 50px;

/* 文字水平居中 */
text-align: center;

/* 
文字在行高内垂直居中
因此想要让文字内容在盒子里垂直居中时 
我们通常将行高设置的与内容高度一致 
*/
line-height: 197px;

/* 盒子外边距0 */
margin: 0;

/* 盒子与内容的内边距为0 */
padding: 0;

/* 盒子的背景颜色：覆盖内容宽高 + 内边距 */
background-color: red;

项目源码

☛ 8大实战项目通透Web前端开发 FE8Max-2301

“这不需要测试，肯定是好的，不必担心！”

image.png
avatar
文章
阅读
粉丝