<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>横向两列布局</title>

 <style>

     *{margin:0;padding:0;}

     #warp{

         width:960px;

         margin:0 auto;

         margin-top:10px;

     }

     #herder{

         height:50px;

         background:blue;

     }

     #nav{

         height:30px;

         background:orange;

         margin:10px 0;

     }

     #main{

         width:100%;

         margin-bottom:10px;

         overflow:hidden;

     }

     #main .main-left{

         width:640px;

         height:200px;

         background:yellow;

         float:left;

     }

     #main .main-right{

         width:300px;

         height:200px;

         background:pink;

         float:right;

     }

     #content{

         width:100%;

         overflow:hidden;

     }

     #content .content-left{

         width:640px;

         height:800px;

         background:lightgreen;

         float:left;

     }

     #content .content-right-sup{

         width:300px;

         height:500px;

         background:lightblue;

         float:right;

     }

     #content .content-right-sub{

         width:300px;

         height:280px;

         background:purple;

         margin-top:20px;

         float:right;

     }

     #footer{

         height:50px;

         background:gray;

         margin-top:10px;

     }

 </style>

 </head>

 <body>

 <div id="warp">

     <div id="herder">页头</div>

     <div id="nav">导航</div>

     <div id="main">

         <div class="main-left">左-上</div>

         <div class="main-right">右-上</div>

     </div>

     <div id="content">

         <div class="content-left">左-下</div>

         <div class="content-right-sup">右-上</div>

         <div class="content-right-sub">右-下</div>

     </div>

     <div id="footer">页脚</div>

 </div>

 </body>

 </html>

div标准布局示例的更多相关文章

  1. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  2. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  3. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  4. 深度理解div+css布局嵌套盒子

    1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...

  5. DIV+CSS布局重新学习之float/margin/padding

    之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...

  6. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  7. div css 布局对seo 影响 布局原则

    一.代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处 ...

  8. css两端对齐——div+css布局实现2端对齐的4种方法总结

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...

  9. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

随机推荐

  1. CF 36E Two Paths

    传送门 真实的自闭= =+ 考试的时候老师明明说了可以路径为空T^T 然后光荣的挂掉了 20分的链[明明是最送分的] 上来就看出来欧拉回路了嘛 然后思考了一下大概奇点配个对 删一条简单路径剩下的跑欧拉 ...

  2. 通过ssh访问虚拟机中的ubuntu系统

    首先把 network 连接方式由 NAT 改为 Bridge Adapter,这样虚拟机中的 ubuntu 就可以有独立的 IP 地址. 安装 openssh: sudo apt-get insta ...

  3. BestCoder Round #92 (hdu 6015 6016)

    比赛链接 A题主要是map的使用,比赛的时候问了下队友,下次要记住了 #include<bits/stdc++.h> using namespace std; typedef long l ...

  4. Security基础(六)：部署Zabbix监控平台、配置及使用Zabbix监控系统、自定义Zabbix监控项目、实现Zabbix报警功能

    一.部署Zabbix监控平台 目标: 本案例要求部署一台Zabbix监控服务器,一台被监控主机,为进一步执行具体的监控任务做准备: 在监控服务器上安装LAMP环境    修改PHP配置文件,满足Zab ...

  5. basic play

    [root@wen ~]# w 19:01:27 up 1 day, 7:06, 3 users, load average: 0.00, 0.00, 0.00 USER TTY FROM LOGIN ...

  6. paper 164: Siamese网络--相似度量方法

    简介:    Siamese网络是一种相似性度量方法,当类别数多,但每个类别的样本数量少的情况下可用于类别的识别.分类等.传统的用于区分的分类方法是需要确切的知道每个样本属于哪个类,需要针对每个样本有 ...

  7. css如何让<a>标签，根据输入的内容长度调整宽度，宽度自适应，那位大仙帮帮忙

    css如何让<a>标签,根据输入的内容长度调整宽度,宽度自适应,那位大仙帮帮忙 5 样式 .ceshi{float:left; margin-left:13px; width:180px; ...

  8. 高并发大流量专题---5、CDN加速

    高并发大流量专题---5.CDN加速 一.总结 一句话总结: CDN就是多整几台节点服务器,选距离用户最近的服务器来给用户服务,实现的话可以用阿里云.腾讯云他们提供的功能,简单方便,妈妈再也不用担心我 ...

  9. JetBrains CLion

    JetBrains CLion 2017.2.4 ①.激活时选择License server: http://idea.irfen.me/ http://idea.imsxm.com/

  10. 使用nsenter进入docker容器后端报错 mesg: ttyname failed: No such file or directory

    通过nsenter 进入到docker容器的后端总是报下面的错,, [root@devdtt ~]# docker inspect -f {{.State.Pid}} mynginx411950 [r ...