整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          初識HTML中的<div&gt

          初識HTML中的<div>塊元素-零基礎自學網頁制作

          lt;div>塊元素基礎屬性講解

          <div>元素是個有故事的元素,這個元素很早就出現在html超文本標記語言中,它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。

          在我還上初中的時候,智能手機還沒有出現,更沒有平板電腦等移動設備。上網是通過擺在桌子上的計算機來完成的。

          那時,大街小巷上有好多網吧。

          那時,馬云剛剛辭去工作準備創業。

          那時,發送郵件的操作都會出現在計算機課程中。

          那時,對頁面還沒有現在的跨平臺要求。

          那時,flashplayer大行其道。

          那時,dreamwaver、flash、fireworks被稱為網頁三劍客!

          那時,制作網頁可以不用懂的html的寫法!

          第一次接觸網頁制作是在大學的專業課上,使用三劍客,通過點擊軟件菜單中的按鈕就能制作網頁,精力都放在了如何使用flash制作酷炫的交互動畫上了。

          那時,對html還沒有深刻的認識,但是卻對<table></table>這個標簽有著極深的印象。

          因為當時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進行布局的!

          也就是說,在移動智能設備誕生之前,在用戶對頁面還沒有可以適應不同屏幕比例的要求前,<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作,而且把兼職干成了主業,讓<div>這個專業的塊元素閑置了好久。

          直到智能手機,平板電腦產生后,由于對頁面的跨平臺顯示的要求的出現(這類適應多平臺的頁面布局叫做響應式布局),<table>表格制作的頁面在響應式布局大行其道的今天,用它布局的頁面開始出現代碼冗余,維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數反感和惱火的插件。

          從此,頁面制作的世道變了,從不需要編程就能制作頁面的三劍客,變成了必須懂得相關代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復了寫代碼做頁面的操作方式,過去的點擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術的從業人感到難受。

          dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網頁的軟件,還搞出一個叫做Muse的軟件,但是依舊沒能撬動代碼書寫的方式。

          這個故事在開始學習<div>和css布局之前我都會講給學生(一群文科生)聽,我只是想告訴大家,學習任何計算機技術,我們可以從簡單易學的方式入手,但要有透過這種方式向下挖掘核心知識的決心和勇氣!對于自己從事的工作我們不能滿足于會做,還要盡量透析它的原理,這樣才能在技術換代中不會被輕易淘汰。

          在我研究生階段,有一門讓我終生難忘的選修課,這門課叫做《數字娛樂技術概述》,這門課既不娛樂也不概述,但是通篇都是數字,那位年輕的教授為我們透析了游戲、影視特效的核心----計算機圖形學。

          從此我開始學習數學。因為老師的一句話:從2000年到現在(2014)雖然各種軟件層出不窮,但是計算機圖形學的核心算法卻幾乎沒什么改變

          向下挖掘雖然很難,但是有必要!與各位共勉!

          下面開始今天的內容。

          首先,我們將之前的"第一個頁面.html"文件復制一個,叫做"塊元素學習.html"。然后把<body></body>中間的內容清空。

          如圖:

          下面,我們在<body></body>中間添加<div></div>標簽。示例代碼如下:

          <body><div></div></body>

          我們看看效果:

          啦啦啦,什么都沒有!

          為了讓大家可以看出來不同,我們為<div>添加邊框屬性!

          我們使用style屬性為<div>添加邊框,style屬性里的代碼就是以后在CSS中使用的代碼!實際上我們已經開始接觸CSS的一些內容了。具體寫法的講解大家可以看這個教程,這里不再贅述。

          示例代碼如下:(通過style="border-style: solid;"可以為很多元素添加邊框,就不需要大家記憶或查詢不同元素的不同寫法,是不是很方便!)

          <div style="border-style: solid;">

          效果如圖:

          因為里面沒有內容,所以<div>的寬度是0,因此顯示的就是一條直線。下面我們向<div>中添加內容。

          為了看起來花哨些,加張圖片吧!

          示例圖片

          示例代碼如下:

          <div style="border-style: solid;"><img src="img/示例圖片/image4.jpg"/ style="width:50%;"></div>

          大家請按照<img>中的scr自行建立文件夾和命名吧!如果您看不懂請參照《HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作》

          效果如下:

          其中,我們也是使用了style的方式為<img>設置的寬度,這個設置方法在<div>中一樣使用!

          代碼示例:大家注意寫法,不同的屬性都添加到style的雙引號中即可,同時使用;隔開!

          <div style="border-style: solid; width:50%;">
            <img src="img/示例圖片/image4.jpg"/ style="width:50%;">
              </div>

          效果如圖:

          整個邊框縮小了50%,圖片更有趣,尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。

          為了方便觀看,我們去掉div的width設置。同時在<div>中繼續添加<div>標簽。為了方便顯示,我們在新的<div>中添加一段文字!

          示例代碼如下:

          <div style="border-style: solid;">
            <img src="img/示例圖片/image4.jpg"/ style="width:50%;">
              <div>
              <p>學習網頁制作非常有趣!</p>
          </div>
          </div>

          效果如下:

          如果為了美觀,我們讓文字到圖片右邊的空間中怎么做呢?

          示例代碼如下:

          <div style="float:right;"><p>學習網頁制作非常有趣!</p></div>

          我們通過為新的<div>標簽中的style屬性添加float(浮動)屬性,同時設置為right(右)。

          頁面效果如圖:

          大家思考一下如何讓圖片與文字都靠在左邊呢?

          是不是為圖片style添加float:left;同時把新<div>的float改為left?

          我們試試看!

          示例代碼如下:

          <div style="border-style: solid;">
            <img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
              <div style="float:left;">
                <p>學習網頁制作非常有趣!</p>
          </div>
          </div>

          頁面效果:

          效果完全不對,圖片和文字跑到外邊來了。

          這是div布局中經常出現的一個問題!解決方案有點奇葩,既不是修改<img>屬性也不是修改<div>屬性,而是增加一組空的<div></div>標簽!給這個新的空的<div>的style設置為"clear:both"即可修正。

          示例代碼如下:

          <div style="border-style: solid;">
            <img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
              <div style="float:left;">
                <p>學習網頁制作非常有趣!</p>
          </div>
          <div style="clear:both;"></div>
          </div>

          頁面效果如下:

          值得注意的是,如果您不使用<div>的話直接使用<img>和<p>,同時對兩個標簽的style設置為float:left,是沒有問題的,只有把它們放到<div>中才會出現上面的情況。

          代碼如下:

          <body>
            <img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
              <p style="float:left;">學習網頁制作非常有趣!</p>
          </body>

          頁面顯示效果如下:

          大家觀察一下,文字也變小了。至于為什么去掉<div>之后就不會出現上面那種出框的情況,而且文字也變小的問題在以后的講解中我們再深入探討!

          現在希望大家可以記牢這個情況和操作,更多布局問題我們會在CSS的浮動(float)的講解中詳細說明。

          疫情期間,請大家少出門,不聚會,沒事在家學學網頁制作,即抗擊疫情又提高自己!

          喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

          面制作技術詳解


          演示視頻在文章底部

          1.頁面內容居中顯示方法

          將這段代碼<div style="width:50%;margin:auto;">放置在<body>標簽之下。

          將</div>放置在</body>之上。

          將全部內容包裹在這個div中,就可以實現整個頁面居中。

          內容顯示寬度為瀏覽器視窗寬度的50%。

          margin(外邊距)是在CSS布局中經常用到的屬性,它指定了該div元素距離四周的距離。使用“auto”值,可以實現居中。

          2.導航欄懸停頂端方法

          把四個a標簽裝到一個div中。

          將<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。

          將</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。

          position是css布局中指定位置的屬性,“fixed”值是讓該div懸停于固定位置。

          默認下,該div距離視窗頂端有10px左右的距離,因此為了讓它與視窗頂部對齊,添加top:0px。

          3.鼠標滑過導航標題或鏈接時改變背景色提示

          這就要介紹關于css的寫法了。

          簡單來說,就是在<head></head>標簽中添加

          <style>

          a:hover

          {

          background-color:#ffff00;

          }

          </style>

          學過HTML頁面中head標簽有啥用?——零基礎自學網頁制作的小伙伴應該知道,CSS腳本是可以添加在head元素中的。

          其中,a:hover中的a指的是所有<a></a>標簽。

          hover指的是:當鼠標懸停在a上面時的狀態。

          使用:連接。

          這個狀態下要執行的內容在{}中。

          background-color:#ffff00;即背景色為黃色。

          3.隱藏滾動條方法

          首先,我們要明確一點,就是,滾動條是在內容長度超過視窗高度時產生的。

          如果要取消視窗最右側滾動條,就要控制內容高度。

          把<p></p>和<img/><map></map>全部裝進<div></div>中,控制該div的高度可以實現。

          在<p>標簽色上面添加<div>。

          在</map>標簽下面添加</div>。

          下面,為div規定尺寸,添加style="width:610px; height:530px;"。

          這樣,就不會超出視窗。但是代碼寫完后發現并不是,如圖:

          多出的文字內容超出div范圍,右側滾動條依然存在。

          這就要在div的style中再增加一條語句"overflow-y:scroll;"

          這句話的意思是“overflow-y”(超出最大高度)就顯示滾動條(scroll)。而不是讓內容超出div的邊框。

          <div style="width:610px; height:530px; overflow-y:scroll;" >

          如圖:

          因為圖片寬度的問題,下方的x軸的scroll也出現了,我們不想看到它,影響美觀。

          添加“overflow-x:hidden”即可,hidden(隱藏)。

          <div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >

          如圖:hidden之后,將無法滾動或拖動畫面。

          最后,我們要把右側的scroll也隱藏掉,因為點擊鼠標,滾動滾輪就夠了,滾動條實在礙眼。

          從前面的例子可知,hidden是不行的,有沒有別的辦法?

          那就是在蓋div的外部再添加一個div,讓這個div的寬度略小于里面div的寬度,小到剛剛擋住滾動條既可以。如圖:

          這個div這樣寫即可

          <div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">

          </div>

          同時還要給里面的div添加margin來讓它們對齊

          <div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">

          <div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >

          <!--省略了p img map 請自行腦補或參考源碼-->

          </div>

          </div>

          完整代碼:用HTML制作一個簡單頁面(代碼閱讀練習)——零基礎自學網頁制作

          些在線圖文編輯器不支持直接插入代碼塊,但可以直接粘貼 HTML 格式的高亮代碼塊。

          花了一點時間研究了一下各家的編輯器,規則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關鍵詞,或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求,不是變成普通文本,就是丟失換行縮進,或者丟失顏色樣式。

          所以,這就難了。先得找個支持代碼高亮的編輯器,仔細地選擇并復制代碼塊,復制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉換工具了。

          因為瀏覽器操作系統剪貼板可能不太方便,下面用 aardio 寫一個工具軟件。

          先看軟件成品演示:

          軟件用法:

          1、輸入編程語言名稱(支持自動完成)。

          2、然后在輸入框中粘貼要轉換的編程代碼。

          3、點擊「復制高亮代碼塊」按鈕。

          然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。

          下面是這個軟件的 aardio 源代碼:

          import win.ui;
          /*DSG{{*/
          var winform=win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
          winform.add(
          button={cls="button";text="復制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網頁編輯器直接粘貼";z=4};
          cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
          editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
          static={cls="static";text="請選擇語言:";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
          webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
          )
          /*}}*/
          
          import web.view;
          var wb=web.view(winform.webCtrl);
          
          import win.clip.html;
          wb.export({ 
              onHighlight=function(html,background,foreground){
                  html=`<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
                      + html + `</code></pre>`;
          
                  html,count=string.replace(html,'\n',"<br>");
                  if(!count){
                      html=string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
                  }
                  var cb=win.clip.html();
                  cb.write(html); 
          
                  winform.setTimeout( 
                      function(){
                          winform.editCode.show(true);
                          winform.webCtrl.show(false);
                          winform.text="HTML 代碼塊生成工具 - 已復制高亮代碼塊到剪貼板,可在網頁直接粘貼";
                      },1000); 
              };
              setLanguages=function(langs){
                  winform.languages=langs;
              }  
          })
          
          
          winform.cmbLangs.onEditChange=function(){ 
          
              var text=string.lower(winform.cmbLangs.text);
              var items=table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) ); 
              winform.cmbLangs.autoComplete(items);  
          }
          winform.cmbLangs.editBox.disableInputMethod();
          
          import web.prism;
          import wsock.tcp.asynHttpServer;
          var httpServer=wsock.tcp.asynHttpServer(); 
          httpServer.run(web.prism,{
              ["/index.html"]=/*****
          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="UTF-8" /> 
              <link href="prism.css" rel="stylesheet" />
            </head>
            <body>
              <pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
              <script src="prism.js"></script>
              <script>
             function computedColorStyle(element, options={}) {
          
                  Array.prototype.forEach.call(element.children,child=> {
                      computedColorStyle(child, options);
                  });
          
                  const computedStyle=getComputedStyle(element);
                  element.style["color"]=computedStyle.getPropertyValue("color");  
              }
          
              highlight=function(code,language){
                  var html=Prism.highlight(code, Prism.languages[language], language);
          
                  var codeEle=document.getElementById("code");
                  codeEle.innerHTML=html;
                  computedColorStyle(codeEle);
          
                  const computedStyle=getComputedStyle(codeEle);  
                  onHighlight(codeEle.innerHTML
                      ,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
                      ,computedStyle.getPropertyValue("color"));
              }
          
              setLanguages( Object.keys(Prism.languages) );
              </script>
            </body> 
          </html> 
              *****/
          });
          
          wb.go( httpServer.getUrl("/index.html"));
          
          winform.button.oncommand=function(id,event){
              winform.text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫"
              winform.editCode.show(false);
              winform.webCtrl.show(true);
          
              wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
          }
          
          
          winform.show();
          win.loopMessage();

          打開 aardio 創建工程,然后復制粘貼上面的代碼到 main.aardio 里面就可以直接運行,或生成獨立 EXE 文件:

          這個軟件的原理:

          1、首先通過 WebView2 調用 Prism.js 高亮代碼。為了可以內存加載 Prism.js ( 支持生成獨立 EXE ),我寫了一個 aardio 擴展庫 web.prism 。關于 WebView2 請參考:放棄 Electron,擁抱 WebView2!JavaScript 快速開發獨立 EXE 程序

          2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式,所以我們需要調用 getComputedStyle 獲取最終渲染的字體顏色屬性。

          3、最后在 JavaScript 里調用 aardio 函數處理生成的 HTML 代碼塊,aardio 的任務是將 HTML 修改為更合適直接粘貼的格式,并盡可能地處理各圖文編輯器的兼容問題。然后調用 win.clip.html 將處理好的 HTML 復制到系統剪貼板:

          import win.clip.html;
          
          var cb=win.clip.html();
          cb.write(html); 

          然后只要愉快地粘貼代碼塊就可以。

          如果是 aardio 代碼不需要用這個工具,在 aardio 編輯器里右鍵直接點『 復制全部到 HTML 代碼塊 』就可以了:


          主站蜘蛛池模板: 亚洲国产av一区二区三区| 亚洲美女视频一区| 亚洲区精品久久一区二区三区| 亚洲AV无码一区二区三区鸳鸯影院| 美女免费视频一区二区| 秋霞电影网一区二区三区| 国产第一区二区三区在线观看| 精品视频一区二区三区免费| 成人在线一区二区| 日本一区二区三区在线视频| 亚洲日本久久一区二区va| 亚洲国产美女福利直播秀一区二区| 搜日本一区二区三区免费高清视频| 日韩美一区二区三区| 国产一区在线电影| 国产AV天堂无码一区二区三区| 国产伦精品一区二区三区无广告| 乱码人妻一区二区三区| 国产怡春院无码一区二区| 亚洲高清毛片一区二区| 色窝窝免费一区二区三区| 精品一区二区三人妻视频 | 国产爆乳无码一区二区麻豆| 成人乱码一区二区三区av| 午夜影视日本亚洲欧洲精品一区| 曰韩精品无码一区二区三区| 国产精品丝袜一区二区三区| 亚洲一区二区电影| 久久青青草原一区二区| 国产丝袜无码一区二区视频| 爆乳熟妇一区二区三区| 国产在线精品一区二区不卡麻豆| 亚洲熟女少妇一区二区| 色偷偷av一区二区三区| 午夜性色一区二区三区免费不卡视频| 久久精品无码一区二区三区免费 | 久久一区二区精品综合| 91久久精品国产免费一区 | 国产激情视频一区二区三区| 日韩人妻精品无码一区二区三区| 亚洲大尺度无码无码专线一区|