基本CSS布局二------基本页面布局二

/*主面板样式*/

#container {

width:100%;

margin:0px auto;/*主面板DIV居中*/

}

/*顶部面板样式*/

#header {

width:100%;

height:100px;

border:1px #F00 solid;

}

/*中间部分面板样式*/

#main {

width:100%;

height:800px;

border:1px #F00 solid;

}

/*底部面板样式*/

#footer {

width:100%;

height:100px;

border:1px #F00 solid;

}

.cat, .sidebar {

float:left;

width:15%;

height:100%;

border:1px #333 solid;

}

.content {

float:left;

width:69%;

height:100%;

border:1px #333 solid;

}

#first{

    float:left;

    /*width:33%;

    height:50px;

    border:1px #333 solid;

    margin:5px;*/

    height:0;

    border:0px #333 solid;

    background-color:red;

    width:33%;

    padding-bottom:10%

}

#second{

    float:left;

    height:0;

    border:0px #333 solid;

    background-color:yellow;

    width:33%;

    padding-bottom:10%

}

#third{

    float:left;

    height:0;

    border:0px #333 solid;

    background-color:pink;

    width:33%;

    padding-bottom:10%

}

html

<!DOCTYPE html>

<html lang="en">

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

        <head>

                <link rel="stylesheet" href="css.css" type="text/css" />

        </head>

        <body>

                <div id="container">

                        <div id="header">顶部（header）</div>

                        <div id="main">

                                <div class="cat">商品分类(cat)</div>

                                <div class="content">

                                        <div id="first">

                                                第一块

                                        </div>

                                        <div id="second">

                                                第二块

                                        </div>

                                        <div id="third">

                                                第三块

                                        </div>

                                </div>

                                <div class="sidebar">右侧(sidebar)</div>

                        </div>

                        <div id="footer">底部（footer）</div>

                </div>

        </body>

</html>

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

  1. CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...

  2. css布局详解（二）——标准流布局（Nomal flow）

    css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...

  3. 从零开始学习html（十二）CSS布局模型——上

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

  4. CSS布局秘籍(1)-任督二脉BFC/IFC

    01.CSS布局 1.1.正常布局流(Normal flow) 正常布局流 就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列.网页基于盒子模型进行正常的布局,主要特点: 盒子 ...

  5. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

  6. 只需5分钟！一文读懂CSS布局（二） -- flex布局

    目录 简介 基本概念 容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6 ...

  7. CSS布局 - 三栏布局

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

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

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

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

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

随机推荐

  1. Linux--目录属性

    目录的读属性:表示具有读取目录结构清单的权限.使用ls命令可以将该目录中的文件和子目录的内容列出来. 目录的写属性:表示具有更改目录结构清单的权限.包括以下操作: 建立新的文件与目录 删除已经存在的文 ...

  2. shell脚本中使用nohup执行命令不生效

    1 例如 !#/bin/bash nohup echo "hello world" 2 解决办法 加上 source /etc/profile 就好了 !#/bin/bash so ...

  3. Vi 入门简易教程

    首先,请注意,以下所讲的,全部是键盘在英文输入模式下.如果键盘是在中文输 入模式,全部的指令不正确. vi 有两种模式: Command Mode(指令模式) and Insert Mode(我姑且称 ...

  4. C++之旋转矩阵和打印一个有规律的矩阵

    旋转数组 描述: 某个图像通过一个整数组成的m*n矩阵表示,其中每个整数表示一个像素值.写出一种方法,根据flag变量的值将图像向右或者向左旋转90°.如果flag值为0,则向左旋转,如果flag为1 ...

  5. kafka api的基本使用

    kafka API kafka Consumer提供两套Java API:高级Consumer API.和低级Consumer API. 高级Consumer API 优点: 高级API写起来简单,易 ...

  6. Linux常用命令type、date

    Linux命令类型: 内置命令(shell内置):cd is shell builtin 外部命令:命令 is /usr/bin/命令,在文件系统的某个路径下有一个与命令名称相应的可执行文件 type ...

  7. MySQL 异地 双机房同步之otter

    一.背景: 阿里巴巴B2B公司,因为业务的特性,卖家主要集中在国内,买家主要集中在国外,所以衍生出了杭州和美国异地机房的需求, 同时为了提升用户体验,整个机房的架构为双A,两边均可写,由此诞生了ott ...

  8. python中ord()函数,chr()函数,unichr()函数

    ord()函数,chr()函数,unichr()函数 chr()函数用一个范围在range(256)内的(就是0-255)整数作参数,返回一个对应的字符.unichr()跟它一样,只不过返回的是Uni ...

  9. linux安装locust及遇到的坑

    安装locust很简单,简单的我以为pip install一下就好了,结果运行locust死活不行,后来的后来,,才搞清楚还要进行以下操作. 前提: 1.已安装Python3和pip3(或者都是2,版 ...

  10. JMS 重点是JMS消息结构讲解

    这部分之前认识的不是很清楚,转载记录下,转载自:https://www.cnblogs.com/Zender/p/9098410.html 阅读目录 一,消息服务 二,JMS 回到目录 小时(1000 ...