<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頁面中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 代碼塊 』就可以了:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。