bootstrap实战--微金所项目(顶部通栏)
2024-05-12 06:28:48
顶部通栏实现
一、头部展示
二、头部概述
- 头部主要由四部分组成，由栅格系统实现
- 当屏幕宽度小于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> <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.  — 空格
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/ ················ ...
最新文章
- Linux学习笔记——Linux磁盘管理
- ETSI GS MEC 016，Device application interface
- Motor XT615 开机无限卡屏重启的取证与分析
- birt报表表格边框_Python 快速设置 Excel 表格边框
- [转贴]关于项目管理的一点体会
- Java成神之路——ASM，Javassist，cglib区别。
- 硅谷程序员的回归能拯救印度“芯”吗？
- 解决request.getSession().getServletContext().getRealPath(“/“)为null问题
- 新浪微博、腾讯微博开放平台整合DEMO分享
- 华为交换机查看当前配置
- windows7下预览psd
- 软件工程导论—可行性研究
- RecordRTC的视频录制，回放，截图，下载
- android的终端模拟器,安卓开发者必备的 5 款 App：终端模拟器、颜色萃取、移动 IDE 等...
- vue项目出现错误component lists rendered with v-for should have explicit keys
- 机电控制与可编程序控制技术【1】
- RO段、RW段和ZI段
- 问题解决：取消Mac下Karabiner-Elements开机时弹出窗口、用Capslock切换中英文输入法、外接机械键盘 option 和 cmd 互换
- 物联网开发笔记（50）- 使用Micropython开发ESP32开发板之控制HC-SR501人体红外感应传感器
- 如何在本地进行一个IP访问多个域名