基本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 sed命令 -- 三剑客老二

    格式: sed [OPTION]... {script-only-if-no-other-script} [input-file]... sed [OPTION]... ‘地址定界+[高级]编辑命令’ ...

  2. 【转】tar命令详解

    原文:http://www.cnblogs.com/qq78292959/archive/2011/07/06/2099427.html tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压 ...

  3. ORALCE 数据库字符串处理、常用函数

    .字符串转日期: to_date(paramStr,'YYYYMMDDHH24MISS') to_date(paramStr,'yyyy-MM-DD') to_date(paramStr,'yyyy/ ...

  4. onItemSelected 获取选中的 信息 3种方法

    @Override public void onItemSelected(AdapterView<?> parent, View view, int position, long id) ...

  5. Java语言基础(10)

    1 方法(三) 案例:Demo1 import java.util.Scanner; public class Demo1 { static int min(int num1,int num2){ i ...

  6. idea中添加mybatis mapper 样例

    代码: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC &quo ...

  7. 使用powershell的remove

    使用Remove-Module -Name Functions2 只是移除当前会话的模块 并且Import-Module -Name Functions2与 Remove-Module -Name F ...

  8. mongodb cursor用法

    为了营造大批量数据,我们可以这样写javascript脚本 for (var i=1;i<=10000;i++) { if(i%2==1) { db.cursortest.insert({_id ...

  9. POJ-2752-Seek the Name(KMP, 循环节)

    链接: https://vjudge.net/problem/POJ-2752#author=0 题意: 给定若干只含小写字母的字符串(这些字符串总长≤400000),在每个字符串中求出所有既是前缀又 ...

  10. 02 Vue介绍与安装，指令系统 v-*、音乐播放器

    VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...