基本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. c3p0似有属性配置

    c3p0私有属性配置: 始化时创建的连接数,应在minPoolSize与maxPoolSize之间取值.默认为3 initialPoolSize=20 接池中保留的最大连接数.默认为15 maxPoo ...

  2. 阿里Java开发规约【摘录】

    1.命名规约 [强制]类名使用UpperCamelCase风格,必须遵从驼峰形式,但以下情形例外:(领域模型的相关命名)DO / BO / DTO / VO等. 正例:MarcoPolo / User ...

  3. pycharm的快捷键以及快捷意义

    ctrl+a 全选 ctrl+c 复制(默认复制整行) ctrl+v 粘贴 ctrl+x 剪切(默认复制整行) ctrl+f 搜索 ctrl+z 撤销 ctrl+shift+z 反撤销 ctrl+d ...

  4. 【死磕 Java 集合】— ConcurrentSkipListMap源码分析

    转自:http://cmsblogs.com/?p=4773 [隐藏目录] 前情提要 简介 存储结构 源码分析 主要内部类 构造方法 添加元素 添加元素举例 删除元素 删除元素举例 查找元素 查找元素 ...

  5. Select,poll，epoll复用

    Select,poll,epoll复用 1)select模块以列表的形式接受四个参数,分别是可读对象,可写对象,产生异常的对象,和超时设置.当监控符对象发生变化时,select会返回发生变化的对象列表 ...

  6. 【网络协议】动态主机配置协议DHCP

    动态主机配置协议DHCP 当某组织获得一块地址后,就可以为本组织内的主机或者路由器分配IP地址.这个分配工作可以由系统管理员手动通过网络管理工具来完成.也可以由动态主机配置协议(Dynamic Hos ...

  7. 使用 jenkins 为 nginx 增加上下文

    每次需要在Nginx增加上下文,都需要添加如下两段 ​ server.conf upstream serverdownloadPage { server 10.11.19.6:3023; } ​ ht ...

  8. Jmeter （四） 关联

    关联: 实例:关联登录请求的 session,方便下次自动登录( 自我理解) 关联用户session 关联 例如 京东秒杀 1000个用户 同时秒杀 怎么模拟??  使用关联啊! 一.正则表达式提取器 ...

  9. $'\r': command not found

    在Linux下执行程序最省事的方式就是将系统的执行流程封装成一个shell脚本,上传到linux环境中后就可以直接执行了,但是今天在具体实施的时候出现了错误 $'\r': command not fo ...

  10. Fastjson转换json到带泛型的对象（如Map）报错解决

    List<CategoryDTO> categoryList = null; String categoryStr = redisService.get(RedisKeyConstant. ...