css013 构建基于浮动的布局
css013 构建基于浮动的布局
基于浮动的布局时利用float属性是网页上的元素并排,并创建列
float有三个值:left 、right 、none
1、假设要把一张图片浮动到网页的左侧
.float-left{
float:eft;
}
假如要把一个装满内容的<div>浮动到一边,形成一个侧边栏
.sidebar{
float:left;
width:150px;
}
2、设计一个简单的两列布局需要的几个步骤
a、 把每列都包在一个带有ID或class属性的<div>标签里面
b、把侧边栏<div>浮动到左侧或者右侧
c、 给浮动的侧边栏设定一个宽度
宽度可以是一个固定的尺寸,也可以是基于浏览器窗口宽度的弹性设置,使用百分比。
d、 给正文添加一个margin-left
(要仔细弄明白了)
一、 用浮动进行布局
1、让所有的列都浮动让所有的列浮动时要注意每一列的宽度,列宽度总和应该小于总宽度
2、在浮动元素中浮动
3、在浮动元素中浮动
二、 克服浮动问题
1、清除浮动和保持浮动
a、 在<div>的底部添加一个清除元素
b、浮动外围元素:让浮动元素的<div>也浮动起来
c、 利用overflow:hidden; (如果容器中有绝对定位的元素,它们可能会显示不出来。例如:当一个下拉菜单中有另一个标签或者下拉菜单时,就会显示不出来)
d、 使用Mico Clear Fix
利用html分区元素,添加一个类,如:
<div class=”clear”>
在css中写:
.clear{
clear:both;
}
2、多列布局
三、 多列的布局
1、设置列项目:column-count
设置列列之间的间隔:column-gap
在列之间绘制一条直线:column-rule
如:给这个类定义一个名为:multicol的类,创建一个3列的布局,间隔为1em ,并添加一条黑色的虚线
. multicol{
column-count:3;
column-gap:1em;
column-rule:1px dotted black;
}
3、创建全网页高度的列
假设有个3列的设计,第一列为25%宽,第二列有50%,第三列有25%。你想让背景色为红白蓝。
<div class="wrapper">
<div class="sidebar1">hello everyone!</div>
<div class="main">i am the main content</div>
<div class="sidebar2">nice to meet you!</div>
</div>
添加一个线性渐变,让颜色站与列的宽度相匹配
.wrapper{
background-color: linear-gradient(left,
red:0%,
red:25%,
white:25%,
white:75%,
blue:75%,
blue:100%);
}
添加供应商版本的代码:
……
4、防止浮动下落
浮动下落(float drop)总是犹豫没有组否的空间容纳所有的列才造成的
5、用box-sizing防止浮动下落
box-sizing的三个值分别如下:
a、 content-box
b、 box-sizing:content-box
屏幕宽度为width属性值+padding值+border值
c、 padding-box
box-sizing:padding-box
屏幕宽度为width属性值+padding值
d、 border-box
box-sizing:border-box
屏幕宽度为width属性值+border值
css013 构建基于浮动的布局的更多相关文章
- ch8 基于浮动的布局(两列浮动布局、三列浮动布局)
CSS布局技术的根本是3个基本概念:定位.浮动.外边距操纵. 只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动.因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围他们的块框产生任何影响 ...
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...
- 使用PowerApps快速构建基于主题的轻业务应用 —— 进阶篇
作者:陈希章 发表于 2017年12月14日 在上一篇 使用PowerApps快速构建基于主题的轻业务应用 -- 入门篇 中,我用了三个实际的例子演示了如何快速开始使用PowerApps构建轻业务应用 ...
- 构建基于WCF Restful Service的服务
前言 传统的Asmx服务,由于遵循SOAP协议,所以返回内容以xml方式组织.并且客户端需要添加服务端引用才能使用(虽然看到网络上已经提供了这方面的Dynamic Proxy,但是没有这种方式简便), ...
- maven-bundle-plugin插件, 用maven构建基于osgi的web应用
maven-bundle-plugin 2.4.0以下版本导出META-INF中的内容到MANIFEST.MF中 今天终于把maven-bundle-plugin不能导出META-INF中的内容到Ex ...
- 正则表达式引擎的构建——基于编译原理DFA(龙书第三章)——3 计算4个函数
整个引擎代码在github上,地址为:https://github.com/sun2043430/RegularExpression_Engine.git nullable, firstpos, la ...
- 构建基于Javascript的移动web CMS——模板
在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单 ...
- Net 项目构建基于Jenkins + Github + Mono 的持续集成环境
Net 项目构建基于Jenkins + Github + Mono 的持续集成环境 阅读目录 1 安装 2 配置 3 测试 在Redhat enterprise 6.5 的服务器上,为在gutub 上 ...
随机推荐
- 【CSS】 background
background: #22b4ff //背景色 url("http://images.cnblogs.com/cnblogs_com/oiliu/529256/o_titleIMG.jp ...
- oracle 在分区内查询数据
查看当前分区 select t.partition_name,t.num_rows from all_tab_partitions t where table_name='table_name' 单个 ...
- AndroidStudio修改项目名称
项目名称修改了,想修改Android Studio 中 project的名字 右键project 的名字,refactor - rename ,填写好新名字后修改,被提示 “can’t rename ...
- 【BZOJ 3672】【UOJ #7】【NOI 2014】购票
http://www.lydsy.com/JudgeOnline/problem.php?id=3672 http://uoj.ac/problem/7 链上的情况可以用斜率优化dp.树上用斜率优化d ...
- c#如何使输入数据类型限制,C#如何添加限制
验证n位的数字:^\d{n}$ ,例如要输6位数字,不能多也不能少: ^\d{6}$ 验证数字的正则表达式集 验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$ ...
- 使用 Daynamic 动态添加属性
所谓的Dynamic 动态类型,页面也要是动态的(强撸) 很简单的 直接上代码: //案例一 DynamicpersonCollection = new ObservableCollection(); ...
- 由多线程引起的map取值为null的分析
昨天写了一个多线程的程序,却发现了一个很奇特的问题,就是我的map对象明明put了,可是get的时候竟然会取到null,而且尝试多次,有时候成功,有时候取到null,并不确定. 程序代码如下: pub ...
- bzoj2653: middle
首先,对于每个询问,我们二分答案 然后对于序列中大于等于中位数的数,我们把它们置为1,小于中位数的数,置为-1 那么如果一个区间和大于等于0,那么就资磁,否则就不滋磁 这个区间和呢,我们可以用主席树维 ...
- BeautifulSoup_python3
1.错误排除 bsObj = BeautifulSoup(html.read()) 报错: UserWarning: No parser was explicitly specified, so I' ...
- NOIP2014
DAY1 生活大爆炸版石头剪刀布 直接模拟即可. // codevs3716 #include<algorithm> #include<iostream> #include&l ...