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. 整合多个网络的拓扑结构并降维（Mashup）

    整合多个网络的拓扑结构并降维(Mashup) 介绍一个整合多个网络拓扑结构的方法,方法来源:Compact Integration of Multi-Network Topology for Func ...

  2. 新增节点NewBook并增加属性Name="WPF"

    XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(xmlPath); var root = xmlDoc.DocumentElement;//取到 ...

  3. Mybatis自动生成实体类,映射文件,dao

    http://www.mybatis.org/generator/index.html 方法一:eclipse插件式 1.下载 mybatis-generator-core-1.3.2.jar 解压后 ...

  4. mongodb副本集修改配置问题

    因虚拟机地址被占用,需要重新设置ip地址,这时需要修改副本集中的IP地址配置: 1: 查看配置rs.config():需要找到primary主机,在该主节点服务器上才有权限修改配置 2:rs.remo ...

  5. Hadoop---静动态增删节点

    静动态增删节点 初始: 这是我现在的集群 重新克隆一个虚拟机: hadoop44:datanode(静态增加,删除和动态删除) hadoop55:datanode(动态hdfs添加,yarn动态增删) ...

  6. Windows与Linux的回车换行转换

    最初"\r"(return)表示“回车”即回到行首,“\n”(next)表示“换行”即定位到下一行:UNIX和Linux使用“\n”换行,而Windows用“\r\n”(不是\n\ ...

  7. android library打包成aar形式供别的项目引用

    1.我们项目已经有library存在,我们有需求是需要把library供其他项目引用,而且不能让其他项目随意更改我们项目的代码. 2.Rebuild Project 后zxinglib生成aar文件, ...

  8. studio配置本地gradle-x.x.x-all.zip

    在引入别的项目时,一般会突然一直卡在了building...,下载网络gradle. 我们从网络下载gradle.zip到本地,通过将.\项目\gradle\wrapper下的gradle-wrapp ...

  9. linux磁盘管理 磁盘查看操作

    df查看磁盘分区使用状况 df --显示磁盘分区使用状况 'l' 仅显示本地磁盘(默认) 'a' 显示所有文件系统的磁盘使用情况,包含比如/proc/ 'h' 以1024进制计算最合适的单位显示磁盘容 ...

  10. xml常用操作（js、sql、vb）

    我们经常会用到xml操作,如下介绍了js.sql.vb等对xml的操作. JS创建xml对象 //创建对象 function getDataXML() {     var objTds = $(&qu ...