DIV与样式排版学习笔记!

需要用DIV来进行排版,对于CSS的样式要求就比较严格,说简单也简单,也复杂也复杂!
今天第一次结触这个东西,边学习边得到一些体验!要用DIV排版,第一步得对BODY的样式进行控制。
一、为了让整体版式进行基本的定位及定型,所以要对BODY进行样式控制,如下!

body{
       text-align: center;  <!--为了让整体版试居中,所以用到此句,但其所包含的标签都将具有此默让版式。=派生?-->
<!--当然,还可以有其它的样式控制了,但上句是至关重要的! ^_^  -->
}
二、当然是对DIV的控制了,呵呵,用DIV排版,当然要对它进行制控制了!

div{
       text-align: center;  <!--呵呵,此句也是至关重要的!因为我们上面已说到,由于body栺定过此样式,所以它所包含在内的所有标签也默认带有其样式,所以为了让div恢复正常,所以指定些样式!-->
<!--当然,也可加入字体控制等样式,或是在body中指定了字体样式,此处可不必再指定了!-->
}

说明:也许,看了上面的资料,你觉得有点多此一举,就让我来分析给你听一下吧!
          为什么要给body加入  text-align:center;样式,是因为想让所有的内容居中,因为DIV没有跟表格一样的对齐属性,所以加入了此样式,用于让整个网页来居中,当然,如果你的网页不需要居中时,此指定就可以取消了!

三、DIV在排版时的另一种控制!
由于DIV有一些特别,所以想让两个DIV处在同一行时就有一点"难度"了?呵呵,其实不然!只是我们接触得少所以不知道而以!
    例子:

<div>abc</div><div>abc</div>
此种版式排出来的效果将是:
           abc
           abc

如此,将达不到我们的要求,我们要求它们排在一行喔!
所以,得再次用CSS来对它进行控制了!如下:
<div style="float:left">abc</div><div style="float:left">abc</div>
此种版式得出来的效果将是:
                abc abc

由此,我们可以控制DIV得到表格的效果,即可以用DIV取代表格来进行排版了!

^_^  ,学习重在举一反三!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
XHTML 40个例子显示的内容一样,通过CSS实现不一样的布局效果, 是学习div + css排版的绝佳教程.body标签内的内容如下: Header 1) Content here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very. very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very 2) Navigation here. long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler 3) More stuff here. very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very Here it goes the footer
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值