css网页布局例子

最新推荐文章于 2022-10-23 22:17:22 发布

陈_三

最新推荐文章于 2022-10-23 22:17:22 发布

阅读量648

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qinshijangshan/article/details/53576967

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

直接上干货，自己鼓捣的一个布局页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>数据中心 | 布局页01</title>
  <!--
  <link rel="stylesheet" href="../static/css/ack.css">
  -->
  <style>
html {height: 100%;}
body{margin: 0;}
body {height: 100%;font: 14px/1 "Microsoft YaHei","simsun","Helvetica Neue",Tahoma,Helvetica,Arial,sans-serif;}
.wrapper {min-height: 100%;background-color:green;}
.navbar {
  position: relative;
  z-index: 2;
  line-height:50px;overflow:hidden;
  FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=#ed2c39);/*IE9-*/
  background: linear-gradient(to right, green, #ed2c39);/*IE10和其它浏览器,其他浏览器不同的低版本可能需要额外的设置*/
}
.navbar-fixed {
  position:fixed;
  width:100%;
}
.nav-brand {
  margin-left: 20px;font-size: 1.7em;font-weight: 500;color: #fff;
}
.nav-brand,.nav {display: inline-block;}
.nav {float: right;}
.container-fluid {
  position: relative;top: 0;bottom: 3.2em;
  z-index:0;
  height: 100%;background-color: #ccc;
}
.navbar-fixed + .container-fluid {padding-top: 55px;}
.sidebar {
  float: left;width: 190px;height:100%;background-color: red;
}
.sidebar:before {
  content: "";
  display: block;
  width: inherit;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: -1;
  border: inherit;
  background-color: inherit;
}
.page-content {
  height:100%;margin-left: 192px;
}
.footer-fixed {
  width: 100%;
  position:fixed;
  bottom:0;
}
.footer-inner {
  margin-left: 192px;
  margin-right:2px;
  padding-top: 1em;
  padding-bottom: 1em;
  border-top: 3px double #d5d5d5;
  text-align: center;
  background-color: #f2fdf9;
}
  </style>
  <!--[if lt IE 9]>
  <script src="../static/js/html5shiv.min.js"></script>
  <script src="../static/js/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<div class="wrapper">
  <nav class="navbar navbar-fixed" role="navigation">
    <div class="nav-brand">后台管理中心</div>

    <div class="nav">
      导航内容
    </div>
  </nav>

  <div class="container-fluid">
    <div class="sidebar">
      左侧导航栏
      <ul>
	    <li>菜单一</li>
	    <li>菜单二</li>
	    <li>菜单三</li>
	    <li>菜单四</li>
	    <li>菜单五</li>
	  </ul>
    </div>
  
    <div class="page-content">
      <span style="color:#f00">主体内容开始</span><br>
	  （你看见这部分的灰色是.container-fluid的背景色，外面的大绿色是页面包裹层.wrapper的背景;当你把下面的内容注释去掉,页面内容高度超过一屏，会出现竖向滚动条，.container-fluid的背景色在内容区域也就会覆盖掉.wrapper的背景色。）<br><br>
	  .wrapper用overflow-y: auto; 让最外层容器的背景能跟随文档流自适应;那么就不要用min-height,而用height，否则.wrapper也会有个竖向滚动条;此时文档流高度超过1屏高度的后面部分背景无法延伸;<br>
      这里还是用min-height:100%;毕竟背景可以延伸,且.container-fluidheight:100%;不会因为顶上还有个.navbar而出现竖向滚动条。<br>
	  之前用的navbar-fixed时需要给.container-fluid加上padding-top值;<br>
	  .sidebar:before的内容把.sidebar的背景补齐,看着像自适应高度一样;<br>
	  container-fluid加position:relative、.navbar和.sidebar:before分别加z-index都是为了防止被其他部分覆盖。<br>
      .navbar加上.navbar-fixed就会让导航栏固定在页面顶部，不随页面滚动;<br>
	  .navbar-fixed + .container-fluid {padding-top: 55px;}是因为position:fixed不占位,所以需要空出区域，避免.navbar遮挡.container-fluid中的内容;<br>
	  .footer加上.footer-fixed让footer始终固定于页面底部;.container-fluid加上margin-bottom避免footer会遮住.page-content的内容,不要加载.page-content上,那样内容未满一屏就会看到内容下面多出来空出来的地方。<br>
	  <span style="color:#f00">此实例在页面满一屏时,footer无法紧跟内容底部</span>
	  
	  <!--
	  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	  -->
	  <span style="color:#f00">主体内容结束</span>
    </div>	
  </div>
  
  <footer class="footer-fixed">
    <div class="footer-inner">支持IE8+、Firefox47.0.1、Chrome 53.0.2785.116 m、360安全浏览器8.1</div>
  </footer>
</div>

<!--[if lte IE 8]>
<script src="../static/js/jquery-1.x.min.js"></script>
<![endif]-->
<!--[if gt IE 8]><!-->
<script src="../static/js/jquery-2.x.min.js"></script>
<!--<![endif]-->
<script src="../static/js/ack.js"></script>
</body>
</html>