网页布局的应用(float或absolute)
注意:网页设计中应该尽量避免使用浮动。避免使用absolute
1、一个浮动(左浮动或右浮动)
<div class="title"><span>新闻列表</span><a href="javascript:;" class="r">更多</a> </div>
.touxiang{ width:100px; height:100px; background-color: #dcdcdc; display: inline-block;}
<div class="fix">
<span class="touxiang l">头像</span> /*(左浮动)*/
<span class="l cll">姓名</span> /*(左浮动,清除左浮动)*/
<div class="bde" style="margin-left: 120px;">自我描述</div> /*(没有浮动)*/
</div>
/*.container { overflow:hidden; }*/ 用fix清除浮动
.aside{ float:left; width:300px; }
.right{ margin-left:310px; }
.header{ height: 70px;}
.aside{
width:300px; border-right: 1px solid #dedede;
position: absolute; top: 0; left: 0; z-index: 999;
}
.right{ margin-left: 310px; /*注意:ie6出现错位现象,需添加 display: inline;或者改为padding-left。或者其它。。。 详见《css浏览器兼容集锦》*/}
.toggle {
width: 18px; height: 63px; line-height: 58px;
vertical-align: middle;
position: absolute; left: 300px; top: 60px; z-index: 1001;
border-width: 1px; border-style: solid; border-color: #bbb #bbb #bbb #fff;
border-top-right-radius: 3px; border-bottom-right-radius: 3px;
}
/*三角形 注意另外两种方式实现,有什么区别。详细见《css三角形实现的几种方法的区别》*/
.toggle em {
height: 0;width: 0; display: inline-block; margin-left: 5px; overflow: hidden;
border-style: dashed solid; border-width: 5px 5px 5px 0px;
border-color: transparent #D0D4DA transparent transparent;
}
.toggle:hover em { border-color: transparent #52bf88 transparent transparent; }
.shrink em {
border-style: dashed solid; border-width: 5px 0px 5px 5px;
border-color: transparent transparent transparent #D0D4DA;
}
.shrink:hover em { border-color: transparent transparent transparent #52bf88; }
<div class="fz">
<div class="header bg-red">头部</div>
<div id="container" class="mt10 rel">
<a id="toggle" class="toggle" href="javascript:;">
<em></em>
</a>
<div id="aside" class="aside l">
<div style="height: 800px;">left</div>
</div>
<div id="right" class="right">right</div>
</div>
</div>
js代码:
<script>
var $aside = $("#aside");
var $right=$("#right");
var $toggle = $("#toggle");
$(function(){
leftToggle();
})
function leftToggle(){
var flip = 0;
$("#toggle").click(function () {
if (flip % 2 == 0) {
contraction();
}
else {
expansion();
}
flip += 1;
})
}
//收缩
function contraction(){
$aside.animate({ left: "-300px"}, 300, function () {
$toggle.addClass("shrink");
});
$toggle.animate({left:"1px"},300,function(){
$right.css("margin-left","1px");
}); /*可优化,看怎样用一个animate实现*/
}
//展开
function expansion(){
$aside.animate({ left: "0" }, 300, function () {
$toggle.removeClass("shrink");
});
$toggle.animate({left:"300px"},300,function(){
$right.css("margin-left","310px");
}); /*同上*/
}
</script>
.left, .right { position: absolute; top: 0; width: 200px; height: 100%; background-color: #ff4136; }
.left { left: 0; }
.right { right: 0; }
.main { margin: 0 210px; background: yellowgreen; height: 100%;}
<div class="fz">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
运行效果:
问题:不能设置“main”的最小宽度,当设置.main{min-width: 500px;} 缩小浏览器到最小宽度,main跟right区域重合。
②margin负值法
.main{ width: 100%; float: left;}
.main .body{ margin: 0 210px; background-color: yellowgreen;}
.left,.right{ width: 200px; float: left; background-color: #ff4136;}
.left{ margin-left: -100%;}
.right{ margin-left: -200px;}
<div class="fz fix">
<div class="main">
<div class="body">body</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
当main里面的body设置最小宽度同样出现“body“部分跟”right“部分重叠
③自身浮动法
.main { height: 100%; margin: 0 210px; background-color: yellowgreen; }
.left, .right { width: 200px; height: 100%; background-color: #ff4136; }
.left { float: left; }
.right { float: right; }
<div class="fz fix">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
</div>
注意:div的顺序以及main部分不能用clear:both属性。设置main最小宽度同样不行
网页布局的应用(float或absolute)的更多相关文章
- 常见div+css网页布局(float,absolute)
网页布局-常见 1, float布局 (1)常规方法 <div id="warp"> <div id="column&quo ...
- 【CSS】 布局之浮动float和绝对定位absolute的选择
浮动float: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.(W3C) 绝对定位 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- PHP.4-DIV+CSS标准网页布局准备工作(下)
DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...
- PHP.3-DIV+CSS标准网页布局准备工作(上)
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- DIV+CSS 网页布局之:混合布局
1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...
随机推荐
- SQL 语句基础
一 查询常量1. SELECT 学生编号, 学生姓名,性别 FROM tb_Student2. SELECT 学生姓名 AS 姓名, 性别 AS 学生性别 FROM tb_Student3. SELE ...
- 算法之美--1.蒙特卡洛方法计算pi
基本思想: 利用圆与其外接正方形面积之比为pi/4的关系,通过产生大量均匀分布的二维点,计算落在单位圆和单位正方形的数量之比再乘以4便得到pi的近似值.样本点越多,计算出的数据将会越接近真识的pi(前 ...
- 第十二题 Merge Sorted Array
Given two sorted integer arrays A and B, merge B into A as one sorted array. Note: You may assume th ...
- [Django]中建立数据库视图
Django中建立数据库视图 Django中没有建立视图的接口.假设要建立一个视图须要一些手动的改变. 这里使用的Django 版本号>1.5, 使用的数据库为mysql 第一步 建立视图,比如 ...
- 解释一下Windows dos中的符号
容许我放一段Windows的批处理: sc <server> [command] [service name] <option1> <option2>... < ...
- show processlist 各个状态说明
执行状态分析 1.Sleep状态 通常代表资源未释放,如果是通过连接池,sleep状态应该恒定在一定数量范围内 实战范例:因前端数据输出时(特别是输出到用户终端)未及时关闭数据库连接,导致因网络连接速 ...
- 生成二维码(jquery.qrcode.min.js插件)
生成二维码:参看GitHub资源https://github.com/jeromeetienne/jquery-qrcode 直接上代码:(都需要引入jQuery.js 1.引入(jquery.qr ...
- json解析:[1]gson解析json
客户端与服务器进行数据交互时,常常需要将数据在服务器端将数据转化成字符串并在客户端对json数据进行解析生成对象.但是用jsonObject和jsonArray解析相对麻烦.利用Gson和阿里的fas ...
- 配置fio支持rbd測试引擎
fio的rbd測试引擎能够非常方便的对rbd进行測试.以下示范怎样安装fio支持rbd引擎. git clone git://git.kernel.dk/fio.git $ cd fio $ ./co ...
- HDU 2473 Junk-Mail Filter 删点并查集
题目来源:pid=2473">HDU 2473 Junk-Mail Filter 题意:2中操作 M x, y 将x,y 合并到一个集合 S x 将x从所在的集合去掉 自己成为一个集合 ...