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

模塊6企業(yè)官網(wǎng)首頁設(shè)計(jì)HTML5中推出了很多語義化標(biāo)簽，所謂語義化，就是標(biāo)簽?zāi)軌虮磉_(dá)出展示的內(nèi)容。語義化標(biāo)簽有更加豐富的含義，方便開發(fā)與維護(hù)，也方便搜索引擎識(shí)別頁面結(jié)構(gòu)，有利于SEO。本模塊將利用HTML5新增的語義化標(biāo)簽，將頁面劃分為不同的區(qū)域模塊，如頭部模塊、內(nèi)容模塊、底部模塊等，同時(shí)利用CSS3新增的漸變、陰影等屬性設(shè)置豐富的展示效果，完成企業(yè)官網(wǎng)首頁的結(jié)構(gòu)搭建，以及導(dǎo)航欄和底部欄的設(shè)計(jì)。

企業(yè)官網(wǎng)首頁結(jié)構(gòu)搭建任務(wù)11.1<header>標(biāo)簽<header>標(biāo)簽用于定義一個(gè)頁面或者一個(gè)區(qū)域的頭部。它可以包含一些標(biāo)題標(biāo)簽及其他標(biāo)簽，如網(wǎng)頁標(biāo)題、搜索框等。例如，一個(gè)典型的<header>標(biāo)簽區(qū)域如下圖所示。1.2<main>標(biāo)簽<main>標(biāo)簽用于規(guī)定文檔的主體內(nèi)容。<main>標(biāo)簽中的內(nèi)容對(duì)于文檔來說應(yīng)當(dāng)是唯一的，不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容。在一個(gè)文檔中，不能出現(xiàn)一個(gè)以上的<main>標(biāo)簽。<main>標(biāo)簽不能是<article>、<aside>、<footer>、<header>、<nav>標(biāo)簽的后代。1.2<main>標(biāo)簽<style>header.header{background:url(header_bg.jpg)no-repeat;background-size:cover;height:120px;min-width:120px;border:1pxsolid#efefef;padding-left:10px;}header.header>h1{font-weight:bold;color:yellow}</style>

<headerclass="header"><h1>犬科哺乳動(dòng)物</h1></header><main><p>

洋蔥和大蔥含有二硫化物，對(duì)人無害，卻會(huì)造成狗的紅細(xì)胞氧化，可能引發(fā)溶血性貧血和血尿。即使將其加熱，也不能破壞其中的有害物質(zhì)，所以不要給狗喂加了洋蔥和大蔥的食物。</p></main>1.3<footer>標(biāo)簽<footer>標(biāo)簽用于定義文檔或節(jié)的頁腳。<footer>標(biāo)簽應(yīng)當(dāng)含有其包含元素的信息，如文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等。用戶可以在一個(gè)文檔中使用多個(gè)<footer>標(biāo)簽。1.3<footer>標(biāo)簽<style>

body{margin:0;}

header,footer{

background-color:#45a1ff;

color:#fff;

height:60px;

position:fixed;

width:100%;

text-align:center;

line-height:60px;

font-size:24px;

}

main{

line-height:2;

padding-top:60px;

}

header{top:0;}

footer{bottom:0;}

</style>

<header>前端學(xué)習(xí)建議</header>

<main>

<ol>

<li>快速掌握HTML、CSS基礎(chǔ)知識(shí)</li>

<li>做大量的靜態(tài)頁面</li>

<li>深入學(xué)習(xí)JavaScript</li>

</ol>

</main>

<footer>?2022Tom</footer>1.4<address>標(biāo)簽<address>標(biāo)簽主要用于提供聯(lián)系信息，<address>標(biāo)簽通常連同其他信息被包含在<footer>標(biāo)簽中。1.4<address>標(biāo)簽<style>

body{margin:0;}

footer{

background:#2e2e2e;

width:100%;

height:50px;

position:fixed;

bottom:0;

}

a{color:white;text-decoration:none;font-size:14px;}

a:hover{color:yellow;}

address{

float:right;

margin-right:10%;

}

a[href^="mailto"]::before{content:""}

a[href^="tel"]::before{content:""}

</style>

<footer>

<address>

<ahref="mailto:jim@">jim@</a><br>

<ahref="tel:>(311)555-2368</a>

</address>

</footer>1.5<section>標(biāo)簽<section>標(biāo)簽用于定義文檔中的節(jié)、區(qū)段，比如章節(jié)、頁眉、頁腳或文檔中的其他部分，一般而言會(huì)包含一個(gè)標(biāo)題。<h1>挑選水果</h1><section><h2>介紹</h2><p>本文檔主要介紹如何挑選優(yōu)質(zhì)的水果</p></section><section><h2>挑選標(biāo)準(zhǔn)</h2><p>挑選水果時(shí)，有許多不同的標(biāo)準(zhǔn)需要考慮，例如大小、顏色、硬度、甜味、酸度……</p></section>1.6<article>標(biāo)簽<article>標(biāo)簽用于定義文檔內(nèi)的獨(dú)立文章或內(nèi)容，可以是一個(gè)論壇帖子，可以是一篇新聞報(bào)道，也可以是一條用戶評(píng)論。只要是一篇獨(dú)立的文檔內(nèi)容，都可以使用該標(biāo)簽。<article>標(biāo)簽也可以嵌套使用。1.6<article>標(biāo)簽<style>

.forecast{

margin:0;

padding:10px;

background-color:#eee;

}

.forecast>h1,

.day-forecast{

margin:15px;

padding:10px;

font-size:18px;

}

.day-forecast{

background:right/containcontent-boxborder-boxno-repeaturl('rain.png')white;

}

.day-forecast>h2,

.day-forecast>p{

margin:10px;

font-size:14px;

}</style><articleclass="forecast">

<h1>天氣預(yù)報(bào)</h1>

<articleclass="day-forecast">

<h2>5月1日</h2>

<p>天氣：雨</p>

</article>

<articleclass="day-forecast">

<h2>5月2日</h2>

<p>天氣：雨</p>

</article>

<articleclass="day-forecast">

<h2>5月3日</h2>

<p>天氣：雨</p>

</article></article>1.6<article>標(biāo)簽<style>

.noteheader{

border-bottom:2pxsolid#efefef;

}

.notesection{

border:

1pxsolid#efefef;

margin:10px0;

padding:10px;

background:#eee;

}

.notefooter{

text-align:right;

font-style:oblique;

}</style><articleclass="note">

<header>

<h2>阿林的HTML學(xué)習(xí)筆記</h2>

</header>

<section>

<p>超文本標(biāo)記語言（HyperTextMarkupLanguage，HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計(jì)網(wǎng)頁、網(wǎng)頁應(yīng)用程序及移動(dòng)應(yīng)用程序的用戶界面。</p>

</section>

<footer>

<p>

記錄于

<time>2022-5-1</time>

</p>

</footer></article><article>標(biāo)簽中也可以使用<header>、<footer>、<section>等標(biāo)簽，將一篇獨(dú)立的文檔內(nèi)容分成若干塊。1.7<nav>標(biāo)簽<style>

body{

margin:0;

}

header{

height:100px;

background:#eee;

color:white;

margin-bottom:20px;

}

nav{

line-height:100px;

padding-left:10px;

}

a{

text-decoration:none;

margin-right:15px;

color:#333;

}

a:hover{

color:tomato;

}</style><header>

<nav>

<ahref="#">首頁</a>

<ahref="#">散文</a>

<ahref="#">生活</a>

<ahref="#">留言板</a>

<ahref="#">關(guān)于</a>

</nav></header><nav>標(biāo)簽用于定義頁面上的導(dǎo)航鏈接部分，比如頂部導(dǎo)航、底部導(dǎo)航、側(cè)邊導(dǎo)航等。

<style>

aside{

width:40%;

padding-left:8px;

margin-left:8px;

float:right;

box-shadow:inset5px05px-5px#29627e;

font-style:italic;

color:#29627e;

}

aside>p{

margin:8px;

}

</style>

<p>貓科動(dòng)物：哺乳綱、食肉目、貓科動(dòng)物下的動(dòng)物。分為兩種亞科，即貓亞科和豹亞科。共有14屬38種。</p>

<aside>

<p>獅子、老虎等猛獸也屬于貓科動(dòng)物。</p>

</aside>

<p>貓科動(dòng)物多數(shù)善攀緣及跳躍。大多喜獨(dú)居。常以伏擊方式捕殺其他溫血?jiǎng)游铩?lt;/p>1.8<aside>標(biāo)簽<aside>標(biāo)簽通常用于定義側(cè)邊欄或標(biāo)注框。1.9<hgroup>標(biāo)簽<hgroup>標(biāo)簽用于對(duì)多個(gè)<h1>～<h6>標(biāo)簽進(jìn)行組合，一般用來展示標(biāo)題的多個(gè)層級(jí)或副標(biāo)題。<hgroup>

<h1>Web基礎(chǔ)開發(fā)</h1>

<h2>HTML5+CSS3項(xiàng)目實(shí)戰(zhàn)</h2></hgroup>1.10<figure>標(biāo)簽<figure>標(biāo)簽用于定義一段獨(dú)立的流內(nèi)容，<figure>標(biāo)簽的內(nèi)容應(yīng)該與主要內(nèi)容相關(guān)，但如果其被刪除，也不會(huì)對(duì)文檔流產(chǎn)生影響。該標(biāo)簽經(jīng)常與<figcaption>標(biāo)簽配合使用。<style>

figure{

border:thin#c0c0c0solid;

max-width:350px;

margin:auto;

}

figureimg{

width:100%;

display:block;

}

figcaption{

background-color:#222;

color:#fff;

padding:3px;

text-align:center;

}</style><p>

榕樹：大喬木，高達(dá)15～25米，胸徑達(dá)50厘米，冠幅廣展；老樹常有銹褐色氣根。樹皮呈深灰色。榕果成對(duì)腋生或生于已落葉枝葉腋，成熟時(shí)呈黃色或微紅色，扁球形。</p><figure>

<imgsrc="tree.png"alt="榕樹圖片">

<figcaption>榕樹</figcaption></figure>1.10<figure>標(biāo)簽<figcaption>標(biāo)簽表示與其關(guān)聯(lián)引用的說明或標(biāo)題，用于描述其父標(biāo)簽<figure>中的數(shù)據(jù)內(nèi)容。

企業(yè)官網(wǎng)首頁結(jié)構(gòu)搭建任務(wù)1任務(wù)效果根據(jù)下圖進(jìn)行企業(yè)官網(wǎng)首頁結(jié)構(gòu)搭建

企業(yè)官網(wǎng)首頁結(jié)構(gòu)搭建任務(wù)1步驟1：新建文件在css文件夾中新建layout.css文件，用于設(shè)計(jì)企業(yè)官網(wǎng)首頁的布局結(jié)構(gòu)，并在企業(yè)官網(wǎng)首頁中引入reset.css和layout.css文件。<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>巨巨網(wǎng)絡(luò)科技有限公司</title><linkrel="stylesheet"href="css/reset.css"><linkrel="stylesheet"href="css/layout.css"></head>步驟2：進(jìn)行布局結(jié)構(gòu)的書寫由上而下將首頁劃分為頂部欄、廣告欄、主體區(qū)域（產(chǎn)品欄、內(nèi)容欄）、底部欄幾個(gè)部分，并進(jìn)行布局結(jié)構(gòu)的書寫。<body>

<!--頂部欄-->

<header></header>

<!--廣告欄-->

<divclass="banner"></div>

<!--主體區(qū)域-->

<main>

<!--產(chǎn)品欄-->

<divclass="product"></div>

<!--內(nèi)容欄-->

<divclass="content">

<!--新聞列表-->

<div>

<article>

<header></header>

<section></section>

</article>

</div>

<!--招聘信息-->

<div>

<article>

<header></header>

<section></section>

</article>

</div>

</div>

</main>

<!--底部欄-->

<footer></footer></body>

企業(yè)官網(wǎng)首頁導(dǎo)航欄與底部欄設(shè)計(jì)任務(wù)22.1盒模型背景顏色漸變?cè)贑SS3之前的版本中，如果需要添加漸變效果，則通常需要設(shè)置背景圖像。而CSS3中增加了漸變屬性，可以輕松實(shí)現(xiàn)漸變效果。CSS3的漸變屬性主要包括線性漸變、徑向漸變和重復(fù)漸變。2.1.1線性漸變線性漸變，指的是起始顏色沿著一條直線按順序過渡到結(jié)束顏色。其基本語法格式如下：background-image:linear-gradient(漸變角度,顏色值1,顏色值2……,顏色值n);參數(shù)取值說明漸變角度指水平線和漸變線之間的夾角30deg以deg為單位的角度數(shù)值toleft從右到左，等同于-90degtoright從左到右，等同于90degtotop從下到上，等同于0degtobottom從上到下，等同于180deg顏色值用于設(shè)置漸變顏色，其中“顏色值1”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以有多個(gè)顏色，之間用“,”隔開。每個(gè)顏色值后面可以書寫一個(gè)百分比數(shù)值，用于表示顏色漸變的位置2.1.1線性漸變<style>div{width:200px;height:100px;background-image:linear-gradient(30deg,#f00,#00f);}</style><div></div>2.1.2徑向漸變徑向漸變，指的是起始顏色會(huì)從一個(gè)中心點(diǎn)開始，按照橢圓形或圓形形狀進(jìn)行擴(kuò)張，漸變到結(jié)束顏色。其基本語法格式如下：background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2…顏色值n);<style>div{width:200px;height:200px;border-radius:50%;background-image:radial-gradient(circleatcenter,#f00,#00f);}</style>

<div></div>2.1.3重復(fù)漸變重復(fù)漸變是指重復(fù)使用以上兩種漸變，包括重復(fù)線性漸變和重復(fù)徑向漸變，其基本語法格式如下，其中各個(gè)顏色值后面可以使用百分比定義位置。重復(fù)線性漸變：background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2……,顏色值n);重復(fù)徑向漸變：background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2…顏色值n);2.1.3重復(fù)漸變<style>div{float:left;margin-right:10px;}.div1{width:200px;height:200px;background-image:repeating-linear-gradient(tobottom,#0f010%,#f0015%);}.div2{width:200px;height:200px;border-radius:50%;background-image:repeating-radial-gradient(circleatcenter,#0f010%,#f0015%);}</style>

<divclass="div1"></div><divclass="div2"></div>2.2.1盒模型陰影使用CSS3中新增的陰影屬性可以輕松實(shí)現(xiàn)陰影的添加，基本語法格式如下：box-shadow:h-shadowv-shadowblurspreadcoloroutset;參數(shù)取值說明h-shadow必選項(xiàng)。水平陰影位置，允許為負(fù)值v-shadow必選項(xiàng)。垂直陰影位置，允許為負(fù)值blur陰影模糊半徑spread陰影擴(kuò)展半徑，不能為負(fù)值color陰影顏色outset/inset默認(rèn)為外陰影/內(nèi)陰影2.2.1盒模型陰影每個(gè)盒模型可以同時(shí)添加多種陰影效果，中間使用“,”隔開，示例代碼如下：<style>div{padding:20px;box-shadow:inset0-48px48pxrgba(0,0,0,0.1),0002pxwhite,5px5px10pxrgba(0,0,0,0.3);}</style><div>當(dāng)我們遇到逆風(fēng)行舟的時(shí)候，調(diào)整航向迂回行駛就可以了；但是，當(dāng)海面上波濤洶涌，而我們想停在原地的時(shí)候，那就要拋錨。當(dāng)心啊，年輕的舵手，別讓你的纜繩松了，別讓你的船錨動(dòng)搖，不要在你沒有發(fā)覺以前，就讓船漂走了?！R梭</div>2.2.2盒模型濾鏡CSS3的filter屬性用于定義元素（通常是img圖片）的可視效果（如模糊與飽和度）。其基本語法格式如下：filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();2.2.2盒模型濾鏡參數(shù)取值說明none默認(rèn)值，沒有效果blur(px)模糊度，數(shù)值越大越模糊brightness(%)給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。若該值是0，則圖像會(huì)全黑；若該值是100%，則圖像無變化。其他值則表示效果的線性乘子。則值可以超過100%，圖像會(huì)比原來更亮。如果沒有設(shè)定該值，則該值默認(rèn)是100%contrast(%)調(diào)整圖像的對(duì)比度。若該值值是0%，則圖像會(huì)全黑。若該值值是100%，則圖像不變。該值可以超過100%，意味著會(huì)使用更低的對(duì)比度。若沒有設(shè)置該值，則該值默認(rèn)是100%drop-shadow(h-shadowv-shadowblurspreadcolor)給圖像設(shè)置一個(gè)陰影效果。陰影是合成在圖像下面的，可以有模糊度grayscale(%)將圖像轉(zhuǎn)換為灰度圖像。該值定義了轉(zhuǎn)換的比例。若該值為100%，則完全轉(zhuǎn)換為灰度圖像；若該值為0，則圖像無變化。若該值為0～100%，則表示效果的線性乘子。若未設(shè)置該值，則該值默認(rèn)是0hue-rotate(deg)給圖像應(yīng)用色相旋轉(zhuǎn)。若該值為0deg，則圖像無變化。若未設(shè)置該值，則該值默認(rèn)是0deg。該值雖然沒有最大值，但超過360deg的值相當(dāng)于又繞了一圈invert(%)反轉(zhuǎn)輸入圖像。該值定義了轉(zhuǎn)換的比例。若該值為100%，則表示圖像完全反轉(zhuǎn)；若該值為0，則圖像無變化。若該值為0%～100%，則表示效果的線性乘子。若未設(shè)置該值，則該值默認(rèn)是02.2.2盒模型濾鏡參數(shù)取值說明opacity(%)轉(zhuǎn)換圖像的透明程度。該值定義了轉(zhuǎn)換的比例。若該值為0，則圖像是完全透明的；若該值為100%，則圖像無變化。若該值為0%～100%，則表示效果的線性乘子，也相當(dāng)于圖像樣本乘以數(shù)量。若未設(shè)置該值，則該值默認(rèn)是1saturate(%)轉(zhuǎn)換圖像飽和度。該值定義了轉(zhuǎn)換的比例。若該值為0，則圖像完全不飽和；若該值為100%，則圖像無變化。其他值則是效果的線性乘子。該值可以超過100%，圖像會(huì)有更高的飽和度。若未設(shè)置該值，則該值默認(rèn)是1sepia(%)將圖像轉(zhuǎn)換為深褐色。該值定義了轉(zhuǎn)換的比例。若該值為100%，則圖像完全是深褐色的；若該值為0，則圖像無變化。若該值為0～100%，則表示效果的線性乘子。若未設(shè)置該值，則該值默認(rèn)是0url()url()函數(shù)接收一個(gè)XML文件，該文件設(shè)置了一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)，用來指定一個(gè)具體的濾鏡元素<style>img{filter:blur(30px);}</style>

<imgsrc="candy.jpeg"alt="candy">2.2.2盒模型濾鏡<style>.box{position:relative;width:350px;height:262px;border-radius:8px;padding:15px;box-sizing:border-box;overflow:hidden;}.text{position:absolute;z-index:999;color:white;line-height:2;}.candy_bg{position:absolute;z-index:990;/*適當(dāng)放大圖片容器，讓邊緣的虛化效果出現(xiàn)在父容器的外側(cè)，同時(shí)對(duì)超出父容器的部分進(jìn)行隱藏*/width:110%;left:50%;top:50%;transform:translate(-50%,-50%);filter:blur(24px)brightness(0.8);}.candy_bgimg{width:100%;}</style>

<divclass="box"><pclass="text">糖果可分為硬質(zhì)糖果、硬質(zhì)夾心糖果、乳脂糖果、凝膠糖果、拋光糖果、膠基糖果、充氣糖果和壓片糖果等。其中硬質(zhì)糖果是以白砂糖、淀粉糖漿為主料的一類口感硬、脆的糖果；硬質(zhì)夾心糖果是糖果中含有餡心的硬質(zhì)糖果。</p><divclass="candy_bg"><imgsrc="candy.jpeg"alt="candy"></div></div>2.2.3混合模式mix-blend-mode屬性的作用是讓元素內(nèi)容和這個(gè)元素的背景發(fā)生“混合”，產(chǎn)生各種效果，其基本語法格式如下：mix-blend-mode:normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity;2.2.2盒模型濾鏡<style>img{filter:blur(30px);}</style>

<imgsrc="candy.jpeg"alt="candy">參數(shù)取值說明opacity(%)轉(zhuǎn)換圖像的透明程度。該值定義了轉(zhuǎn)換的比例。若該值為0，則圖像是完全透明的；若該值為100%，則圖像無變化。若該值為0%～100%，則表示效果的線性乘子，也相當(dāng)于圖像樣本乘以數(shù)量。若未設(shè)置該值，則該值默認(rèn)是1saturate(%)轉(zhuǎn)換圖像飽和度。該值定義了轉(zhuǎn)換的比例。若該值為0，則圖像完全不飽和；若該值為100%，則圖像無變化。其他值則是效果的線性乘子。該值可以超過100%，圖像會(huì)有更高的飽和度。若未設(shè)置該值，則該值默認(rèn)是1sepia(%)將圖像轉(zhuǎn)換為深褐色。該值定義了轉(zhuǎn)換的比例。若該值為100%，則圖像完全是深褐色的；若該值為0，則圖像無變化。若該值為0～100%，則表示效果的線性乘子。若未設(shè)置該值，則該值默認(rèn)是0url()url()函數(shù)接收一個(gè)XML文件，該文件設(shè)置了一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)，用來指定一個(gè)具體的濾鏡元素2.2.2盒模型濾鏡<style>

.box{

position:relative;

width:478px;

}

h2{

position:absolute;

left:50%;

top:20%;

transform:translateX(-50%)rotate(-30deg);

font-size:36px;

color:blue;

mix-blend-mode:soft-light;

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

<h2>中國(guó)聯(lián)合航空</h2>

<imgsrc="plane.png"alt="plane"></div>參數(shù)說明參數(shù)說明normal正常hard-light強(qiáng)光multiply正片疊底soft-light柔光screen濾色difference差值overlay疊加exclusion排除darken變暗hue色相l(xiāng)ighten變亮saturation飽和度color-dodge顏色減淡color顏色color-burn顏色加深luminosity亮度

企業(yè)官網(wǎng)首頁導(dǎo)航欄與底部欄設(shè)計(jì)任務(wù)2步驟1：進(jìn)行相應(yīng)的布局設(shè)計(jì)打開index.html文件，在頂部欄的<header>區(qū)域中插入導(dǎo)航欄。將導(dǎo)航欄分為L(zhǎng)ogo區(qū)域、頁面導(dǎo)航區(qū)域和語言切換區(qū)域，并進(jìn)行相應(yīng)的布局設(shè)計(jì)。<headerid="top"class="header_bar">

<divclass="navbar">

<!--Logo區(qū)域-->

<aclass="logo"href="index.html"></a>

<!--頁面導(dǎo)航區(qū)域-->

<nav></nav>

<!--語言切換區(qū)域-->

<divclass="changeLang"></div>

</div></header>步驟2：插入Logo圖片在Logo區(qū)域使用<img>標(biāo)簽插入Logo圖片，在頁面導(dǎo)航區(qū)域、語言切換區(qū)域使用<a>標(biāo)簽布局導(dǎo)航條目及語言切換按鈕。<header

id="top"class="header_bar">

<divclass="navbar">

<!--Logo區(qū)域-->

<aclass="Logo"href="index.html">

<imgsrc="img/logo.png"alt="企業(yè)LOGO">

</a>

<!--頁面導(dǎo)航區(qū)域-->

<nav>

<aclass="selected"href="index.html">網(wǎng)站首頁</a>

<ahref="html/newsList.html"target="_blank">新聞中心</a>

<ahref="html/product.html"target="_blank">產(chǎn)品中心</a>

<ahref="html/joinUs.html"target="_blank">加入我們</a>

<ahref="#">關(guān)于我們</a>

<aclass="contact_us"href="#">聯(lián)系我們</a>

</nav>

<!--語言切換區(qū)域-->

<divclass="changeLang">

<aclass="active"href="#">中文</a>

<ahref="#">EN</a>

</div>

</div>

</header>步驟3：進(jìn)行漸變?cè)O(shè)置在layout.css文件中設(shè)置頂部欄和導(dǎo)航欄的背景顏色,使用linear-gradient屬性進(jìn)行漸變?cè)O(shè)置。/*頂部欄樣式*/.header_bar{

width:100%;

background:linear-gradient(#1e2349,#191d3a);}/*導(dǎo)航欄樣式*/.navbar{

width:1000px;

height:60px;

margin:auto;

background:linear-gradient(#1e2349,#191d3a);}

.navbara{color:#818496;}步驟4：進(jìn)行漸變?cè)O(shè)置設(shè)置Logo區(qū)域的大小及浮動(dòng)/*Logo區(qū)域*//*Logo區(qū)域*/.logo{

float:left;

width:108px;

height:20px;

margin-top:20px;}.logo>img{

width:100%;}/*頁面導(dǎo)航區(qū)域*/.navbarnav{

float:left;

margin-left:80px;}.navbarnava{

width:100px;

height:100%;

float:left;

text-align:center;

line-height:60px;

border-left:1pxsolid#252947;}.navbarnava:hover,.navbarnava.selected{

background:#252947;

color:#e2e4ed;}.navbarnava:nth-last-child(2){

border-right:1pxsolid#252947;}.navbara.contact_us{

height:32px;

width:98px;

margin:12px0026px;

line-height:32px;

border:1pxsolid#46e68e;

border-radius:4px;

background:#38b774;

color:#fff;}.navbara.contact_us:hover{

background:#2ba364;}步驟5：進(jìn)行漸變?cè)O(shè)置設(shè)置頁面導(dǎo)航區(qū)域樣式及浮動(dòng)步驟6：設(shè)置語言切換區(qū)域樣式設(shè)置語言切換區(qū)域樣式，完成頂部欄布局及樣式設(shè)計(jì)。/*語言切換區(qū)域樣式*/.changeLang{

float:right;

line-height:58px;}.changeLang.active{

color:#38b774;}.changeLanga:last-child{

margin-left:10px;}main{

width:1000px;

margin:auto;}步驟7：設(shè)置網(wǎng)站主體區(qū)域的大小和居中<!--底部欄--><footerclass="mt">

<!--返回頂部按鈕-->

<ahref="#top"class="go_top">

</a>

<!--企業(yè)名稱-->

<p>?2022巨巨網(wǎng)路科技有限公司<