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. activiti部署流程定义时出错：INSERT INTO ACT_GE_BYTEARRAY，修改数据库编码

    activiti部署流程定义时出错 // 部署流程定义 Deployment deployment = deploymentBuilder.deploy(); 错误信息:(有乱码的...没留下截图.. ...

  2. 在react+redux+axios项目中使用async/await

    Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...

  3. javaee登录界面

    首先在此之前我们应该正确安装数据库,以及eclipse(javaee)文件包. 1.首先在javaee中建立新的项目 2.右键点击WebContent-New-JSP File,新建jsp(动态)文件 ...

  4. HDU-4587-tarjin/割点

    http://acm.hdu.edu.cn/showproblem.php?pid=4587 给出一幅无向图,问除去两个点之后子图的最大联通分量个数. 考虑每次ban一个点然后跑一遍tarjin统计下 ...

  5. Hadoop设置任务执行队列及优先级

    Hive设置方法: SET mapreduce.job.queuename=root.up; SET mapreduce.job.priority=HIGH; set tez.queue.name=c ...

  6. mysql 5.7版本的下载安装

    因为这次开发新的项目,需要用到mysql,因为之前用的都是oracle,所以学习下mysql的下载安装,在此留下一点记录,方便以后的回顾 一:mysql的下载地址:https://dev.mysql. ...

  7. Ubuntu 16 修改时区！

    网上大部分解决办法是命令tzselect,然后选择亚洲-->中国->上海,但很遗憾,一点效果没有:后找到解决办法,运行命令dpkg-reconfigure tzdata,选择Asia--& ...

  8. 开发Web应用（1）（二十）

    静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /s ...

  9. 最新jquery+easyui_api培训文档

    目  录 1 Accordion(可折叠标签) 2 1.1 实例 2 1.2 参数 3 2 DateBox(日期框) 4 2.1 实例 4 2.2 参数 6 2.3 事件 6 2.4 方法 6 3 C ...

  10. Jquery源码探索

    封装原理 这里参考的jquery来进行封装的一个常用方法的一个库,可作为自己的一个库 原理:创建一个构造函数,将所有方法放在该构造函数原型里,访问$()方法时,返回这个构造函数的实例化,这样就简单的实 ...