bootstrap实战--微金所项目(顶部通栏)

最新推荐文章于 2021-08-08 14:23:16 发布

驮石的乌龟

最新推荐文章于 2021-08-08 14:23:16 发布

阅读量709

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44363897/article/details/104187008

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

顶部通栏实现

一、头部展示

在这里插入图片描述

二、头部概述

头部主要由四部分组成，由栅格系统实现
当屏幕宽度小于992px时，该部分隐藏，响应式结构

三、相关代码

html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap 101 Template</title>
  <!-- Bootstrap -->
  <link href="./lib/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/webFont.css">
  <link rel="stylesheet" href="./css/index.css">
  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<header class="wjs_header hidden-sm hidden-xs">
  <div class="container-fluid">
      <div class="row">
          <div class="col-md-2">
            <a href="javascript:;" class="wjs_code">
              <span class="wjs_font wjs_phone"></span>
              <span>手机微金所</span>
              <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
              <img src="./images/code.jpg" alt="">
            </a>
          </div>
          <div class="col-md-5">
            <span class="wjs_font wjs_tel"></span>
            <a href="javascript:;">400-89-4006(服务时间：9:00-21:00)</a>
          </div>
          <div class="col-md-2">
            <a href="javascript:;">常见问题</a>&nbsp;&nbsp;
            <a href="javascript:;">财富登录</a>
          </div>
          <div class="col-md-3">
            <button type="button" class="btn btn-sm btn-danger">免费注册</button>
            <button type="button" class="btn btn-link">登录</button>
          </div>
      </div>
  </div>
</header>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="./lib/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./lib/js/bootstrap.min.js"></script>
</body>
</html>

less代码

//头部
.wjs_header{
  height:50px;
  line-height: 50px;
  border:1px solid #ccc;
  .row{
    height:100%;
    text-align: center;
    >div:nth-of-type(-n+3){
      border-right: 1px solid #cccccc;
    }
    a,span{
      color:#0f0f0f;
    }
    .wjs_code{
      position:relative;
      display: block;
      img{
        display: none;
        position:absolute;
        top:47px;
        left:50%;
        transform: translateX(-50%);
        border:1px solid #cccccc;
        border-top: none;
      }
      &:hover{
        >img{
          display: block;
        }
      }
    }
  }
}

四、相关知识总结

1.熟悉使用bootstrap中的字体图标和自定义的字体图标

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

字体图标放在span标签中

2.&nbsp — 空格

3.选择器:nth-of-type(n)的使用：

n可以是数字、关键词或者公式
当n是数字时：选择器选取父元素的第 n 个指定类型的子元素
当n是odd或even时，用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）
当为公式公式an + b时，表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

4.bootstrap3中在不同屏幕尺寸下的展示与隐藏

hiddle-*(sm,xs,md,lg) — 隐藏
visible-*(sm,xs,md,lg) ----显示
这两种写法在bootstrap4中已经废除。

5. CSS3中任意元素的居中

position定位+transform:translate(-50%,-50%)移动实现，推荐使用，无需考虑定位元素的宽和高

6.定位相关知识

绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的，一般情况下，开启子元素的绝对定位都会开启父元素的相对定位

7.按钮使用的是bootstrap框架中定义好的

在这里插入图片描述

驮石的乌龟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap实战--微金所项目(顶部通栏)

顶部通栏实现一、头部展示二、头部概述头部主要由四部分组成，由栅格系统实现当屏幕宽度小于992px时，该部分隐藏，响应式结构三、相关代码html代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="...
复制链接

扫一扫

专栏目录