<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0px auto;

        }

        #all{

            text-align: center;

        }

        div.logo {

            width:100%;

            height:60px;

            background-color: yellow;

        }

        div.copyright {

            width:100%;

            height:60px;

            background-color: goldenrod;

        }

        div.middle {

            width:100%;

            height: 500px;

        }

        div.menu {

            width:15%;

            height: 500px;

            background-color: #E4393C;

            /*菜单左浮动*/

            float:left;

        }

        div.main {

            width:85%;

            height: 500px;

            background-color: #bad0ef;

            /*主题右浮动*/

            float:right;

            /*左浮动、右浮动都可以*/

            float:left;

        }

    </style>

</head>

<body>

    <div id="all">

        <div class="logo">

            logo

        </div>

        <div class="middle">

             <div class="menu">

                menu

             </div>

            <div class="main">

                网站的主体内容

            </div>

        </div>

        <div class="copyright">

            bottom

        </div>

    </div>

</body>

</html>

基本CSS布局的更多相关文章

  1. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  2. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

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

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

  4. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  5. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  6. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

  9. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  10. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

随机推荐

  1. day12 css样式

    目录 1.标签分类   2.浮动布局   3.margin塌陷   4.定位postion   5.背景图 一. 标签分类 默认在标准文档流 行内标签 span,a,em,i,strong,b,inp ...

  2. ConfigurableApplicationContext

    转自:https://blog.csdn.net/weixin_39165515/article/details/77169231 此接口结合了所有ApplicationContext需要实现的接口. ...

  3. 《python解释器源码剖析》第3章--python中的str对象

    3.0 序 我们知道python中的字符串属于变长对象,当然和int也是一样,底层的结构体实例所维护的数据的长度,在对象没有定义的时候是不知道的.当然如果是python2的话,底层PyIntObjec ...

  4. 网络初级篇之RSTP（原理与配置）

    一.RSTP的产生 前面的文章写到了当网络拓扑发生变化时,STP的收敛速度大约需要花费30秒-50秒的时间才会继续转发数据.这样在实际生产环境中花费的时间是非常长的,这样RSTP(快速生成树协议)便应 ...

  5. 1.java多线程_实现线程的两种方式

    1.java多线程基本知识 1.1.进程介绍 不管是我们开发的应用程序,还是我们运行的其他的应用程序,都需要先把程序安装在本地的硬盘上.然后找到这个程序的启动文件, 启动程序的时候,其实是电脑把当前的 ...

  6. ULPFEC在WebRTC中的实现[转载]

    一.WebRTC对抗网络丢包的两种手段     丢包重传(NACK)和前向纠错(FEC).FEC是一种前向纠错技术,发送端将负载数据加上一定的冗余纠错码一起发送,接收端根据接收到的纠错码对数据进行差错 ...

  7. python+Appium自动化：记录遇到的坑

    1.打开 uiautomatorviewer同步的的时候突然报错 Error while obtaining UI hierarchy XML file: com.android.ddmlib.Syn ...

  8. HNOI2004 树的计数 和 HNOI2008 明明的烦恼

    树的计数 输入文件第一行是一个正整数n,表示树有n个结点.第二行有n个数,第i个数表示di,即树的第i个结点的度数.其中1<=n<=150,输入数据保证满足条件的树不超过10^17个. 明 ...

  9. vue-cli中模拟数据的两种方法

    我所使用的是新版vue-cli 首先进行所需插件的安装,vue-resource,json-server,proxyTable. 目录结构如图 在main.js中引入vue-resource模块,Vu ...

  10. nodejs基础一

    Node.js是一个基于Chrome V8引擎的JavaScript运行. js的运行环境 运行js有两种: .js文件方式 交互(REPL): node  回车进入交互模式 .exit 退出交互模式 ...