css 实现网页布局，上中下三部分，中间为固定宽度且分为左右两部分
<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>布局</title>

  <style>

  html,body{

         margin:0;

}

.topNav{

  border:solid 1px red;

  background: red;

  position: fixed;

  width:100%;

  height:60px;

  line-height:60px;

  text-align: center;

  color:#fff;

}

.centerContext{

  border:solid 1px blue;

  background: #ccc;

  position: absolute;

  width:1366px;

  bottom: 40px;

  top:60px;

  text-align: center;

  color:#fff;    left:0;

  right:0;

   margin:0 auto;

   z-index: -1;

}

.footer{

 border:solid 1px green;

  background: green;

  height:40px;

  line-height:40px;

  position: fixed;

  bottom: 0;

  width:100%;

  text-align: center;

  color:#fff;

}

.left{

   border:solid 1px #669ae1;

   background: #669ae1;

   width:300px;

   float:left;

   height:100%;

   margin-bottom: 40px;

   overflow: auto;

   color:#fff;

}

.right{

  border: solid 1px #1d5464;

  height:100%;

  background: #1d5464;

  color:#fff;

  overflow: auto;

  margin-left: 300px;

}

 .right div{height:1000px}

  </style>

 </head>

  <body>

   <div class="topNav">头部</div>

   <div class="centerContext">

        <div class="left">左边</div>

        <div class="right">

             <div >我是右边里面的内容我的高度是1000px</div>

        </div>

  </div>

 <div class="footer">底部</div>

</body>

</html>
上中下铺满全屏
<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

   <title>布局</title>

 <style>

html,body{margin:0}

 .topNav{

  border:solid 1px red;

  background: red;

  position: fixed;

  width:100%;

 height:60px;

 line-height:60px;

 text-align: center;

 color:#fff;

}

.centerContext{

  border:solid 1px blue;

  background: #ccc;

 position: absolute;

 width:100%;

 bottom: 40px;

 top:60px;

 text-align: center;

 color:#fff;

 left:0;

 right:0;

 margin:0 auto;

 z-index: -1;

}

.footer{

 border:solid 1px green;

 background: green;

 height:40px;

 line-height:40px;

 position: fixed;

  bottom: 0;

  width:100%;

   text-align: center;

  color:#fff;

}

 .left{

   border:solid 1px #669ae1;

   background: #669ae1;

   width:20%;

   float:left;

   height:100%;

   margin-bottom: 40px;

   overflow: auto;

   color:#fff;

   -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

   box-sizing: border-box;

}

.right{

   border: solid 1px #1d5464;

   height:100%;

   width:80%;

   background: #1d5464;

   color:#fff;

   overflow: auto;

   -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

   ox-sizing: border-box;

}

.right div{height:1000px}

 </style>

</head>

<body>

  <div class="topNav">头部</div>

   <div class="centerContext">

       <div class="left">左边</div>

       <div class="right">

  <div >我是右边里面的内容我的高度是1000px</div>

 </div>

 </div>

  <div class="footer">底部</div>

 </body>

</html>

css 实现的网页布局的更多相关文章

  1. CSS简单的网页布局

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  2. css基础-定位+网页布局案例

    position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...

  3. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  4. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  5. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  6. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  7. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

  8. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  9. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

随机推荐

  1. Matlab-11:Gausssidel迭代法工具箱

    算法推导: function [u,n]=GaussSeid(A,b,u0,eps,M) %GaussSeid.m为用高斯-塞德尔迭代法求解线性方程组 %A为线性方程组的系数矩阵 %b为线性方程组的常 ...

  2. php缓存机制

    1.全页面静态化缓存 <?php ob_start();//如果php.ini已经开启,那么这里会开启一个新的输出缓冲区; echo "<!DOCTYPE html>< ...

  3. .NET 高效开发之不可错过的实用工具（第一的当然是ReSharper插件）

    工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为 ASP.NET 开发者介绍一些高效实用的工具,包括 SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环节 ...

  4. OCP-1Z0-051-V9.02-13题 单引号的使用

    13. View the Exhibit and examine the structure of the PRODUCTS table. You need to generate a report ...

  5. 如何定位jdk中的native方法源码？

    前提条件:已下载openjdk的源码. 以System类的arraycopy为例: 1. 根据关键字定位文件:grep -rn '"arraycopy"' ./openjdk关键字 ...

  6. python3线程启动与停止

    转自: https://blog.csdn.net/weixin_38125866/article/details/76795462 https://www.cnblogs.com/lcchuguo/ ...

  7. Jquery如何禁止鼠标右键菜单

    jquery中使用contextmenu事件,如果返回true,则允许右键菜单:如果返回false,则禁止右键菜单 导入文件 <script type="text/javascript ...

  8. linux下find和grep命令详解

    在linux下面工作,有些命令能够大大提高效率.本文就向大家介绍find.grep命令,他哥俩可以算是必会的linux命令,我几乎每天都要用到他们.本文结构如下: find命令 find命令的一般形式 ...

  9. Win10系列：VC++绘制几何图形4

    三角形绘制完成以后,接下来介绍如何给项目添加主入口函数.打开D2DBasicAnimation.h头文件,添加如下的代码定义一个DirectXAppSource类. //定义类DirectXAppSo ...

  10. 泛型算法，排序的相关操作，lower_bound、upper_bound、equal_range

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...