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. nginx-exporter安装使用

    一.没有vts的启动方式   #nginx_exporter -telemetry.address=:9113 -nginx.scrape_uri="http://127.0.0.1:100 ...

  2. ASP.NET Core WebAPI 开发-新建WebAPI项目 转

    转 http://www.cnblogs.com/linezero/p/5497472.html ASP.NET Core WebAPI 开发-新建WebAPI项目   ASP.NET Core We ...

  3. [hdu 6191] Query on A Tree

    Query on A Tree Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Othe ...

  4. 一、Redis的数据类型

    一Redis的数据类型 string:字符串 hash:哈希 list:列表 set:集合 zset:有序集合(sorted set) 1.string(字符串) redis最基本的类型.可以理解成与 ...

  5. Python 正则实现计算器

    # !/usr/bin/env/ python3 # -*- coding: utf-8 -*- """用户输入计算表达式,显示计算结果""" ...

  6. Windows定位窗口对应的exe文件

    一.说明 以下两种情况我们会想要定位窗口是由哪个exe文件,或者什么命令启用 第一种是:广告窗口,现在经常时不时冒出一个广告窗口,要么是完全看不出哪个程序启动,要么是虽然大概知道是哪个应用启动(比如w ...

  7. burpsuite只拦截特定网站数据包教程

    一.背景说明 在配置burpsuite代理截包时经常会遇到这样的情况: 浏览器经常自己发一些包(收集用户信息),干挠渗透测试人员对目标网站的检测: 如果是代理手机,那就是很多APP都时不时发一些包,干 ...

  8. 牛客网 PAT 算法历年真题 1002 ：数字分类 (20)

    1002 :数字分类 (20) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 给定一系列正整数,请按要求对数字 ...

  9. MFC CDHtmlDialog 加载本地资源

    步骤:1.资源视图 项目右击选择资源添加,自定义添加新类型 如:JS(会增加JS文件夹)2. 选择1新建的文件夹右击 添加资源 导入 选择js文件引入3. 在资源文件Resource.h文件夹能找到资 ...

  10. day14-python异常处理

    1.     异常 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常.异常是Python对象,表示一个错误.当Pyt ...