顶部通栏实现

一、头部展示

二、头部概述

头部主要由四部分组成，由栅格系统实现
当屏幕宽度小于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框架中定义好的

bootstrap实战--微金所项目(顶部通栏)相关推荐

bootstrap实战--微金所项目(导航栏)
导航栏实现一.导航栏展示二.导航栏实现思路导航栏在不同的屏幕大小下呈现不同的样式,移动端下使用手风琴菜单(有现成的代码),在sm屏幕下,除了微金所图标和个人中心外,其余都不可见. 三.相关代码 ...
bootstrap实战--微金所项目(轮播图1)
使用HTML+CSS实现响应式轮播图一.轮播图展示移动端(< 768px) 非移动端(>768px) 二.轮播图实现思路移动端 1).在移动端可以直接使用bootstrap提供的相关 ...
bootstrap实战--微金所项目(轮播图2)
利用Jquery+css+html来实现一.实现思路将a标签通过Jquery的方式动态生成然后添加到相应位置即可二.相关代码 HTML代码 <!-- 移 ...
传智播客微金所项目实战
微金所项目实战(出处:传智播客) 1. 搭建Bootstrap页面骨架及项目目录结构 ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...
移动端web总结（二）——微金所项目总结
移动端微金所项目知识点总结 1,媒体查询:使用媒体查询能针对不同屏幕区间设置不同的布局和样式语法: @media screen and (max-width: 768px) and (min-wid ...
BootStrap---day02、03微金所项目
BootStrap---day02.03微金所项目前两天没有更新,主要是因为做项目做得没有心情来写博客了(真的很菜),今天的任务都做完了,就来写一写这几天使用BootStrap写项目的总结和心得. ...
微金所项目-响应式开发文档
此案例例采用bootstrop开发响应式所以先简单介绍一下bootstrop bootstrop官网https://v3.bootcss.com/,下载即可基本模板 <!DOCTYPE htm ...
传智播客微金所项目实战移动web开发
1.源码笔记我的源码+笔记(很重要):链接: http://pan.baidu.com/s/1kULKqcJ 感谢传智播客项目相关视频:1.6天链接: https://pan.baidu.com/ ...
Bootstrap项目之微金所
微金所项目实战搭建Bootstrap页面骨架及项目目录结构 ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ················ ...

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

顶部通栏实现

一、头部展示

二、头部概述

三、相关代码

四、相关知识总结

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

2.&nbsp — 空格

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

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

5. CSS3中任意元素的居中

6.定位相关知识

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

bootstrap实战--微金所项目(顶部通栏)相关推荐

最新文章

热门文章