HTML5+CSS3+JavaScript網(wǎng)頁(yè)開發(fā)實(shí)戰(zhàn) 課件 模塊7 企業(yè)官網(wǎng)首頁(yè)廣告欄設(shè)計(jì)

模塊7企業(yè)官網(wǎng)首頁(yè)廣告欄設(shè)計(jì)在默認(rèn)情況下，網(wǎng)頁(yè)元素是按照標(biāo)準(zhǔn)文檔流的順序進(jìn)行布局的，布局方式過(guò)于單一。通過(guò)前面模塊的學(xué)習(xí)，讀者應(yīng)當(dāng)知道在網(wǎng)頁(yè)中可以使用浮動(dòng)將網(wǎng)頁(yè)元素抽離文檔流，改變網(wǎng)頁(yè)元素的默認(rèn)布局方式。浮動(dòng)的使用雖然比較簡(jiǎn)單，但是只能進(jìn)行左對(duì)齊、右對(duì)齊等粗略形式的排版。如果需要進(jìn)行網(wǎng)頁(yè)元素的精確定位，就需要設(shè)置定位屬性。本模塊將講解定位屬性的相關(guān)知識(shí)，完成企業(yè)官網(wǎng)首頁(yè)廣告欄的布局設(shè)計(jì)。企業(yè)官網(wǎng)首頁(yè)廣告欄布局與切換效果設(shè)計(jì)任務(wù)11.1定位在前面模塊的學(xué)習(xí)中，讀者應(yīng)當(dāng)已經(jīng)知道網(wǎng)頁(yè)中的塊元素默認(rèn)按照從上到下、從左到右的標(biāo)準(zhǔn)文檔流順序進(jìn)行排列，可被稱為靜態(tài)定位。在靜態(tài)定位狀態(tài)下排版出來(lái)的元素通常布局方式較為單一，無(wú)法實(shí)現(xiàn)豐富的效果，因此我們可以借助定位將元素抽離文檔流，進(jìn)行更為復(fù)雜的排版布局。定位共有5種類型，分別為靜態(tài)定位（static）、固定定位（fixed）、相對(duì)定位（relative）、絕對(duì)定位（absolute）和黏性定位（sticky）。1.1.1靜態(tài)定位靜態(tài)定位是HTML元素的默認(rèn)值，即沒(méi)有定位，遵循正常的文檔流布局。靜態(tài)定位的元素不會(huì)受到top、bottom、left、right、index屬性的影響。1.1.2固定定位固定定位是指元素相對(duì)于網(wǎng)頁(yè)的可視區(qū)域進(jìn)行定位。使用固定定位時(shí)需要注意以下幾點(diǎn)。固定定位的元素被移出正常文檔流，不再占用正常文檔流的布局空間。固定定位元素的定位對(duì)象是網(wǎng)頁(yè)的可視區(qū)域。固定定位的元素使用top、right、bottom、left屬性，針對(duì)定位對(duì)象進(jìn)行偏移量控制。下面以一個(gè)常見的瀏覽器對(duì)聯(lián)廣告案例來(lái)說(shuō)明固定定位的使用。1.1.2固定定位<style>

body{margin:0;}

.container{

width:100%;

height:3000px;

background:linear-gradient(pink,yellow);

}

.containerh1{

margin:0;

text-align:center;

}

.left_ad,

.right_ad{

position:fixed;

/*將對(duì)聯(lián)廣告豎直于瀏覽器窗口居中對(duì)齊*/

top:50%;

transform:translateY(-50%);

}

.left_ad{left:0;}

.right_ad{right:0;}</style><imgclass="left_ad"src="left_ad.png"alt="左側(cè)廣告"><imgclass="right_ad"src="right_ad.png"alt="右側(cè)廣告"><divclass="container">

<h1>內(nèi)容區(qū)域</h1></div>1.1.3相對(duì)定位相對(duì)定位是指相對(duì)于元素在標(biāo)準(zhǔn)文檔流中的位置進(jìn)行定位。使用相對(duì)定位時(shí)需要注意以下幾點(diǎn)。相對(duì)定位的元素被移出正常文檔流，但是它在正常文檔流中的位置仍然被保留。相對(duì)定位元素的定位對(duì)象是其在正常文檔流中保留的位置。相對(duì)定位的元素使用top、right、bottom、left屬性，針對(duì)定位對(duì)象進(jìn)行偏移量控制。1.1.3<footer>標(biāo)簽<style>

.search_btn{

position:relative;

left:68px;

}</style><inputtype="search"placeholder="請(qǐng)輸入關(guān)鍵字"><buttonclass="search_btn">搜索</button><buttonclass="reset_btn">重置</button>1.1.3<footer>標(biāo)簽<style>

.btn{

width:178px;

height:39px;

border:none;

outline:none;

background:url(btn.png)no-repeat;

color:white;

}

.btnimg{

/*添加相對(duì)定位，進(jìn)行位置微調(diào)*/

position:relative;

right:2px;

top:4px;

}</style><buttonclass="btn">

<imgsrc="position.png"alt="定位">

<span>相對(duì)定位</span></button>1.1.4絕對(duì)定位絕對(duì)定位是指相對(duì)于其最近的已經(jīng)定位的（絕對(duì)定位、固定定位或相對(duì)定位）父元素進(jìn)行定位。如果所有父元素均未定位，則相對(duì)于body（瀏覽器窗口）進(jìn)行定位。使用絕對(duì)定位時(shí)需要注意以下幾點(diǎn)。絕對(duì)定位的元素被移出正常文檔流，不再占用正常文檔流的布局空間。絕對(duì)定位元素的定位對(duì)象為最近的已經(jīng)定位的父元素，如果父元素均未定位，則定位對(duì)象為瀏覽器窗口。絕對(duì)定位的元素使用top、right、bottom、left屬性，針對(duì)定位對(duì)象進(jìn)行偏移量控制。絕對(duì)定位在網(wǎng)頁(yè)布局中經(jīng)常用于制作“蓋印”效果（即絕對(duì)定位元素壓蓋在父元素中其他元素的上方，形成一個(gè)類似“蓋印”的效果），使用時(shí)須牢記口訣“子絕父相”（子元素采用絕對(duì)定位，父元素采用相對(duì)定位）。1.1.4<address>標(biāo)簽<style>

.coupon{

width:452px;

height:194px;

position:relative;

margin:30pxauto0auto;

}

.discount{

width:77px;

height:93px;

background:url(discount.png);

/*將優(yōu)惠圖標(biāo)根據(jù)父元素進(jìn)行絕對(duì)定位，定位于父元素的右上角*/

position:absolute;

right:-20px;

top:-30px;

}</style><sectionclass="coupon">

<divclass="discount"></div>

<imgclass="coupon_img"src="coupon.png"alt="優(yōu)惠券"></section>1.1.5黏性定位黏性定位可以被認(rèn)為是相對(duì)定位和固定定位的混合。<style>

*{

margin:0;

padding:0;

}

.box{

height:200px;

overflow-y:scroll;

}

ul{

list-style:none;

}

.top{

position:sticky;

top:0;

background:rgb(175,175,175);

color:white;

font-weight:bold;

font-size:18px;

padding:5px0;

}</style><divclass="box">

<ul>

<li>普通新聞</li>

<!--補(bǔ)充多個(gè)li標(biāo)簽

-->

<liclass="top">置頂新聞</li>

<li>普通新聞</li>

<!--補(bǔ)充多個(gè)li標(biāo)簽

-->

</ul></div>1.1.6z-index屬性z-index屬性用于設(shè)置元素的堆疊順序。擁有較高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素前面。z-index屬性僅能在定位元素上奏效，允許為負(fù)值。<style>.box{position:relative;}.a,.b{width:100px;height:100px;border-radius:50%;position:absolute;}.a{background:red;left:0;z-index:999;}.b{background:blue;left:50px;}</style>

<divclass="box"><divclass="a"></div><divclass="b"></div></div>企業(yè)官網(wǎng)首頁(yè)廣告欄布局與切換效果設(shè)計(jì)任務(wù)1任務(wù)效果根據(jù)下圖完成企業(yè)官網(wǎng)首頁(yè)廣告欄的布局設(shè)計(jì)企業(yè)官網(wǎng)首頁(yè)廣告欄布局與切換效果設(shè)計(jì)任務(wù)1步驟1：新建文件在css文件夾下新建樣式表文件index.css，并在企業(yè)官網(wǎng)首頁(yè)中引入該文件。步驟2：進(jìn)行布局結(jié)構(gòu)的書寫在index.html文件中的banner容器下布局一個(gè)無(wú)序列表，用于設(shè)計(jì)廣告欄。廣告欄的布局結(jié)構(gòu)如圖所示。<!--廣告欄--><divclass="banner">

<!--廣告圖列表-->

<ulclass="swiper_wrapper">

<!--廣告圖一-->

<liclass="swiper_slide">

<ahref="#">

<imgclass="slide_img"src="img/banner1.png">

</a>

</li>

<!--廣告圖二-->

<liclass="swiper_slide">

<ahref="#">

<imgclass="slide_img"src="img/banner2.png">

</a>

</li>

<!--廣告圖三-->

<liclass="swiper_slide">

<ahref="#">

<imgclass="slide_img"src="img/banner3.png">

</a>

</li>

</ul></div>步驟3：設(shè)計(jì)廣告欄的布局樣式在index.css文件中設(shè)計(jì)廣告欄的布局樣式。/*廣告欄*/.banner{

width:100%;

min-width:1000px;

margin:auto;

overflow:hidden;}.swiper_wrapper{

width:300%;}.swiper_slide{

width:33.33%;

float:left;}.slide_img{

width:100%;

/*將img元素設(shè)置為display:block，用以去除display:inline-block元素的間隙*/

display:block;}步驟4：清除浮動(dòng)因?yàn)樵趕wiper_slide子容器中設(shè)置了浮動(dòng)，所以需要在swiper_wrapper父容器中清除浮動(dòng)。<ulclass="swiper_wrapperfx">......</ul>index.html文件：<liclass="swiper_slide">

<sectionclass="intro">

<!--圖片標(biāo)題-->

<h1>

<imgsrc="img/banner1_title.png">

</h1>

</section>

<!--廣告圖-->

<ahref="#">

<imgclass="slide_img"src="img/banner1.png">

</a></li>步驟5：對(duì)圖片標(biāo)題進(jìn)行布局在第一張廣告圖列表中放置section容器，用于設(shè)計(jì)圖片標(biāo)題。使用絕對(duì)定位方式對(duì)圖片標(biāo)題進(jìn)行布局，效果如圖所示。index.css文件：.swiper_slide{

width:33.33%;

float:left;

position:relative;}.intro{

position:absolute;

left:46%;

top:18%;}<sectionclass="introfx"><!--清除浮動(dòng)-->

<!--圖片標(biāo)題-->

<h1>

<imgsrc="img/banner1_title.png">

</h1>

<!--下載圖標(biāo)-->

<dlclass="download">

<dt>

點(diǎn)燃新時(shí)期ICT的燈，照亮自主成才的路！

</dt>

<ddclass="fx">

<ahref="#"class="download_linkiphone_icon"title="iPhone">

iphone

</a>

<ahref="#"class="download_linkandroid_icon"title="Android">

android

</a>

<ahref="#"class="download_linkimac_icon"title="iMac">

imac

</a>

<ahref="#"class="download_linkwindows_icon"title="Windows">

windows

</a>

</dd>

</dl></section>步驟6：布局下載圖標(biāo)在section容器中使用自定義列表布局下載圖標(biāo)。/*下載圖標(biāo)*/.downloaddt{

color:white;

line-height:48px;}a.download_link{

display:block;

float:left;

width:84px;

height:106px;

text-align:center;

background:url(../img/icon.png)no-repeat;

background-color:rgba(255,255,255,.85);

padding-top:70px;}a.download_link:hover{

background-color:#fff;}a.iphone_icon{

border-radius:5px005px;

background-position:26px22px}a.android_icon{

background-position:26px-76px}a.imac_icon{

background-position:26px-273px}a.windows_icon{

border-radius:05px5px0px;

background-position:26px-378px}步驟7：設(shè)計(jì)下載圖標(biāo)樣式使用精靈圖設(shè)計(jì)下載圖標(biāo)樣式，效果如圖所示。<sectionclass="intro">

<!--圖片標(biāo)題-->

<h1>

</h1>

<!--下載圖標(biāo)-->

<dlclass="download">

</dl>

<!--“聯(lián)系我們”圖標(biāo)-->

<dlclass="online">

<dt>聯(lián)系我們</dt>

<dd>

<ahref="#"title="qzone"class="contact_iconqzone"></a>

<ahref="#"title="kaixin"class="contact_iconkaixin"></a>

<ahref="#"title="sina"class="contact_iconsina"></a>

</dd>

</dl></section>步驟8：布局“聯(lián)系我們”圖標(biāo)/*聯(lián)系我們圖標(biāo)*/.online{

width:115px;

cursor:pointer;

margin-left:30px;

position:absolute;

top:-2px;

left:345px;}.onlinedt{

height:37px;

padding-left:17px;

line-height:37px;

background:url(../img/online.png)no-repeat;}.onlinedd{

display:none;

padding:2px08px13px;

background-color:#fff;

border-radius:0015px15px;}.online:hoverdt{

background-position:-120px0;}.online:hoverdd{

display:block;}a.contact_icon{

display:inline-block;

width:24px;

height:24px;

background:url(../img/online.png)no-repeat;

margin-right:4px;}a.qzone{

background-position:

-25px-47px;}a.kaixin{

background-position:

-50px-47px;}a.sina{

background-position:

-100px-47px;}步驟9：定義底部欄的樣式。<divclass="banner">

<!--input標(biāo)簽列表-->

<inputtype="radio"name="banner"id="b1"checked>

<inputtype="radio"name="banner"id="b2">

<inputtype="radio"name="banner"id="b3">

<!--焦點(diǎn)-->

<divclass="swiper_pagination">

<labelfor="b1"></label>

<labelfor="b2"></label>

<labelfor="b3"></label>

</div>

</div>步驟10：通過(guò)<label>標(biāo)簽綁定單選按鈕/*焦點(diǎn)列表樣式*/.banner{

position:relative;}input[name=banner]{

display:none;}.swiper_pagination{

position:absolute;

z-index:999;

bottom:10px;

left:50%;

transform:transl