Web前端開發(fā)技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 單元7 網(wǎng)頁布局與制作精彩非遺資訊頁面

項目7

非遺資訊頁面信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》頁面布局任務7.1

搭建資訊頁面的基本框架前端技術開發(fā)任務引入一非遺資訊頁面的原型圖網(wǎng)頁內(nèi)容框架將復雜的頁面劃分成不同的區(qū)域，分而治之任務描述搭建資訊頁面整體布局1.將網(wǎng)頁內(nèi)容劃分為3大區(qū)域，分別為頁眉、頁面主要內(nèi)容、頁腳，每個區(qū)域使用層來實現(xiàn)。2.頁面主要內(nèi)容區(qū)域又可劃分為“資訊推介”區(qū)域和“專題報道”區(qū)域。3.為了直觀了解網(wǎng)頁的整體布局，會增加背景等樣式來突出不同的區(qū)域?；睘楹?，從大處著眼，從細節(jié)處著手。任務實施二3124使用層來創(chuàng)建各區(qū)域，搭建網(wǎng)頁結構設置各區(qū)域的樣式根據(jù)UI設計，劃分頁面的各內(nèi)容區(qū)域各區(qū)域的上下、左右排版HTML創(chuàng)建層CSS樣式設置劃分區(qū)域CSS排版二任務實施將頁面劃分為頁眉、頁腳、頁面主要內(nèi)容三個區(qū)域頁面主要內(nèi)容頁眉頁腳Footer層Content層Header層對應創(chuàng)建Header層、Content層、Footer層二任務實施Footer層Content層Header層創(chuàng)建Header層、Content層、Footer層三個部分<divid="header">

頁面頭部</div><divid="content">

頁面主體</div><divid="footer">

頁面底部</div>創(chuàng)建層的HTML代碼任務實施二<divid="content">

<divid="news">

<h1>資訊推介</h1> </div>

<divid="report">

<h1>專題報道</h1>

</div></div>頁面主體HTML代碼contentnewsreportnews區(qū)塊逐步細化，分為news層和report層任務實施二#header,#content,#footer{

width:1300px;

margin:auto;}#header,#footer{

height:100px;

background:#faa046;}#header,#content{

margin-bottom:10px;}#content{

height:600px;

background:#50b8fd;}#news,#report{

height:290px;

background:#ccc;

margin-bottom:10px;}CSS代碼設置各個層（區(qū)塊）的大小，在實際應用中，一般只設置寬度，高度根據(jù)內(nèi)容自適應。設置各個層之間的間距設置層的樣式。感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》文檔流與元素顯示方式信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》前端技術開發(fā)知識儲備文檔流1塊級元素與行內(nèi)元素2調(diào)整元素大小3元素顯示方式401文檔流前端技術開發(fā)文檔流前端技術開發(fā)01文檔流的概念

文檔流又稱標準文檔流，是網(wǎng)頁文檔中可顯示元素所占用的位置以及排列的方式。按照網(wǎng)頁代碼出現(xiàn)的位置從上到下，從左到右進行顯示，這也是瀏覽器解析網(wǎng)頁文檔默認的顯示方式。上下排列左右排列02塊級元素與行內(nèi)元素前端技術開發(fā)塊級元素前端技術開發(fā)02什么是塊級元素

塊級元素自占一行，在元素前后帶有換行符，塊級元素之間是上下顯示。

默認情況下，寬度與父元素同寬，高度根據(jù)內(nèi)容而定，沒有內(nèi)容，高度為0。它們一般做為容器、盒子使用。常見塊級元素：<p>、<h1>~<h6>、<div>（層）。行內(nèi)元素前端技術開發(fā)02什么是行內(nèi)元素

行內(nèi)元素在一行內(nèi)從左往右依次排列。

默認情況下，寬度和高度都根據(jù)內(nèi)容自動計算而定，width屬性和height屬性不起作用。常見行內(nèi)元素：<span>、<a>。03調(diào)整元素大小前端技術開發(fā)調(diào)整元素大小前端技術開發(fā)03設置元素寬度的語法：設置元素高度的語法：width：百分比|長度height：百分比|長度CSS中調(diào)整塊級元素的大小，包括寬度和高度。說明：HTML中表示長度的單位，常用的有：像素(px)，em(相對于當前字體尺寸的單位)，rem等。

百分比表示與該元素的父元素為參考。h1,a{

width:200px;

height:100px;}調(diào)整元素大小03設置標題和超鏈接的大小塊級元素和行內(nèi)元素設置大小塊級元素（h1）按照width和height屬性調(diào)整大小。行內(nèi)元素（a）超鏈接元素設置大小不起作用，仍然是自適應大小。04元素顯示方式前端技術開發(fā)元素顯示方式前端技術開發(fā)04display屬性設置元素顯示方式。在實際網(wǎng)頁排版布局中，可以遵循網(wǎng)頁元素默認的顯示方式，也可以使用display屬性改變元素的顯示方式。屬性值描述none元素不顯示。block塊級元素。inline行內(nèi)元素。inline-block行內(nèi)塊級元素。inline-table外面是“內(nèi)聯(lián)盒子”，里面是“table盒子”。table塊級表格。table-row表格行。table-cell表格單元格。list-item為元素內(nèi)容生成一個塊型盒，隨后再生成一個列表型的行內(nèi)盒。flex彈性盒子display屬性取值元素顯示方式前端技術開發(fā)04設置超鏈接元素的顯示方式：獨占一行，可設置大小一行顯示多個，可設置大小a{

display:block;

width:100px;

height:50px;}a{

display:inline-block;

}將超鏈接設置為按塊級元素顯示將超鏈接設置為行內(nèi)塊級元素顯示總結前端技術開發(fā)網(wǎng)頁元素默認的顯示方式，默認樣式。不同的元素顯示方式和默認樣式不同。比如：塊級元素：獨占一行。上下排列。可以設置大小。

行內(nèi)元素：一行可顯示多個。左右排列。無法控制大小。文檔流的概念01display屬性的使用方式和取值。它可以控制元素以塊級或行內(nèi)元素的顯示方式顯示。元素顯示方式02感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》CSS核心-盒子模型信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》前端技術開發(fā)知識儲備創(chuàng)建層1盒子模型2設置填充3設置邊距401創(chuàng)建層前端技術開發(fā)01層元素層標記元素語法：<div>…</div>說明：

<div>標記可定義網(wǎng)頁文檔中的區(qū)塊或節(jié)（division/section），把文檔內(nèi)容分割為獨立的、不同的部分，它可以看作是一個包容網(wǎng)頁元素的容器。

<div>是一個塊級元素，只有前后換行樣式，是一個非?！案蓛簟钡碾p標記。<div>直接放文本</div><div><ahref=“index.html”>首頁</a></div><div

id="nav"><ul><li><ahref="#"target="_blank">首頁</a></li><li><ahref="#"target="_blank">機構</a></li><li><ahref="#"target="_blank">資訊</a></li><li><ahref="#"target="_blank">調(diào)研</a></li><li><ahref="#"target="_blank">指南</a></li></ul></div>01創(chuàng)建層HTML代碼：網(wǎng)頁效果：div做為容器使用02盒子模型概念前端技術開發(fā)02盒子模型什么是盒子模型？盒子模型（boxmodel）是CSS的核心知識點之一。網(wǎng)頁上的每個元素（標記）都被看成是一個矩形盒子，這個盒子由里往外的順序為：內(nèi)容（content）、填充（padding）、邊框（border）、邊距（margin）這四個要素組成。03設置填充前端技術開發(fā)03設置填充填充（padding）也稱內(nèi)邊距，在盒子模型中用于調(diào)整元素內(nèi)容到邊框的距離。設置填充的CSS屬性內(nèi)容屬性說明上內(nèi)邊距padding-top長度|百分比，其中，百分比是相對于上級元素寬度width的百分比，隨著上級元素width的變化而變化，和高度height無關右內(nèi)邊距padding-right下內(nèi)邊距padding-bottom左內(nèi)邊距

padding-left組合屬性內(nèi)邊距

padding取1~4個值。可參考border-style設置h2{text-align:center;}p{border:5pxsolidgreen;}.b2{

padding:35px10px15px25px}03設置填充CSS代碼：網(wǎng)頁效果：<h2>設置填充屬性</h2><p>該段文字內(nèi)容和邊框之間沒有設置空白距離</p><pclass="b2">該段文字內(nèi)容應用填充復合屬性，設置了與邊框上右下左之間的空白距離為35像素、10像素、15像素和25像素。</p>HTML代碼：04設置邊距前端技術開發(fā)04設置邊距邊距（margin）也稱外邊距，用于網(wǎng)頁元素周圍生成額外的空白區(qū)?！翱瞻讌^(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域。內(nèi)容屬性說明上邊距margin-top長度|百分比，其中，百分比是相對于上級元素寬度width的百分比，隨著上級元素width的變化而變化，和高度height無關。右邊距margin-right下邊距margin-bottom左邊距

margin-left組合屬性邊距

margin取1~4個值?？蓞⒖糱order-style設置設置邊距的CSS屬性04設置邊距如果把網(wǎng)頁元素看成是一個個盒子，盒子與盒子之間的距離通過設置邊距進行控制。img{

margin-left:10px;

margin-right:10px;}img{ margin:0px10px;}增加或減少兩個元素之間的距離，調(diào)整邊距增加圖片之間距離04設置邊距網(wǎng)頁中有些元素自帶邊距樣式，常見的如body元素、p段落元素、h1~h6標題元素，我們通過瀏覽器的開發(fā)工具模式查看body元素的默認樣式。右側(cè)樣式視圖中看到有CSS代碼是在“useragentstylesheet”中，即當前瀏覽器解析body元素時的默認樣式。將默認樣式清零：*{padding:0;margin:0;}總結前端技術開發(fā)感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》項目7

非遺資訊頁面信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》頁面布局任務7.2

制作資訊推介區(qū)域前端技術開發(fā)任務引入一非遺資訊頁面的原型圖本任務制作資訊推介區(qū)域，圖文排版任務描述制作資訊推介區(qū)域1.資訊推介區(qū)域的布局呈現(xiàn)圖片在左，文字在右的排版風格。2.右側(cè)文本由標題和多個段落元素組成，顯示上下排版。3.設置網(wǎng)頁元素的背景樣式、文字樣式、填充和邊距等。任務實施二3124設置元素浮動，形成圖文左右排版文字樣式、背景樣式、邊距等創(chuàng)建圖片、標題、段落，并按照結構放置在各個層中調(diào)整浮動元素所在父元素的高度圖文排版其他樣式設置創(chuàng)建網(wǎng)頁元素消除浮動副作用任務實施二資訊推介區(qū)域HTML代碼<divid="news">

<h1>資訊推介</h1><divid="newscontent">

<imgsrc="../img/news_1.png">

<divid="newsright"> <h3>古琴藝術入選…</h3>

<p>11月28日，由中國藝術研究院音樂…

</p>

<p>本次會議的成功舉辦…</p>

</div> </div>

</div>1.插入圖片2.創(chuàng)建右側(cè)的文字元素，包裹為一個層元素3.將圖片和文字包裹為一個整體任務實施二資訊推介區(qū)域CSS代碼#news{

margin:0auto;

width:1300px;

margin-top:60px;}#newsright{

padding:40px50px;

width:600px;

height:320px;}#newsimg,#newsright{ float:left;}#newscontent::after{ content:''; display:block; clear:both;}1.設置圖片、右側(cè)層向左浮動，并控制右側(cè)層的大小2.消除設置了浮動后產(chǎn)生的副作用3.設置整體區(qū)域?qū)挾?，居中顯示任務實施二資訊推介區(qū)域CSS代碼#newsright{

background:url("../img/bg.jpg")no-repeat; background-size:cover;

color:#fff;

font:18px/1.5"微軟雅黑";}2.設置右側(cè)層的背景圖片1.文字樣式感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》元素浮動信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》前端技術開發(fā)知識儲備浮動設置1清除浮動201浮動設置前端技術開發(fā)01浮動設置浮動屬性語法：float:none|left|right值描述none默認值，不浮動，元素處在標準流中l(wèi)eft向左浮動right向右浮動在標準流中，一般情況下一個塊級元素在水平方向上會自動伸展，直至父元素的邊界，而在垂直方向上則會和兄弟元素依次上下排列，但不能并排。使用浮動后，塊級元素將改變自身行為。設置浮動之后，這些元素將脫離標準流，這樣會影響后續(xù)元素的顯示位置。說明：01浮動設置將塊級元素設置向左浮動從左到右排列，元素寬度變?yōu)閮?nèi)容大小塊級元素上下排列float：left;這些元素將脫離文檔流，仍在文檔流中的父元素和后續(xù)元素會認為這些“不存在”。01浮動設置將塊級元素設置向右浮動從右到左排列，元素寬度變?yōu)閮?nèi)容大小塊級元素上下排列float：right;這些元素將脫離文檔流，仍在文檔流中的父元素和后續(xù)元素會認為這些“不存在”。元素會向其父元素的右側(cè)靠緊，觀察設置了向左浮動和向右浮動元素的排列順序。01浮動設置浮動設置對相鄰元素的影響-塊級元素例如：后續(xù)元素是塊級元素段落p相鄰元素段落p浮動元素div前面的div元素設置向左浮動后，后續(xù)的段落元素會發(fā)生空間上的重疊，段落元素在div元素下方顯示，同時段落文字會在div元素右側(cè)呈現(xiàn)擠出效應。<div>…</div><p>…</p>01浮動設置浮動設置對相鄰元素的影響-行內(nèi)元素例如：后續(xù)元素是行內(nèi)元素span相鄰元素span浮動元素div在標準流中的相鄰span元素會緊跟在浮動元素div的右邊，當縮放窗口時，后側(cè)的空間放不下span元素后，行內(nèi)元素span會自動換行。<div>…</div><span>…</span><span>…</span>01浮動設置浮動設置對父元素的影響例如：父元素是div元素，包含3個div子元素。子元素設置浮動后，脫離標準流，但父元素仍在標準流里，可以這樣理解，父元素認為子元素“不存在”了，所以高度為0，只顯示上下邊框的高度。浮動子元素div外面父元素div設置浮動父元素div如何消除設置浮動后帶來的“副作用”？02清除浮動前端技術開發(fā)02清除浮動清除浮動屬性：clear:none|both|left|right值描述none默認值。允許浮動元素出現(xiàn)在兩側(cè)both在左右兩側(cè)均不允許浮動元素right在右側(cè)不允許浮動元素left在左側(cè)不允許浮動元素設置清除浮動clear屬性的元素并不是清除本身元素的浮動效果，而是該元素在指定側(cè)不與設置了浮動屬性的元素在同一行顯示。clear屬性的取值02清除浮動設置清除浮動將第2個div元素設置“clear：left”，表示第2個元素的左側(cè)不允許出現(xiàn)浮動元素。如果將CSS語句設置為“clear：both”，第3個div元素是否會換行顯示？總結感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》圖文排版信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》前端技術開發(fā)知識儲備文本溢出設置1圖文排版201文本溢出設置文本溢出設置前端技術開發(fā)01文本溢出設置-overflow屬性 overflow屬性用于控制內(nèi)容溢出元素框時顯示的方式。overflow:visible|hidden|scroll|auto overflow屬性取值表值描述visible默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。hidden內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。scroll內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。auto如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。overflow屬性需要結合white-space屬性才能起作用,并且所在元素為塊級元素。文本溢出設置前端技術開發(fā)01使用overflow屬性設置層元素中長文本的溢出設置<styletype="text/css">div{

width:200px;

border:#ccc1pxsolid;

overflow:hidden;

}</style><div>內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 </div>文本超出所在層自動換行文本溢出設置前端技術開發(fā)01white-space屬性

white-space屬性用于指定元素內(nèi)的空白怎樣處理。white-space:normal|pre|nowrap|pre-wrap|pre-line值描述normal默認?？瞻讜粸g覽器忽略。pre空白會被瀏覽器保留。其行為方式類似HTML中的<pre>標簽。nowrap文本不會換行，文本會在在同一行上繼續(xù)，直到遇到<br>標簽為止。pre-wrap保留空白符序列，但是正常地進行換行。pre-line合并空白符序列，但是保留換行符。

white-space屬性取值表文本溢出設置前端技術開發(fā)01使用overflow屬性設置層元素中長文本的溢出設置<styletype="text/css">div{

width:200px;

border:#ccc1pxsolid;

overflow:hidden; white-space:normal;}</style><div>內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 </div>文本超出所在層被裁切文本溢出設置前端技術開發(fā)01text-overflow屬性 text-overflow屬性用于當文本溢出包含元素時的處理方式。text-overflow

:clip|ellipsis|

string值描述clip修剪文本。ellipsis顯示省略符號來代表被修剪的文本。string使用給定的字符串來代表被修剪的文本。

white-space屬性取值表文本溢出設置前端技術開發(fā)01使用overflow屬性設置層元素中長文本的溢出設置<styletype="text/css">div{

width:200px;

border:#ccc1pxsolid;

overflow:hidden;white-space:nowrap;

text-overflow:ellipsis;

}</style><div>內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。 </div>文本超出所在層裁切后使用省略號表示02圖文排版圖文排版前端技術開發(fā)02頁面布局中，布局結構為上-下結構，下部分內(nèi)容又分為左-右結構網(wǎng)頁內(nèi)容上部分為標題，下部分為左邊圖片，右邊為段落。圖片和段落在標題下方形成左右排版。圖文排版前端技術開發(fā)02頁面布局中，布局結構為上-下結構，下部分內(nèi)容又分為左-右結構<div><div>

上部

</div><div>

<img>

<p>段落</p>

</div></div>多個段落時，可在外層增加div圖文排版前端技術開發(fā)02頁面布局中，布局結構為左-右結構，下部分內(nèi)容又分為上-下結構網(wǎng)頁內(nèi)容左邊部分為圖片，右邊部分為上-下結構，上邊為標題，下邊為段落。圖文排版前端技術開發(fā)02頁面布局中，布局結構為左-右結構，下部分內(nèi)容又分為上-下結構<div>

<img>

<div>

<div>

上部

</div> <div>

<p>段落</p>

</div>

</div></div>左側(cè)右上右下總結前端技術開發(fā)文本溢出設置圖文排版-上下結構圖片排版-左右結構感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》項目7

非遺資訊頁面信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》頁面布局任務7.3制作專題報道區(qū)域前端技術開發(fā)任務引入一非遺資訊頁面的原型圖一行上呈現(xiàn)多個報道，形成多欄排版任務描述制作資訊頁面專題報道區(qū)域1.專題報道區(qū)域按一行顯示3個專題項，每個專題項有圖片和文字組成。2.該區(qū)域的右上角“查看更多”的超鏈接，出現(xiàn)的位置特殊需要使用定位方式，與所在區(qū)域形成相對位置不變的關系。任務實施二3124將多個專題項包裹成一個層中。使用絕對定位方式設置“查看更多”超鏈接元素創(chuàng)建各個專題報道內(nèi)容，包括圖片、段落，層元素等設置每個專題報道的樣式和排版層嵌套元素定位創(chuàng)建元素CSS樣式與排版任務實施二<divclass="item">

<imgsrc="../img/report-1.jpg"> <p><ahref="#">【文化和自然遺產(chǎn)日】…</a>

</p></div>每個專題項HTML代碼#report.item{ width:400px; float:left; background:#ccc;

margin-right:50px;}每個專題項的CSS代碼itemitemitem1.設置層的寬度2.設置浮動，一行顯示三項3.設置層的右邊距及背景色任務實施二<divid="report"> <h1>專題報道</h1>

<ahref="#"id="more">>>查看更多</a></div>“查看更多”HTML代碼#report{ position:relative;}#more{ position:absolute; top:20px; right:50px;}“查看更多”CSS代碼1.“查看更多”使用絕對定位方式2.設置該超鏈接定位的基準點為其父元素“report”3.設置該元素的偏移量“查看更多”的位置特殊感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》元素定位信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》前端技術開發(fā)知識儲備絕對定位2相對定位3靜態(tài)定位1固定定位4Z-index屬性設置501靜態(tài)定位前端技術開發(fā)01元素定位元素定位position屬性值描述static默認值。靜態(tài)定位，元素在文檔標準流中。relative相對定位。元素相對于其正常位置進行定位。absolute絕對定位。元素相對于static定位以外的第一個父元素進行定位。元素的位置通過“l(fā)eft”“top”“right”以及“bottom”屬性進行規(guī)定。?xed固定定位。元素相對于瀏覽器窗口進行定位；元素的位置通過“l(fā)eft”“top”“right”

及“bottom”屬性進行規(guī)定。position屬性的取值說明position:static|relative|absolute|?xed;01靜態(tài)定位元素靜態(tài)定位語法：

position:static;說明：當position屬性取“static”值或是元素不設置position屬性時，網(wǎng)頁元素按照默認的顯示方式，即按照文檔標準流中的顯示方式來顯示。02絕對定位前端技術開發(fā)02絕對定位絕對定位的語法：position:

absolute;絕對定位規(guī)則

使用絕對定位的元素需要結合兩個方向上的偏移屬性進行位置的移動。

水平方向通過left或right屬性來指定，垂直方向通過top或bottom屬性來指定。left:50px或是right:100px都表示它在水平方向上偏移的位置。在實際應用中只要選擇一個使用即可。垂直方向類似。02絕對定位絕對定位規(guī)則使用絕對定位的元素偏移的參考位置，即基準的位置是離它最近的已經(jīng)定位的祖先元素。最近祖先元素已經(jīng)定位設置position屬性的元素，并且其值非static的任意一種方式。指“DOM”中，從自身節(jié)點開始往上直至根節(jié)點，所經(jīng)過的所有節(jié)點都是它的祖先節(jié)點，其中的直接上級節(jié)點也叫父節(jié)點。從自身節(jié)點開始往上搜索使用了“已經(jīng)定位”的元素，找到的第一個這樣的元素它的左上角就是絕對定位的基準點?；鶞庶c

設置為絕對定位之后，元素就會脫離文檔流。02絕對定位1.設置絕對定位的元素素會脫離文檔流。2.按照設置水平方向和垂直方向上的偏移量進行移動。3.元素的寬度從原來父元素寬度的100%變?yōu)樽赃m應內(nèi)容大小。將第2個div元素設置絕對定位#second{

position:absolute;

left:100px;

top:50px;}絕對定位實例：該元素偏移的基準點是哪里？基準點是body元素02絕對定位CSS代碼：HTML代碼：<body><divid="container">

<divclass="child">第1個層元素</div>

<divclass="child"id="second">第2個層元素</div>

<divclass="child">第3個層元素</div> </div></body>div{

border:1pxsolid#000;}#container{

position:absolute; width:800px;

margin:150px