基本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 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
随机推荐
- UEFI笔记 --- PeiReadOnlyVariable2->GetVariable()
问:在PEI阶段,PeiReadOnlyVariable2->GetVariable()可以从Pei Hob或NV RAM中获取UEFI变量,例如Setup默认值.若平台首次烧录BIOS并开机, ...
- WiFi 6是否适合个人用户
5G已经被热炒得家喻户晓,但与其对标的WiFi新技术标准——Wi-Fi 6却可能有着更好的经济和技术前景,WiFi 6也称为802.11ax,比过去的Wi-Fi技术更好,速度更快能跟5G对标,连接性更 ...
- datePicker 及 timePicker 监听事件 获取用户选择 年月日分秒信息
public class MainActivity extends AppCompatActivity { private TimePicker timePicker; private DatePic ...
- 修改虚拟机CentOS系统ip地址和主机名
按照教程安装了虚拟机但是未配置静态IP,所以导致IP地址经常变化,CRT,mysql等连接时经常出现问题. 所以修改虚拟机内CentOS系统的IP为静态IP. 一.查看当前网关 虚拟机-->[编 ...
- less 分页显示文件内容
1.命令功能 less 是more的增强版,可以分页显示文件内容,而且less打开文件的速度要比vi,more更快.less支持搜索功能,显示行号. 2.语法格式 less option file ...
- Number of Parallelograms CodeForces - 660D （几何）
Number of Parallelograms CodeForces - 660D You are given n points on a plane. All the points are dis ...
- Hdu 1564 1*2矩阵覆盖棋局博弈
n*n的矩阵如果n为偶数 则可被1*2的矩形完全覆盖 如果n为奇数 则除起点外 其他各自可被1*2矩形完全覆盖 所以当n为偶数 先手赢 n为奇数 后手赢 #include<bits/stdc++ ...
- POJ 1741 单次询问树上距离<=K的点对数 点分治
#include<cstdio> #include<cstring> #include<algorithm> using namespace std; ; ; ], ...
- tensorflow2.0编程规范
背景 tensorflow2.0 相比于1.0 有很大变化,1.0版本的placeholder,Session都没有了,2.0版本强推使用keras.keras是一个比较高层的api,确实挺好用的,一 ...
- Web界面开发必看！Kendo UI for jQuery编辑功能指南第一弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...