div+css 布局经验 - 最简单的 = 最不变形的

1 :css (cascading style sheet):

         初学者可以下载一本css 2.0 手册 大概48小时的时间可以看完 试完。至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意 无论是div 还是css 还是html xhtml,其实如果你英文够好做网页和聊天没有差别:

       例1:

<style type="text/css">
.style1{width:500px; height:100px; float:left;}
</style>

你在告诉html 你制定了这样的一个样式 宽度500像素 高度100像素 左浮动(如果你不理解什么是浮动请相信成 左对齐);

.style - 样式名称 为什么使用大括号扩起来呢? 因为一句话2句话说不明白 括起来代表他属于某一个集体;

冒号: 前面的教属性 就像你自己 有身高 体重一样!写样式就像是介绍:

深海:{身高:170cm; 体重:60kg; }



2 div (division):

div 的英文意思是区分,不加入样式的情况下 它和p 标记没有什么大的区别。

3 div+css

给div 制定了样式 他们的组合就演绎出了html 世界中强大的组合;

为什么使用div + css 有人说 它实现了 内容与展示形式的分离。如果你学明白了样式你会拒绝这样的说法;

因为table+css 一样可以!

有人说div+css 天生优化了搜索引擎,为何???

因为同样是布局 div只需要一层结构 而表格需要3层

例:

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>内容</td>
  </tr>
</table>

<div>内容</div>

比较起来节省了 4行代码 如果页面上 出现N个table 那么可以节省 N*4 行代码,我觉得这是DIV 唯一可以拿来炫耀一下的东西; 甚至我们也坚信 内层用p标记也可以布局(不信你给p标记加上样式试试)

那么 我们要说 DIV+css 也没什么 初学者千万别被他的无聊和重复吓到



4 最大的呼声!! 不变形!!!!!!

网上有诸多的文章在说div的变形 (在不同的浏览器下不同的效果)

初学的你是不是很怕火狐 很怕 ie 6????

解决问题的最简单办法:

从哪里来回到哪里去!!!!!!!!!!!!

不要用什么if 去判断浏览器 这个世界上的浏览器种类没你想象的 遇到的那么少!!!!

你要知道你来自table 请你回到table!!

不是叫你用table 是想 table 怎么布局的!!!! table 有什么重要的值 table 为什么要制定对齐方式!

div +css 永不变形规则:

1>  记住 3个值 宽度 高度 对齐方式 永远记住!

2>  页面上出现变形 是因为你没有用div+css 布局!!!

   你是否觉得我在开玩笑?看看以下代码

  <div class="style1">
内容1
</div>
<img src="xxx.jpg">
<div  class="style2">
内容2
</div>

我相信在页面的某个部分你会出现类型这样的代码 请注意你犯规了 你的布局方式叫 div+image+css

3> 只有矩形和矩形才能布局!!!

html 中所有外层结构都是矩形 哪怕是图片 图上画了 一个圆形 你可以打开图片看看 他是矩形!!!

想办法把元素转换成矩形并制定对齐方式 不能转换成矩形的(文字)利用矩形包裹! 然后布局 永不变形适用于各种浏览器!!!



有哪些元素是矩形呢?

table p h1 - marquee embed center ...............................常见的html 标记符都是矩形!!

谁不是矩形呢???

文字! 你是否有一种同感 文字和图片布局都很难得到好的效果

谁开始不是矩形但是可以转换成矩形呢?

a 链接本来是文字 当你制定样式为 display:block 的时候它就变成了矩形!!



****************************************************

4>  只要是矩形就有3个必须的属性: 宽度 高度 对齐方式 请别忘记他们 只要你时刻记得 div+css 不变形的秘密你已经掌握了 90%, 图片 也有对齐方式哦!!

一定要掌握当 对齐方式不同是 布局出现的问题!

左右左 - 能不变形吗?

默认 是要换行的哦

div+css的 居中对齐 是有条件的哦(所有当同级元素的对齐方式都为居中对齐的时候可以采用居中对齐)



5>  有些标记是有默认的间距的!!!(内间距 padding 外间距 margin)

body - 外间距

ul - ie下外间距 火狐下 内间距

p - 内间距

所以一旦使用他们要记得把他们先格式化! 操作方法(内间距 padding:0px; 外间距 margin:0px;)



6> 火狐下 当高度为auto是 无法自适应 解决办法(overfollow:hidden)

7> 在还没有完全掌握定位之前请放弃使用。本人坚信 一般的html 不是用定位完全可以布局,因为talbe 就没有定位!!!!! 一样可以布局很好 很稳定。div 和 table 没有实际区别 只是节省代码!!

8> 再次强调 3个值 永远记住: 宽度 高度 对齐方式(永不变形的唯一秘诀)+ 只有矩形才有这样的3个值!



文章来自: 转载
引用通告: 查看所有引用 | 我要引用此文章
Tags: div+css布局经验 div+css
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.