整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          DIV+CSS標(biāo)準(zhǔn)化網(wǎng)頁(yè)布局

          IV+CSS標(biāo)準(zhǔn)化布局的優(yōu)勢(shì)

          使用“DIV+CSS”對(duì)網(wǎng)站進(jìn)行布局符合W3C標(biāo)準(zhǔn),采用這種方式布局通常是為了說(shuō)明與HTML表格定位方式的區(qū)別。因?yàn)楝F(xiàn)在的網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中,已經(jīng)不再使用表格定位技術(shù),而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。通過(guò)使用div盒子模型結(jié)構(gòu)將各部分內(nèi)容劃分到不同的區(qū)塊,然后用css來(lái)定義盒子模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。簡(jiǎn)單地說(shuō),div用于搭建網(wǎng)站結(jié)構(gòu)(框架)、css用于創(chuàng)建網(wǎng)站表現(xiàn)(樣式/美化)。該標(biāo)準(zhǔn)簡(jiǎn)化了HTML頁(yè)面代碼,獲得一個(gè)較優(yōu)秀的網(wǎng)站結(jié)構(gòu),有利于日后網(wǎng)站維護(hù)、協(xié)同工作和便于搜索引擎抓取。當(dāng)然并不是所有的網(wǎng)頁(yè)都需要用div布局,例如數(shù)據(jù)頁(yè)面、報(bào)表之類(lèi)的頁(yè)面,還是使用HTML的表格會(huì)比較方便,web標(biāo)準(zhǔn)里并沒(méi)有說(shuō)要拋棄table。

          DIV+CSS標(biāo)準(zhǔn)的優(yōu)點(diǎn)

          • 表現(xiàn)和內(nèi)容相分離
          • 代碼簡(jiǎn)潔,提高頁(yè)面瀏覽速度
          • 易于維護(hù)和改版
          • 提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率

          各個(gè)瀏覽器之間的差異

          • 安裝多種瀏覽器,對(duì)比差異進(jìn)行調(diào)試
          • 在FF瀏覽器中安裝firebug

          Firebug 為你的 Firefox 集成了瀏覽網(wǎng)頁(yè)的同時(shí)隨手可得的豐富開(kāi)發(fā)工具。你可以對(duì)任何網(wǎng)頁(yè)的 CSS、HTML 和 JavaScript 進(jìn)行實(shí)時(shí)編輯、調(diào)試和監(jiān)控

          就算在不同的瀏覽器中效果不完全一致,也要做到大概一至

          “無(wú)意義”的元素div和span

          • HTML只是賦予內(nèi)容的手段,大部分HTML標(biāo)簽都有其意義(例如,標(biāo)簽p創(chuàng)建段落,h1標(biāo)簽創(chuàng)建標(biāo)題等等)的,然而div和span標(biāo)簽似乎沒(méi)有任何內(nèi)容上的意義,聽(tīng)起來(lái)就像一個(gè)泡沫做成的錘子一樣無(wú)用。但實(shí)際上,與CSS結(jié)合起來(lái)后,它們被用得十分廣泛。你所需要記住的是span和div是“無(wú)意義”的標(biāo)簽。它們的存在純粹是應(yīng)用樣式,所以當(dāng)樣式表失效時(shí)它就沒(méi)有任何的作用
          • 它們被用來(lái)組合成一大塊的HTML代碼并賦予一定的信息,大部分用類(lèi)屬性class和標(biāo)識(shí)屬性id與元素聯(lián)系起來(lái)。span和div的不同之處在于span是內(nèi)聯(lián)的,用在一小塊的內(nèi)聯(lián)HTML中。而div(division)元素是塊級(jí)的(簡(jiǎn)單地說(shuō),它等同于其前后有斷行),用于組合一大塊的代碼,為HTML 文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素,可以包含段落、標(biāo)題、表格甚至其他部分,這使div便于建立不同集成的類(lèi)。
          • div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的,其中所包含元素的特性由div標(biāo)簽的屬性來(lái)控制,或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。

          盒子模型

          每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子,盒子具有寬度(width)和高度(height),盒子里面的內(nèi)容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其他盒子之間,還有邊界(margin)。

          布局中的主要樣式

          • font
          • line-height
          • color
          • margin
          • padding
          • border
          • text-align
          • background

          定位屬性

          區(qū)塊屬性(區(qū)塊模型)

          區(qū)塊框浮動(dòng)

          雖然使用絕對(duì)定位可以實(shí)現(xiàn)頁(yè)面布局,但由于調(diào)整某個(gè)區(qū)塊框時(shí)其它區(qū)塊的位置并不會(huì)跟隨著改變,所以并不是布局的首選方式。而使用浮動(dòng)的區(qū)塊框可以向左或向右移動(dòng),直到它的外邊緣碰到包含它區(qū)塊的邊框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂2⑶矣捎诟?dòng)框不在文檔的普通流中,所以文檔的普通流中的區(qū)塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

          設(shè)置浮動(dòng)

          行框和清理

          在進(jìn)行頁(yè)面布局時(shí),經(jīng)常需要設(shè)置多個(gè)區(qū)塊框并列在一行中排列。最常見(jiàn)的方式就是使用float屬性,再通過(guò)left或right值移動(dòng)區(qū)塊框向左或向右浮動(dòng)。但當(dāng)前面并列的多個(gè)區(qū)塊框總寬度不足包含框的100%時(shí),就會(huì)在行框中留出一定的寬度,而下面的某個(gè)區(qū)塊框又恰好滿(mǎn)足這個(gè)寬度,則很可能會(huì)向上提,和上一行并列的區(qū)塊框在同一行排列。而這不并是我們想要的結(jié)果,所以可以使用clear屬性解決這一問(wèn)題,該屬性的值可以是 left、right、both 或 none,它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

          使用區(qū)塊框設(shè)計(jì)頁(yè)面布局

          • 區(qū)塊居中設(shè)計(jì)

          高度和寬度固定的區(qū)塊居中(position)

          高度和寬度可變的區(qū)塊居中(margin)

          • 布局頁(yè)面居中
          • 設(shè)置兩列浮動(dòng)的布局
          • 設(shè)置三列浮動(dòng)的布局
          • 設(shè)置多列浮動(dòng)的布局

          著框架越來(lái)越不火了,HTML5就不對(duì)框架支持了,iframe也只有url了,Div就擔(dān)當(dāng)了此大任

          DIV+CSS在頁(yè)面部局確實(shí)也很讓人滿(mǎn)意,使用也更方便

          今天突然遇到一個(gè)問(wèn)題,那就是需要導(dǎo)入另一個(gè)頁(yè)面顯示在當(dāng)前頁(yè)的Div里面

          我當(dāng)然可以用iFrame啥的,不過(guò)那不是我想要的方法

          在網(wǎng)上查了半天,方法也很多,不過(guò)有不滿(mǎn)意的地方,因?yàn)槎鄶?shù)都會(huì)用JQuery

          呆會(huì)在下部分會(huì)給出jQuery的實(shí)現(xiàn)

          而且因?yàn)橐獙?dǎo)入的頁(yè)面還有一些特效,而不是單純的數(shù)據(jù),例如,我導(dǎo)過(guò)來(lái)的頁(yè)面樣式都要保持!

          我要實(shí)現(xiàn)的是教你用Ajax實(shí)現(xiàn),大家都知道Ajax可以異步隨時(shí)不用刷新頁(yè)面而更新數(shù)據(jù),功能也很是強(qiáng)大

          而且在未來(lái)HTML5上也對(duì)Ajax有了更好的支持,

          下面我就教你如何使用Ajax快速達(dá)到目的:

          使用源生Ajax,只需二步:

          1:下載Ajaxjs文件:Ajax包下載

          2:頁(yè)面導(dǎo)入js文件<script type="text/javascript" src="ajaxrequest.js"></script>

          完成了,你已經(jīng)成功邁入了阿假科思大門(mén)了

          接著來(lái)完成任務(wù)吧:

          細(xì)節(jié)說(shuō)明:Apach / Ajax / js

          頁(yè)面中添加一個(gè)目標(biāo)地址:例如 <div id="des"></div>

          好啦,另一個(gè)頁(yè)面的全部代碼呆會(huì)就導(dǎo)在這個(gè)叫des的DIV中間;我們要導(dǎo)入的就是頁(yè)面abc.html //用來(lái)設(shè)計(jì)模板頁(yè)很不錯(cuò)哦

          添加JS代碼了:

          <script type="text/javascript">

          var ajaxobj=new AJAXRequest; // 創(chuàng)建AJAX對(duì)象,類(lèi)在剛剛那個(gè)文件里了

          ajaxobj.method="GET"; // 設(shè)置請(qǐng)求方式為GET

          ajaxobj.url="templat/main.html" // 響應(yīng)的URL,以后可以改為一些動(dòng)態(tài)處理頁(yè),會(huì)用Ajax的都知道,這在頁(yè)里可以有目的返回不同的數(shù)據(jù)

          // 設(shè)置回調(diào)函數(shù),輸出響應(yīng)內(nèi)容,因?yàn)槭庆o態(tài)頁(yè)(這是我的需求嘛)所以所有內(nèi)容都過(guò)來(lái)了

          ajaxobj.callback=function(xmlobj) {

          document.getElementById('des).innerHTML = xmlobj.responseText; //可要看好這句話(huà)哦

          }

          ajaxobj.send(); // 發(fā)送請(qǐng)求

          </script>

          到此為止,目的達(dá)成,頁(yè)面是不是完全加載進(jìn)來(lái)了,右健查看源代碼,還很好的隱藏了abc的url,甚至連字都隱藏了,太神奇了,hoho

          用這開(kāi)發(fā)模板,不就是一個(gè)網(wǎng)址了嗎,連個(gè)?號(hào)都不讓看啊,就是一個(gè)字:真爽!

          而且樣式也都是設(shè)好的樣式,也可以把js用function aa{}擴(kuò)起來(lái)在onload(javascript:aa())自由發(fā)揮

          最后說(shuō)明一下:ajax還需要一些瀏覽器檢查,這里是教最快上手,我在FF火狐測(cè)試過(guò)了一切都好,而在IE可能在樣式上會(huì)出點(diǎn)小問(wèn)題,不過(guò)門(mén)都入了,

          慢慢就都會(huì)了,不是嗎

          JQuery方式載入:

          方式一:首先引入jquery的JS文件:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

          更多jQuery內(nèi)部原理見(jiàn)此牛貼:http://www.cnblogs.com/skylaugh/archive/2006/12/18/595563.html

          導(dǎo)入js 添加代碼了,直接寫(xiě)個(gè)js函數(shù)(因?yàn)闊o(wú)論jquery還是Ajax都是js開(kāi)發(fā)的)

          <script language="javascript" type="text/javascript">

          <!--

          function jump(){

          $("#mainBody").load("./templat/main.html",function(){ $("#mainBody").fadeIn(100);}

          );

          -->

          </script>

          直接在要觸發(fā)的地方加上onclick="jump();" 就行了,發(fā)現(xiàn)這個(gè)瀏覽器支持能好點(diǎn)

          更多l(xiāng)oad用法請(qǐng)參閱完整說(shuō)明:http://www.cnblogs.com/mslove/archive/2009/05/07/1452098.html

          方式二:這個(gè)方法是使用jquery的ajax

          var parames={

          "type1":"paramer1","type2":"paramer2"};

          $.ajax({

          url:'myTest.php',

          type:'post',

          dataType:'html',

          data:parames,

          error: function(){alert('error');},

          success:function(data){

          $("#myDiv").html(data);

          }

          });

          這種方式也可以,愛(ài)用哪個(gè)用哪個(gè)吧,哈哈

          附:

          jquery load 事件用法

          如果綁定給window對(duì)象,則會(huì)在所有內(nèi)容加載后觸發(fā),包括窗口,框架,對(duì)象和圖像。如果綁定在元素上,則當(dāng)元素的內(nèi)容加載完畢后觸發(fā)。

          注意:只有當(dāng)在這個(gè)元素完全加載完之前綁定load的處理函數(shù),才會(huì)在他加載完后觸發(fā)。如果之后再綁定就永遠(yuǎn)不會(huì)觸發(fā)了。所以不要在$(document).ready()里綁定load事件,因?yàn)閖Query會(huì)在所有DOM加載完成后再綁定load事件。

          調(diào)用load方法的完整格式是:load( url, [data], [callback] ),

          其中:

          url:是指要導(dǎo)入文件的地址。

          data:可選參數(shù);因?yàn)長(zhǎng)oad不僅僅可以導(dǎo)入靜態(tài)的html文件,還可以導(dǎo)入動(dòng)態(tài)腳本,例如PHP文件,所以要導(dǎo)入的是動(dòng)態(tài)文件時(shí),我們可以把要傳遞的參數(shù)放在這里。callback:可選參數(shù);是指調(diào)用load方法并得到服務(wù)器響應(yīng)后,再執(zhí)行的另外一個(gè)函數(shù)。

          一:如何使用data

          1.加載一個(gè)php文件,該php文件不含傳遞參數(shù)

          $("#myID").load("test.php");

          //在id為#myID的元素里導(dǎo)入test.php運(yùn)行后的結(jié)果

          2. 加載一個(gè)php文件,該php文件含有一個(gè)傳遞參數(shù)

          $("#myID").load("test.php",{"name" : "Adam"});

          //導(dǎo)入的php文件含有一個(gè)傳遞參數(shù),類(lèi)似于:test.php?name=Adam

          3. 加載一個(gè)php文件,該php文件含有多個(gè)傳遞參數(shù)。注:參數(shù)間用逗號(hào)分隔

          $("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});

          //導(dǎo)入的php文件含有一個(gè)傳遞參數(shù),類(lèi)似于:test.php?name=Adam&site=61dh.com

          4. 加載一個(gè)php文件,該php文件以數(shù)組作為傳遞參數(shù)

          $("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

          //導(dǎo)入的php文件含有一個(gè)數(shù)組傳遞參數(shù)。

          注意:使用load,這些參數(shù)是以POST的方式傳遞的,因此在test.php里,不能用GET來(lái)獲取參數(shù)。

          二:如何使用callback

          比如我們要在load方法得到服務(wù)器響應(yīng)后,慢慢地顯示加載的內(nèi)容,就可以使用callback函數(shù)。代碼如下:

          $("#go").click(function(){

          $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){

          $("#myID").fadeIn('slow');}

          );

          });

          備注:

          在load的url里加上空格后面就可以跟選擇器了。

          例如:

          $("body").load("test.html #a");

          )CSS 標(biāo)準(zhǔn)盒子模型(Box Model)

          在網(wǎng)頁(yè)中所有HTML元素可以看作盒子,在CSS中,"box model"術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用的;CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周?chē)腍TML元素包括:外邊距(margin)邊框(border)內(nèi)邊距(padding)實(shí)際內(nèi)容(content)四個(gè)屬性,所以布局時(shí)每個(gè)元素所占的總寬高是這4個(gè)屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

          1.1Margin(外邊距)清除邊框外的區(qū)域,外邊距是透明的

          1.2Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框

          1.3Padding(內(nèi)邊距)清除內(nèi)容周?chē)膮^(qū)域,內(nèi)邊距是透明的

          1.4Content(內(nèi)容)盒子里填充的內(nèi)容比如文本,圖像等

          標(biāo)準(zhǔn)盒子模型

          寬度為100px的div

          根據(jù)盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個(gè)寬度為100px的元素,此元素的總寬度必須小于等于100px

          2)DIV+CSS布局

          Div+CSS布局就是將網(wǎng)頁(yè)內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個(gè)塊的大小,位置等

          DIV+CSS布局最重要的是靈活運(yùn)用float(浮動(dòng))屬性,其值:1)left 2)right 3)both

          clear屬性作用是清除浮動(dòng),其值為:1)left 2)right 3)both

          d2向右浮動(dòng) float:right

          因?yàn)閐iv是塊級(jí)元素,如果都沒(méi)有脫離文檔流div就會(huì)按照從上到下的順序放置

          d2設(shè)置為右浮動(dòng)其他兩個(gè)div位置的變化:

          1)d1沒(méi)有脫離文檔流會(huì)占據(jù)一行,所以d2只能浮動(dòng)到d1下面的右面如上圖所示

          2)d2脫離文檔流,d3自動(dòng)填充到d2的位置

          d1,d2全部設(shè)置為右浮動(dòng)

          1)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):因?yàn)閏ss中d1在d2上面先設(shè)置,因此d1在右側(cè),如果d2在d1上面先設(shè)置樣式,則d2在右側(cè),d1在左側(cè),自己測(cè)試不再截圖

          2)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):d3就會(huì)跑到上圖中d2的位置

          3)如果3個(gè)div都設(shè)置左或右浮動(dòng),當(dāng)3個(gè)width加一起<=100%就會(huì)在第一行顯示(d1,d2,d3)

           <style type="text/css">
                #d1 {
                margin: 0px;
                background-color: red;
                padding: 0px;
                width: 50%;
                height: 100px;
                float:right; 
              }
              #d2 {
                margin: 0px;
                background-color: yellow;
                padding: 0px;
                width: 50%;
                height: 100px;
                float:right; 
              }
              #d3 {
                margin: 0px;
                background-color: green;
                padding: 0px;
                width: 50%;
                height: 100px;
              }
            </style>

          d2清除左浮動(dòng),d3設(shè)置為右浮動(dòng)

          當(dāng)d2清除了左浮動(dòng),d3設(shè)置為右浮動(dòng),就會(huì)如上圖所示;如果d2清除的是右浮動(dòng),d2就會(huì)在d1上面,d3就會(huì)定位在d1下面的右面,自己測(cè)試不再截圖

          當(dāng)d2清除了左浮動(dòng),如果想要d2緊挨著d1(與d1在一行上),可以通過(guò)position脫離文檔流設(shè)置其上下左右屬性使其定位在d1右側(cè),自己測(cè)試

          <!DOCTYPE html
            PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
            <title>div+CSS布局</title>
            <style type="text/css">
                #d1 {
                margin: 0px;
                background-color: red;
                padding: 0px;
                width: 30%;
                height: 100px;
                float:left; 
              }
              #d2 {
                margin: 0px;
                background-color: yellow;
                padding: 0px;
                width: 40%;
                height: 100px;
                clear: left;     
              }
              #d3 {
                margin: 0px;
                background-color: green;
                padding: 0px;
                width: 30%;
                height: 100px; 
                float: right; 
              }
            </style>
          </head>
          <body>
              <div id="d1"><span style="font-size: 50px;">d1</span></div>
              <div id="d2"><span style="font-size: 50px;">d2</span></div>
              <div id="d3"><span style="font-size: 50px;">d3</span></div>
            </body>
          </html>

          DIV+CSS布局綜合運(yùn)用position+上下左右屬性與float屬性為網(wǎng)頁(yè)進(jìn)行布局

          注意:瀏覽器的兼容性問(wèn)題,特別是使用IE內(nèi)核的瀏覽器對(duì)W3C的規(guī)范不怎么遵守


          主站蜘蛛池模板: 亚洲国产成人久久一区WWW| 色狠狠一区二区三区香蕉| 国产在线一区二区综合免费视频| 久久久久人妻一区二区三区| 一区二区三区久久精品| 韩国福利视频一区二区 | 国产探花在线精品一区二区| 日本精品视频一区二区| 日本一区二区三区不卡视频| 日韩av无码一区二区三区| 丰满少妇内射一区| 日韩人妻无码一区二区三区久久99| 成人精品一区久久久久| 成人免费视频一区二区三区 | 福利国产微拍广场一区视频在线| 中文字幕视频一区| 亚洲第一区视频在线观看| 久久亚洲日韩精品一区二区三区| 国产成人精品无码一区二区老年人| 99精品高清视频一区二区| 国产福利精品一区二区| 久久综合精品国产一区二区三区| 美日韩一区二区三区| 国产微拍精品一区二区| 国产欧美色一区二区三区| 亚洲熟女www一区二区三区| 精品成人乱色一区二区| 精品一区二区ww| 国偷自产视频一区二区久| 福利电影一区二区| 波多野结衣中文一区二区免费| 国产微拍精品一区二区| 国产一区二区三区视频在线观看| 国产视频一区二区| 一区二区视频在线免费观看| 中文字幕一区二区三区日韩精品| 亚洲线精品一区二区三区影音先锋 | 夜夜添无码一区二区三区| 国产一区二区三区久久精品| 久久一区不卡中文字幕| 亚洲av乱码一区二区三区按摩 |