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. 【基础知识】【1】CDN

    正文: CDN:Content Delivery Network,内容分发网络.使用户访问离ta最近的资源服务器,优化访问速度 优点: 1,内容可以共享,不同站点的同一文件可以不用多次缓存 2,增加下 ...

  2. git回退代码到某次commit

    回退命令: $ git reset --hard HEAD^ 回退到上个版本 $ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git res ...

  3. Leetcode 120

    class Solution { public: int minimumTotal(vector<vector<int>>& triangle) { ) ][]; tr ...

  4. ALV打印模板（存代码）

    *&---------------------------------------------------------------------* *& Report ZMMF013 * ...

  5. SpringBoot热部署：spring-boot-devtools在Idea中热部署方法

    1 pom.xml文件 注:热部署功能spring-boot-1.3开始有的 <!--添加依赖--> <dependency> <groupId>org.sprin ...

  6. Nodejs--util模块

    util.inspect util.inspect是一个将任意对象转换 为字符串的方法,通常用于调试和错误输出. 它至少接受一个参数 object,即要转换的对象. util.inspect(obje ...

  7. 二十四、JAVA的NIO和IO的区别

    一.JAVA的NIO和IO 1.NIO:面向缓冲区(buffer)(分为非阻塞模式IO和阻塞模式IO)组成部分:Channels管道,Buffers缓冲区,Selectors选择器 2.IO:面向流( ...

  8. python中的包

  9. js如何将选中图片文件转换成Base64字符串?

    如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...

  10. linux 文件解锁

    //文件 sudo chmod 777 文件名 //文件夹内的文件 sudo chmod 777 文件夹/ * //遍历文件夹下的所有文件 sudo chmod -R 777 文件夹/ *