8项目通关前端/美团网布局项目02：完成顶栏布局

搬砖的乔布梭
1,100 阅读4分钟

@预期效果

今天我们来完成顶栏的布局，设计效果图如下：

image.png

@布局思路

  • 观察效果图，众多导航链接被分成左右两个片区，一部分向左浮动，一部分向右浮动，我们先在内容上将其分为左右两部分；
  • 我们使用没有特殊语义的span标签来盛放文字内容；
  • 向左浮动的部分我们用一个盒子装起来，类名名曰left，相应的向右浮动的部分我们圈起来，名曰right，令这两个盒子分别向左和向右浮动；
  • 最后再在左右两个盒子内部给予各span以一定的左右间距；

开造，Lets Go

1a4dd74a8d4a4b6e82ff00b5556a16dc.gif

@HTML部分

得到HTML如下：

<!-- 顶栏内容 -->
<div class="topbar">

    <!-- 这是一个宽度为1190的盒子水平居中放置 -->
    <div class="box">

        <!-- 向左浮动的片区 -->
        <div class="left">
            <!-- <i class="iconfont icon-weizhi"></i> -->
            <span class="sp-city" id="sp-city">北京</span>
            <span class="sp-change-city">切换城市</span>
            [<span>门头沟区</span>
            <span>廊坊</span>
            <span>大厂回族自治县</span>]
            <span id="sp-login">立即登录</span>
            <span>注册</span>
        </div>

        <!-- 向右浮动的片区 -->
        <div class="right">
            <span>我的美团</span>
            <span>手机App</span>
            <span>商家中心</span>
            <span>美团规则</span>
            <span>网站导航</span>
        </div>
    </div>

</div>

不考虑样式的话则效果如下：

  • 左右两个div分别独占一行；
  • span作为行内元素一字横排；
  • 字体大小、行高、间距等一切样式全部使用 浏览器默认样式；

image.png

基本轻松 + 愉快！甚至有点Boring。。。

2021_0710_5eb79c8bg00qw19ay03vwc000hs00a0m.gif

@样式部分

全局样式预置

  • 以下样式为全局样式，今后在不同工程中都会用到，我们将其拆分到一个独立的CSS文件 中，再在HTML文件中进行导入；

css/reset.css

/* 清除浏览器默认margin和padding */
* {

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

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

/* 将页面整体底色设置为浅灰色 */
body {
    background-color: #f8f8f8;
}

/* 所有的列表项目前不加项目符号 */
ul,li {
    list-style: none;
}

index.html

<head>
    ...
    <!-- 导入全局样式预置 -->
    <link rel="stylesheet" href="./css/reset.css">
    ...
</head>

独立的页面样式文件

  • 一个前端站点可能有狠多独立的页面，样式相互独立、互不干扰，因此我们将主页的样式独立书写为index.css文件；
  • 并在index.html文件中对样式进行导入；

index.html

<head>
    ...
    <!-- 导入当前页面的独立样式文件 -->
    <link rel="stylesheet" href="./css/index.css">
    ...
</head>

顶栏整体设置

39像素灰底文字垂直居中

/* 顶栏样式 */
.topbar {
    /* div作为块级元素宽度默认铺满全屏 */

    /* 高度与行高一致时 文字将垂直居中 */
    height: 39px;
    line-height: 39px;

    // 背景色
    background-color: #f8f8f8;
}

居中放置一个宽度容器

/* 水平居中放置一个宽度为1190的盒子 用于盛放左右两大片区 */
.topbar>.box {
    width: 1190px;
    margin: 0 auto;
}

设置浮动片区

/* 定义左右浮动类 */
.left {
    float: left;
}

.right {
    float: right;
}

文本字号和间距

/* 当前城市紧贴父盒子左侧 */
#sp-city {
    margin-left: 0;
}

/* 设置顶栏文字颜色 */
.topbar>.box span {
    color: #999;
}

/* 【当前城市】和【切换城市】拥有更深的颜色 */
.topbar>.box .sp-city,
.topbar>.box .sp-change-city {
    color: #666;
}

/* 导航文字被鼠标覆盖时改变颜色 */
.topbar>.box span:hover {
    color: orange;

    // 手形指针
    cursor: pointer;
}

/* 【当前城市】被鼠标覆盖时依然维持原来颜色 */
#sp-city:hover {
    color: #666;
}

/* 定义左右两大片区内的文本字号 */
.topbar>.box>.left,
.topbar>.box>.right {
    font-size: 12px;
}

/* 左侧片区内文本左右间距为4像素 */
/* 左侧盒子的右间距 + 右侧盒子的左间距 实际为8像素 */
.topbar>.box>.left>span {
    margin: 0 4px;
}

/* 右侧片区文字间距稍大 */
.topbar>.box>.right>span {
    margin: 0 15px;
}

/* 左侧片区的登录文字 左间距较大 */
#sp-login {
    margin-left: 22px;
}

使用字体图标

  • 引入我们在 iconfont 上创建的项目的在线样式地址；
<head>
    ...
    <!-- 导入iconfont的样式文件 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3907926_uqjd4mtpl0h.css">
</head>
  • 在当前城市左侧使用i标签插入图标样式
<!-- 使用iconfont字体图标 -->
<i class="iconfont icon-weizhi"></i>

@完整代码

HTML

<!-- 顶栏内容 -->
<div class="topbar">

    <!-- 这是一个宽度为1190的盒子水平居中放置 -->
    <div class="box">

        <!-- 向左浮动的片区 -->
        <div class="left">

            <!-- 使用iconfont字体图标 -->
            <i class="iconfont icon-weizhi"></i>

            <span class="sp-city" id="sp-city">北京</span>
            <span class="sp-change-city">切换城市</span>
            [<span>门头沟区</span>
            <span>廊坊</span>
            <span>大厂回族自治县</span>]
            <span id="sp-login">立即登录</span>
            <span>注册</span>
        </div>

        <!-- 向右浮动的片区 -->
        <div class="right">
            <span>我的美团</span>
            <span>手机App</span>
            <span>商家中心</span>
            <span>美团规则</span>
            <span>网站导航</span>
        </div>
    </div>

</div>

CSS

/* 顶栏样式 */
.topbar {

    /* div作为块级元素宽度默认铺满全屏 */

    /* 高度与行高一致时 文字将垂直居中 */
    height: 39px;
    line-height: 39px;

    // 背景色
    background-color: #f8f8f8;
}

/* 水平居中放置一个宽度为1190的盒子 用于盛放左右两大片区 */
.topbar>.box {
    width: 1190px;
    margin: 0 auto;
}

/* 定义左右浮动类 */
.left {
    float: left;
}

.right {
    float: right;
}

i.icon-weizhi {
    color: #999;
    font-size: 12px;
}

/* 当前城市紧贴父盒子左侧 */
#sp-city {
    margin-left: 0;
}

/* 设置顶栏文字颜色 */
.topbar>.box span {
    color: #999;
}

/* 【当前城市】和【切换城市】拥有更深的颜色 */
.topbar>.box .sp-city,
.topbar>.box .sp-change-city {
    color: #666;
}

/* 导航文字被鼠标覆盖时改变颜色 */
.topbar>.box span:hover {
    color: orange;

    // 手形指针
    cursor: pointer;
}

/* 【当前城市】被鼠标覆盖时依然维持原来颜色 */
#sp-city:hover {
    color: #666;
}

/* 定义左右两大片区内的文本字号 */
.topbar>.box>.left,
.topbar>.box>.right {
    font-size: 12px;
}

/* 左侧片区内文本左右间距为4像素 */
/* 左侧盒子的右间距 + 右侧盒子的左间距 实际为8像素 */
.topbar>.box>.left>span {
    margin: 0 4px;
}

/* 右侧片区文字间距稍大 */
.topbar>.box>.right>span {
    margin: 0 15px;
}

/* 左侧片区的登录文字 左间距较大 */
#sp-login {
    margin-left: 22px;
}

Thats all for today！

1qFMl5cfebuLv4uqVRphJC18Rio5RD9g.gif

基础知识

avatar
文章
阅读
粉丝