如何進(jìn)行常用CSS+DIV排版技術(shù)用法的分析-四川平武建站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

如何進(jìn)行常用CSS+DIV排版技術(shù)用法的分析

本篇文章給大家分享的是有關(guān)如何進(jìn)行常用CSS+DIV排版技術(shù)用法的分析，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、上栗網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)、上栗網(wǎng)絡(luò)營(yíng)銷(xiāo)、上栗企業(yè)策劃、上栗品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供上栗建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

向大家描述一下CSS+DIV排版技術(shù)的使用，主要包括縱向排列元素，橫向排列元素，用列表排列元素和用絕對(duì)坐標(biāo)定位元素等內(nèi)容，用DIV把元素定義為塊對(duì)象，用CSS設(shè)置對(duì)象的格式和位置。

幾種常用CSS+DIV排版技術(shù)

用DIV把元素定義為塊對(duì)象，用CSS設(shè)置對(duì)象的格式和位置。CSS+DIV排版方式是目前應(yīng)用很廣的排版方式，它的使用非常靈活，可制作非常復(fù)雜的版面。以下是幾種常用的CSS+DIV排版技術(shù)。

縱向排列元素

此類(lèi)CSS+DIV排版技術(shù)用

標(biāo)簽定義塊對(duì)象，由于

標(biāo)簽本身有換行作用，各元素自然排成一列。用CSS的margin屬性設(shè)置對(duì)象間的距離，用padding屬性調(diào)整對(duì)象的寬度和高度。

舉例：

 #menu{  width:100px;font-size:15px;  }  .dd{  border:1pxdotted#0000FF;padding-top:5px;  padding-bottom:5px;padding-left:5px;margin-bottom:3px;  }    HTML

CSS

JavaScript

顯示效果為：

如何進(jìn)行常用CSS+DIV排版技術(shù)用法的分析

橫向排列元素

用

標(biāo)簽定義塊對(duì)象，用CSS的float屬性設(shè)置對(duì)象的浮動(dòng)，此為CSS+DIV排版中的橫向排列。

舉例：

 #box{  height:110px;  }  #b1{  width:120px;height:100px;border:4pxdouble#0000FF;  float:left;  }  #b2{  width:120px;height:100px;border:4pxdouble#0000FF;  float:left;clear:none;margin-left:5px;margin-right:5px;  }  #b3{  width:120px;height:100px;border:4pxdouble#0000FF;  float:left;clear:right;  }

顯示效果為：

如何進(jìn)行常用CSS+DIV排版技術(shù)用法的分析

用列表排列元素

用

舉例：

 .list1{  height:20px;  }  .list1ul{  list-style-type:none;margin:0px;  }  .list1li{  float:left;margin-right:5px;  }     [1]
 [2]
 [3]
 [4]

顯示效果為：

[1][2][3][4]
用絕對(duì)坐標(biāo)定位元素

瀏覽器窗口的左上角坐標(biāo)為(0,0)，x坐標(biāo)向右，y坐標(biāo)向下，此為CSS+DIV排版技術(shù)之絕對(duì)坐標(biāo)定位。CSS提供了幾個(gè)位置屬性，可以設(shè)置對(duì)象在頁(yè)面中的位置。

position：當(dāng)它取值為absolute時(shí)，表示對(duì)象使用絕對(duì)坐標(biāo)定位。

left、top：對(duì)象的左上角坐標(biāo)。

right、bottom：對(duì)象的右下角坐標(biāo)。

z-index：對(duì)象的層疊順序。取值為一個(gè)整數(shù)。

用絕對(duì)坐標(biāo)定位的對(duì)象是可以發(fā)生重疊的，如果沒(méi)有指定層疊順序，則后定義的對(duì)象位于上層，如果指定了“z-index”值，則值大的位于上層。

舉例：

 #m1{  width:120px;height:100px;border:4pxdouble#0000FF;  position:absolute;left:50px;top:10px;z-index:1;  }  #m2{  width:120px;height:100px;border:4pxdouble#0000FF;  position:absolute;left:185px;top:10px;z-index:2;  }  #m3{  width:120px;height:100px;border:4pxdouble#0000FF;  position:absolute;left:320px;top:10px;z-index:3;  }

我們一般不推薦使用這種方法制作網(wǎng)頁(yè)，這種網(wǎng)頁(yè)調(diào)整起來(lái)非常困難，只是在一些特殊情況下使用。

父對(duì)象的左上角坐標(biāo)為(0,0)，對(duì)象的坐標(biāo)是相對(duì)于父對(duì)象的，這是CSS+DIV排版技術(shù)之相對(duì)坐標(biāo)定位。

position：當(dāng)它取值為relative時(shí)，表示對(duì)象使用相對(duì)坐標(biāo)定位。

以上坐標(biāo)也可理解為相對(duì)于父對(duì)象的左上角偏移的距離。

注意：用相對(duì)坐標(biāo)定位的對(duì)象不允許層疊。此時(shí)z-index屬性無(wú)效。

用相對(duì)坐標(biāo)定位對(duì)象在實(shí)現(xiàn)一些不規(guī)則的排列或拼接時(shí)有很好的效果。

99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

新聞中心

其他資訊