基本CSS布局二
基本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布局二的更多相关文章
- CSS布局(二) 盒子模型属性
盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
- css布局详解（二）——标准流布局（Nomal flow）
css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...
- 从零开始学习html（十二）CSS布局模型——上
一.css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了. 布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之 ...
- CSS布局秘籍(1)-任督二脉BFC/IFC
01.CSS布局 1.1.正常布局流(Normal flow) 正常布局流 就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列.网页基于盒子模型进行正常的布局,主要特点: 盒子 ...
- 典型的DIV CSS三行二列居中高度自适应布局
如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...
- 只需5分钟！一文读懂CSS布局（二） -- flex布局
目录 简介 基本概念 容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6 ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
随机推荐
- JSTreeShaking的webpack-deep-scope-plugin插件的应用
webpack自身实现词法分析的JSTreeShaking webpack-depp-scope-plugin插件实现作用域分析的JSTreeShaking 一.webpack词法分析的JSTreeS ...
- scrapy命令：scrapy genspider详解 转
当我们使用: scrapy startproject taobao 命令创建好scrapy蜘蛛后,你是否注意到,下面还有这么一行内容: F:\scrapyTest> scrapy startpr ...
- 小白进阶之Scrapy第六篇Scrapy-Redis详解（转）
Scrapy-Redis 详解 通常我们在一个站站点进行采集的时候,如果是小站的话 我们使用scrapy本身就可以满足. 但是如果在面对一些比较大型的站点的时候,单个scrapy就显得力不从心了. 要 ...
- mongodb启用auth，使用密码登录
更新操作: db.users.update({'currentVersion':3},{$set:{'currentVersion':5}}) 首先安装下载(略过) mongod 启动服务,有多重启动 ...
- 性能测试分析工具nmon文件分析时报错解决办法
1.使用nmon analyzer V334.xml分析数据时,如果文件过大,可以修改Analyser页签中的INTERVALS的最大值: 2.查找生成的nmon文件中包含的nan,删掉这些数据(需要 ...
- Delphi RS-232C标准
- java指定运行jar包中的其中一个main方法
java -cp jar包 类名 java -cp ******.jar com.******.EsEtl
- python中的__init_subclass__是什么？
什么是__init_subclass__ class Hook: def __init_subclass__(cls, **kwargs): print("__init_subclass__ ...
- python常用模块：re模块案例、subprocess
今日内容: 一.re模块二.re练习三.subproces模块 一.re模块 import re # [] 范围匹配 中间 用-来连接 # re.findall("[a-zA-Z0-9]&q ...
- 8.5.zookeeper应用案例_分布式应用HA
1.实现分布式应用(主节点HA)及客户端动态更新主节点状态 需求:某分布式系统中,主节点可以有多台,服务器可以动态(变化)上下线,任意一台客户端都能实时感知到主节点服务器的上下线 思路:架设Zooke ...