基本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 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
随机推荐
- google 高清卫星照片
rel: 如何下载 50 年前自己家乡的高清卫星照片 link: https://zhuanlan.zhihu.com/p/30953275
- js中——限制文本框输入非数字
//先把非数字的都替换掉,除了数字和.和/ obj.value = obj.value.replace(/[^\-\d./]/g, ""); //必须保 ...
- 在Windows server 2019 Core 版本上安装SQL2016
安装系统后,通过网络等方式先把安装ISO的文件copy过来,虚拟机则用挂一个虚拟光驱即可,然后cd进入目录,执行以下命名即可安装核心服务了: Setup.exe /qs /ACTION=Install ...
- eclipse集成springboot 插件（离线安装，含解决Cannot complete the install because one or more required items could）
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/li18310727696/article/details/81071002首先,确认eclipse的 ...
- datePicker 及 timePicker Diolage弹出对话框式 比较好看的 监听事件
DatePickerDialog 的监听 new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() { @Override ...
- linux基础—课堂随笔08_进程（转）
进程优先级 命令 pstree -p 显示各个子线程 ps 进程状态(process state) UNIX风格:ps -ef BSD风格:ps aux 还有用到o参数,选项显示定制的信息: pid. ...
- D - Beautiful Graph CodeForces - 1093D （二分图染色+方案数）
D - Beautiful Graph CodeForces - 1093D You are given an undirected unweighted graph consisting of nn ...
- Almost Regular Bracket Sequence CodeForces - 1095E （线段树，单点更新，区间查询维护括号序列）
Almost Regular Bracket Sequence CodeForces - 1095E You are given a bracket sequence ss consisting of ...
- NoSQL数据库技术实战-第1章 NoSQL与大数据简介 NoSQL数据库的类型
键值存储数据库临时性:如Memcached.临时性的键值数据库把数据存储在内存中,在两种情况下会造成上数据的丢失,一是断电,而是数据内容超出内存大小.这种处理的好处是非常快.永久型:如Tokyo Ty ...
- Nginx概念
这篇文章只是单纯的介绍nginx以及一些相关概念,有的概念在实际应用中不会用到,不理解也没有关系,这不影响我们学习nginx. Nginx是什么 如果你知道http协议和httpd是什么,那你就会容易 ...