基本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. href="javascript:show_login()"意思

    整句话意味着当你点击一个超链接时,你会触发函数show_login. Href是一个超链接,通过单击该超链接触发. javascript:后面是JS代码 show_login():表示JS的函数的油烟 ...

  2. MySQL8.x msi版安装教程

    一.下载MySQL 官网下载地址 https://dev.mysql.com/downloads/windows/installer/8.0.html  下载第二个即可(虽然只有32位的 但是会同时安 ...

  3. JDBC的两种sql命令发送器比较【Statement：PreparedStatement】

    PreparedStatement 接口继承 Statement接口如果需要多次执行一个SQL语句,可以使用PreparedStatement对象.在创建PreparedStatement对象时,通过 ...

  4. 【2017-04-10】js来控制导航栏在滚动条拉到一定位置时显示

    <html> <head> <title>test</title> </head> <body> <div style=& ...

  5. S19格式

    S-record格式文件是Freescale CodeWarrior编译器生成的后缀名为.S19的程序文件,是一段直接烧写进MCU的ASCII码,英文全称问Motorola format for EE ...

  6. pip命令及虚拟环境的建立

    以下命令是pip命令,是帮助我们安装解决python所需要的环境包 列出已经安装的包 pip list 安装要安装的包 pip install 包名 安装特定版本 pip install django ...

  7. Nginx中虚拟主机配置

    一.Nginx中虚拟主机配置 1.基于域名的虚拟主机配置 1.修改宿主机的hosts文件(系统盘/windows/system32/driver/etc/HOSTS) linux : vim /etc ...

  8. goaccess安装和使用

    安装依赖 $ sudo apt-get install libncursesw5-dev $ wget https://github.com/maxmind/geoip-api-c/releases/ ...

  9. MYSQL获得查询记录的行号

    对于获得查询记录的行号这一功能,Oracle 中可以使用标准方法(8i版本以上),也可以使用非标准的ROWNUM,MS SQL Server 则在 2005 版本中提供了ROW_NUMBER()函数. ...

  10. HashSet与HashMap源代码深度剖析

    HashSet源码分析: 先来看一下它的构造方法: 呃~~居然它的底层是用HashMap来实现的,颠覆三观,那它究竟是如何来用的呢?继续来往下跟: 对于HashSet而言是没有key->valu ...