十天学会DIV+CSS(DIV布局)
一列布局:
一列固定宽度、一列固定宽度居中、一列自适应宽度、一列自适应宽度居中
一列固定宽度
<head>
<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>
</head>
一列固定宽度居中
<head>
<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }
</style>
</head>
一列自适应宽度
<head>
<style type="text/css">
#layout { height: 300px; background: #99FFcc;}
</style>
</head>
一列自适应宽度居中
<head>
<style type="text/css">
body { margin: 0px; }
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }
</style>
</head>
两列布局
二列自适应宽度、两列固定宽度、两列固定宽度居中、float属性。
二列自适应宽度
<head>
<style type="text/css">
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
</style>
</head>
两列固定宽度
<head>
<style type="text/css">
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head>
两列固定宽度居中
<head>
<style type="text/css">
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head>
float属性
<head>
<style type="text/css">
body { font-size:18px; line-height:200%; }
#side { float:left;width:202px;}
#main { margin-left:202px;}
</style>
</head>
三列布局
三列自适应宽度、三列固定宽度、三列固定宽度居中、
IE6的3像素bug
三列自适应宽度
<head>
<style type="text/css">
body { margin:0;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
三列固定宽度
<head>
<style>
body { margin:0;}
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
三列固定宽度居中
<head>
<style>
body { margin:0;}
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
十天学会DIV+CSS(DIV布局)的更多相关文章
- div,css&table布局有哪些区别
DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华
以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“< ...
- 对于用div+css随心所欲布局的思考
在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用 ...
- <转载>div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- 常见div+css网页布局(float,absolute)
网页布局-常见 1, float布局 (1)常规方法 <div id="warp"> <div id="column&quo ...
- 利用Div+CSS整体布局页面的操作流程
简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head> <meta chars ...
- 第6天:DIV+CSS页面布局实战
今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...
- 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
随机推荐
- stack栈
栈(statck)这种数据结构在计算机中是相当出名的.栈中的数据是先进后出的(First In Last Out, FILO).栈只有一个出口,允许新增元素(只能在栈顶上增加).移出元素(只能移出栈顶 ...
- 体验阿里云SSD云盘+ECS(I/O优化)的性能
阿里云推出SSD云盘+I/O优化的ECS已有一段时间,这个功能优化可以为ECS服务器与SSD云盘提供更好的网络能力.据阿里云官网介绍,SSD云盘最高提供20000次随机读写IOPS.256MB/S吞吐 ...
- 用JavaScript实现的选项卡
Codes wins arguments! <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- sql server CTE递归使用测试
--CTE递归查询 if(object_id(N'menu') > 0) drop table menu CREATE TABLE MENU ( name nvarchar(50) NOT NU ...
- 客户端实现蓝牙接收(C#)
知识总结发布 (转载) 网上有关蓝牙接收的资料很多,使用起来也很简单,但是我觉得还是有必要把这些知识总结下来,蓝牙开发需要用到一个第三方的库InTheHand.Net.Personal.dll,感兴 ...
- xib的UIScrollView自适应高度
1.首先,我们先把这个size classes关了(需要使用的童鞋无视掉,也无视掉我的工程名,这是我弄高德地图创建的工程) 2.添加一个scrollview上去,设置上下左右约束为0 3.然后搞一个v ...
- mysql服务器和配置优化
一.存储引擎 mysql中有多种存储引擎,一般常见的有三种: MyIsam InnoDB Memory 用途 快读 完整的事务支持 内存数据 锁 全表锁定 多种隔离级别的行锁 全表锁定 持久性 基 ...
- Mifare系列6-射频卡与读写器的通信(转)
文/闫鑫原创转载请注明出处http://blog.csdn.net/yxstars/article/details/38085415 1. 复位应答(Answer to request) 读写器呼叫磁 ...
- plist文件
1.一般可以使用属性列表文件存储NSArray或者NSDictionary之类的数据,这种“属性列表文件”的扩展名是plist,因此也称为“plist文件” 2.接下来通过代码来解析Plist文件中的 ...
- phpstorm 设置Utf8编码
点击file 再点击setting 找到file Encoding gbk改成utf-8就ok了