Notes01：顶部和底部布局
来源：互联网 发布：java的缺点知乎 编辑：程序博客网 时间：2024/06/05 15:17
<!DOCTYPE html>
<html lang="zh_CN" class="">
<!-- BEGIN HEAD -->
<title>Metronic | Admin Dashboard Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href='http://fonts.useso.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet' type='text/css'>
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>-->
<link href="_start/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="_start/style.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body quick-markup_injected="true">
<!-- 定义顶部工具栏 -->
<div class="navbar navbar-inverse navbar-fixed-top" style1="display:none" role="navigation">
<div class="page-logo">//居左显示，并且显示图标有长宽显示
<a class="navbar-brand" target="_blank" href="http://www.easygoo.cn"><img src="_start/img/logo.png"></a>
</div>
<div class="btn-purchase">//居右显示
</div>
</div>
</div>
<div class="navbar-header">
<div class="page-logo">
<a class="navbar-brand" target="_blank" href="http://www.easygoo.cn"><img src="_start/img/logo.png"></a>
</div>
<div class="btn-purchase">
<a href="http://www.easygoo.cn/v8" target="_blank" class="btn btn-primary btn-default" role="button">V8帮助文档</a>
</div>
</div>
</div>
</div>
<!-- BEGIN JAVASCRIPTS -->
<!-- BEGIN CORE PLUGINS -->
<script src="plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script>
jQuery(document).ready(function() {
});
</script>
<!-- END JAVASCRIPTS -->
<div id="window-resizer-tooltip" style="display: none;"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1920</span> x <span class="tooltipHeight" id="winHeight">1080</span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1920</span> x <span class="tooltipHeight" id="vpHeight">479</span></div>
</body>
<!-- END BODY -->
<html lang="zh_CN" class="">
<!-- BEGIN HEAD -->
<!-- head部分基本为固定格式 -->
<head>
<meta charset="utf-8"/><title>Metronic | Admin Dashboard Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href='http://fonts.useso.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet' type='text/css'>
<!--<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>-->
<link href="_start/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="_start/style.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body quick-markup_injected="true">
<!-- 定义顶部工具栏 -->
<div class="navbar navbar-inverse navbar-fixed-top" style1="display:none" role="navigation">
<!--container定义为适应屏幕分辨率，@media (min-width: 1200px){.container {width: 1170px;}}
@media (min-width: 992px){.container {width: 960px;}} -->
<div class="container">
<div class="navbar-header"><div class="page-logo">//居左显示，并且显示图标有长宽显示
<a class="navbar-brand" target="_blank" href="http://www.easygoo.cn"><img src="_start/img/logo.png"></a>
</div>
<div class="btn-purchase">//居右显示
<a href="http://www.easygoo.cn/v8" target="_blank" class="btn btn-primary btn-default"
//以按钮形式显示
role="button">V8帮助文档</a>
</div></div>
</div>
</div>
//显示在底部
<div class="navbar navbar-inverse navbar-fixed-bottom" style1="display:none" role="navigation">
<div class="container"><div class="navbar-header">
<div class="page-logo">
<a class="navbar-brand" target="_blank" href="http://www.easygoo.cn"><img src="_start/img/logo.png"></a>
</div>
<div class="btn-purchase">
<a href="http://www.easygoo.cn/v8" target="_blank" class="btn btn-primary btn-default" role="button">V8帮助文档</a>
</div>
</div>
</div>
</div>
<!-- BEGIN JAVASCRIPTS -->
<!-- BEGIN CORE PLUGINS -->
<script src="plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script>
jQuery(document).ready(function() {
});
</script>
<!-- END JAVASCRIPTS -->
<div id="window-resizer-tooltip" style="display: none;"><a href="#" title="Edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltipTitle">Window size: </span><span class="tooltipWidth" id="winWidth">1920</span> x <span class="tooltipHeight" id="winHeight">1080</span><br><span class="tooltipTitle">Viewport size: </span><span class="tooltipWidth" id="vpWidth">1920</span> x <span class="tooltipHeight" id="vpHeight">479</span></div>
</body>
<!-- END BODY -->
</html>
效果：
0 0
- Notes01：顶部和底部布局
- 顶部和底部固定中间自适应的布局
- android-RelativeLayout实现顶部、中部、底部布局
- js回到顶部和底部
- 简单实现顶部和底部工具栏
- android顶部和底部导航栏
- 判断listview滑到顶部和底部
- jquery 返回顶部和返回底部代码
- 同时弹出顶部和底部的菜单
- listview 顶部添加和底部添加。
- 回到顶部和回到底部动画
- Android回到底部和返回顶部实现
- listView滑动到底部和顶部
- ScrollView判断滑动到底部和顶部
- 可顶部和底部显示的Snackbar
- 判断tableView滑到顶部和底部
- 滚动条滚动到底部和顶部
- android 控件布局(顶部、底部......) 留着自己用
- codeforces514
- 百度搜索开放平台，百度搜索api
- git在eclipse初步使用
- 我对Unity中Quaternion * Vector3的理解
- The iOS 8.1 simulator runtime is not available error in Xcode 6.1解决方案
- Notes01：顶部和底部布局
- J2EE集群原理
- 在Mac上从零开始搭建基于Github的Octopress博客
- 解决js代码中加入alert()就成功执行，不加就不对的问题!
- ZOJ 3702
- 《如果梵高生在中国》笔记
- UVa #11400 Lighting System Design (例题9-6)
- 背包九讲
- delphi 中的一个线程池单元的归纳说明
