页面Header自适应屏幕
2024-08-23 20:14:41
<!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, user-scalable=0">
<title>title</title> <!-- Bootstrap核心样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.load{
position: absolute;
left: 50%;
top: 28px;
transform: translateX(-50%) translateY(-50%);
}
.load a{
text-decoration: none;
color: #999;
margin: 0 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- 导航头部 -->
<div class="navbar-header ">
<a href="#" class="navbar-brand">
</a>
<button class="navbar-toggle collapsed" data-toggle='collapse' data-target='.collapse'>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 导航链接 -->
<div class="collapse navbar-collapse">
<!-- 默认的导航 -->
<ul class="nav navbar-nav">
<li class="hidden-xs"><a href="#">岗位课1</a></li>
<li class="hidden-sm hidden-xs"><a href="#">岗位课2</a></li>
<li class="hidden-sm hidden-xs"><a href="#">岗位课3</a></li>
<li class="hidden-md hidden-sm hidden-xs"><a href="#">岗位课4</a></li>
<li class="hidden-md hidden-sm hidden-xs"><a href="#">岗位课5</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle='dropdown'>
岗位课6
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">About us</a></li>
<li class="hidden-lg hidden-md hidden-sm"><a href="#">岗位课1</a></li>
<li class="hidden-lg hidden-md"><a href="#">岗位课2</a></li>
<li class="hidden-lg hidden-md"><a href="#">岗位课3</a></li>
<li class="hidden-lg"><a href="#">岗位课4</a></li>
<li class="hidden-lg"><a href="#">岗位课5</a></li>
</ul>
</li>
</ul> <form class="navbar-form navbar-left hidden-xs">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-danger">搜索</button>
</form> </div>
<div class="load">
<a href="#" class="hidden-lg hidden-md hidden-sm">登录</a>
<a href="#" class="hidden-lg hidden-md hidden-sm">注册</a>
</div>
</div>
</nav> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
最新文章
- STM32之独立看门狗与窗口看门狗总结
- Windows Azure Cloud Service (38) 微软IaaS与PaaS比较
- swift学习之UI控件（一）
- andriod 带看括弧的计算器
- Linux 日志文件utmp、wtmp、lastlog、messages
- Codeforces Round #362 (Div. 2) C. Lorenzo Von Matterhorn (类似LCA)
- 数据结构（脑洞题，BIT）：COGS 2394. 比赛
- Errore HTTP 404.2 - Not Found" IIS 7.5 请求的内容似乎是脚本，因而将无法由静态文件处理程序来处理
- 奇怪的haproxy 跳转
- Hibernate二级缓存原理
- Flask從入門到入土(三)——模板
- B-end
- hdu 5122（2014北京—dp）
- [数分提高]2014-2015-2第6教学周第1次课讲义 3.3 Taylor 公式
- 【性能测试】LoadRunner11安装（包含破解、汉化）
- springmvc简单的流程说明及源码分析
- tensorflow，object，detection，在model zoom，新下载的模型，WARNING:root:Variable [resnet_v1_50/block1/unit_3/bottleneck_v1/conv3/BatchNorm/gamma] is not available in checkpoint
- 063 SparkStream数据接收方式
- .NET：Threading and Exceptions
- python list 常用