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

模塊6企業(yè)官網首頁設計HTML5中推出了很多語義化標簽，所謂語義化，就是標簽能夠表達出展示的內容。語義化標簽有更加豐富的含義，方便開發(fā)與維護，也方便搜索引擎識別頁面結構，有利于SEO。本模塊將利用HTML5新增的語義化標簽，將頁面劃分為不同的區(qū)域模塊，如頭部模塊、內容模塊、底部模塊等，同時利用CSS3新增的漸變、陰影等屬性設置豐富的展示效果，完成企業(yè)官網首頁的結構搭建，以及導航欄和底部欄的設計。

企業(yè)官網首頁結構搭建任務11.1<header>標簽<header>標簽用于定義一個頁面或者一個區(qū)域的頭部。它可以包含一些標題標簽及其他標簽，如網頁標題、搜索框等。例如，一個典型的<header>標簽區(qū)域如下圖所示。1.2<main>標簽<main>標簽用于規(guī)定文檔的主體內容。<main>標簽中的內容對于文檔來說應當是唯一的，不應包含在文檔中重復出現(xiàn)的內容。在一個文檔中，不能出現(xiàn)一個以上的<main>標簽。<main>標簽不能是<article>、<aside>、<footer>、<header>、<nav>標簽的后代。1.2<main>標簽<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>犬科哺乳動物</h1></header><main><p>

洋蔥和大蔥含有二硫化物，對人無害，卻會造成狗的紅細胞氧化，可能引發(fā)溶血性貧血和血尿。即使將其加熱，也不能破壞其中的有害物質，所以不要給狗喂加了洋蔥和大蔥的食物。</p></main>1.3<footer>標簽<footer>標簽用于定義文檔或節(jié)的頁腳。<footer>標簽應當含有其包含元素的信息，如文檔的作者、版權信息、使用條款鏈接、聯(lián)系信息等。用戶可以在一個文檔中使用多個<footer>標簽。1.3<footer>標簽<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>前端學習建議</header>

<main>

<ol>

<li>快速掌握HTML、CSS基礎知識</li>

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

<li>深入學習JavaScript</li>

</ol>

</main>

<footer>?2022Tom</footer>1.4<address>標簽<address>標簽主要用于提供聯(lián)系信息，<address>標簽通常連同其他信息被包含在<footer>標簽中。1.4<address>標簽<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>標簽<section>標簽用于定義文檔中的節(jié)、區(qū)段，比如章節(jié)、頁眉、頁腳或文檔中的其他部分，一般而言會包含一個標題。<h1>挑選水果</h1><section><h2>介紹</h2><p>本文檔主要介紹如何挑選優(yōu)質的水果</p></section><section><h2>挑選標準</h2><p>挑選水果時，有許多不同的標準需要考慮，例如大小、顏色、硬度、甜味、酸度……</p></section>1.6<article>標簽<article>標簽用于定義文檔內的獨立文章或內容，可以是一個論壇帖子，可以是一篇新聞報道，也可以是一條用戶評論。只要是一篇獨立的文檔內容，都可以使用該標簽。<article>標簽也可以嵌套使用。1.6<article>標簽<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>天氣預報</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>標簽<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學習筆記</h2>

</header>

<section>

<p>超文本標記語言（HyperTextMarkupLanguage，HTML）是一種用于創(chuàng)建網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用于設計網頁、網頁應用程序及移動應用程序的用戶界面。</p>

</section>

<footer>

<p>

記錄于

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

</p>

</footer></article><article>標簽中也可以使用<header>、<footer>、<section>等標簽，將一篇獨立的文檔內容分成若干塊。1.7<nav>標簽<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="#">關于</a>

</nav></header><nav>標簽用于定義頁面上的導航鏈接部分，比如頂部導航、底部導航、側邊導航等。

<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>貓科動物：哺乳綱、食肉目、貓科動物下的動物。分為兩種亞科，即貓亞科和豹亞科。共有14屬38種。</p>

<aside>

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

</aside>

<p>貓科動物多數(shù)善攀緣及跳躍。大多喜獨居。常以伏擊方式捕殺其他溫血動物。</p>1.8<aside>標簽<aside>標簽通常用于定義側邊欄或標注框。1.9<hgroup>標簽<hgroup>標簽用于對多個<h1>～<h6>標簽進行組合，一般用來展示標題的多個層級或副標題。<hgroup>

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

<h2>HTML5+CSS3項目實戰(zhàn)</h2></hgroup>1.10<figure>標簽<figure>標簽用于定義一段獨立的流內容，<figure>標簽的內容應該與主要內容相關，但如果其被刪除，也不會對文檔流產生影響。該標簽經常與<figcaption>標簽配合使用。<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>

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

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

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

企業(yè)官網首頁結構搭建任務1任務效果根據(jù)下圖進行企業(yè)官網首頁結構搭建

企業(yè)官網首頁結構搭建任務1步驟1：新建文件在css文件夾中新建layout.css文件，用于設計企業(yè)官網首頁的布局結構，并在企業(yè)官網首頁中引入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>巨巨網絡科技有限公司</title><linkrel="stylesheet"href="css/reset.css"><linkrel="stylesheet"href="css/layout.css"></head>步驟2：進行布局結構的書寫由上而下將首頁劃分為頂部欄、廣告欄、主體區(qū)域（產品欄、內容欄）、底部欄幾個部分，并進行布局結構的書寫。<body>

<!--頂部欄-->

<header></header>

<!--廣告欄-->

<divclass="banner"></div>

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

<main>

<!--產品欄-->

<divclass="product"></div>

<!--內容欄-->

<divclass="content">

<!--新聞列表-->

<div>

<article>

<header></header>

<section></section>

</article>

</div>

<!--招聘信息-->

<div>

<article>

<header></header>

<section></section>

</article>

</div>

</div>

</main>

<!--底部欄-->

<footer></footer></body>

企業(yè)官網首頁導航欄與底部欄設計任務22.1盒模型背景顏色漸變在CSS3之前的版本中，如果需要添加漸變效果，則通常需要設置背景圖像。而CSS3中增加了漸變屬性，可以輕松實現(xiàn)漸變效果。CSS3的漸變屬性主要包括線性漸變、徑向漸變和重復漸變。2.1.1線性漸變線性漸變，指的是起始顏色沿著一條直線按順序過渡到結束顏色。其基本語法格式如下：background-image:linear-gradient(漸變角度,顏色值1,顏色值2……,顏色值n);參數(shù)取值說明漸變角度指水平線和漸變線之間的夾角30deg以deg為單位的角度數(shù)值toleft從右到左，等同于-90degtoright從左到右，等同于90degtotop從下到上，等同于0degtobottom從上到下，等同于180deg顏色值用于設置漸變顏色，其中“顏色值1”表示起始顏色，“顏色值n”表示結束顏色，起始顏色和結束顏色之間可以有多個顏色，之間用“,”隔開。每個顏色值后面可以書寫一個百分比數(shù)值，用于表示顏色漸變的位置2.1.1線性漸變<style>div{width:200px;height:100px;background-image:linear-gradient(30deg,#f00,#00f);}</style><div></div>2.1.2徑向漸變徑向漸變，指的是起始顏色會從一個中心點開始，按照橢圓形或圓形形狀進行擴張，漸變到結束顏色。其基本語法格式如下：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重復漸變重復漸變是指重復使用以上兩種漸變，包括重復線性漸變和重復徑向漸變，其基本語法格式如下，其中各個顏色值后面可以使用百分比定義位置。重復線性漸變：background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2……,顏色值n);重復徑向漸變：background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2…顏色值n);2.1.3重復漸變<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中新增的陰影屬性可以輕松實現(xiàn)陰影的添加，基本語法格式如下：box-shadow:h-shadowv-shadowblurspreadcoloroutset;參數(shù)取值說明h-shadow必選項。水平陰影位置，允許為負值v-shadow必選項。垂直陰影位置，允許為負值blur陰影模糊半徑spread陰影擴展半徑，不能為負值color陰影顏色outset/inset默認為外陰影/內陰影2.2.1盒模型陰影每個盒模型可以同時添加多種陰影效果，中間使用“,”隔開，示例代碼如下：<style>div{padding:20px;box-shadow:inset0-48px48pxrgba(0,0,0,0.1),0002pxwhite,5px5px10pxrgba(0,0,0,0.3);}</style><div>當我們遇到逆風行舟的時候，調整航向迂回行駛就可以了；但是，當海面上波濤洶涌，而我們想停在原地的時候，那就要拋錨。當心啊，年輕的舵手，別讓你的纜繩松了，別讓你的船錨動搖，不要在你沒有發(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默認值，沒有效果blur(px)模糊度，數(shù)值越大越模糊brightness(%)給圖片應用一種線性乘法，使其看起來更亮或更暗。若該值是0，則圖像會全黑；若該值是100%，則圖像無變化。其他值則表示效果的線性乘子。則值可以超過100%，圖像會比原來更亮。如果沒有設定該值，則該值默認是100%contrast(%)調整圖像的對比度。若該值值是0%，則圖像會全黑。若該值值是100%，則圖像不變。該值可以超過100%，意味著會使用更低的對比度。若沒有設置該值，則該值默認是100%drop-shadow(h-shadowv-shadowblurspreadcolor)給圖像設置一個陰影效果。陰影是合成在圖像下面的，可以有模糊度grayscale(%)將圖像轉換為灰度圖像。該值定義了轉換的比例。若該值為100%，則完全轉換為灰度圖像；若該值為0，則圖像無變化。若該值為0～100%，則表示效果的線性乘子。若未設置該值，則該值默認是0hue-rotate(deg)給圖像應用色相旋轉。若該值為0deg，則圖像無變化。若未設置該值，則該值默認是0deg。該值雖然沒有最大值，但超過360deg的值相當于又繞了一圈invert(%)反轉輸入圖像。該值定義了轉換的比例。若該值為100%，則表示圖像完全反轉；若該值為0，則圖像無變化。若該值為0%～100%，則表示效果的線性乘子。若未設置該值，則該值默認是02.2.2盒模型濾鏡參數(shù)取值說明opacity(%)轉換圖像的透明程度。該值定義了轉換的比例。若該值為0，則圖像是完全透明的；若該值為100%，則圖像無變化。若該值為0%～100%，則表示效果的線性乘子，也相當于圖像樣本乘以數(shù)量。若未設置該值，則該值默認是1saturate(%)轉換圖像飽和度。該值定義了轉換的比例。若該值為0，則圖像完全不飽和；若該值為100%，則圖像無變化。其他值則是效果的線性乘子。該值可以超過100%，圖像會有更高的飽和度。若未設置該值，則該值默認是1sepia(%)將圖像轉換為深褐色。該值定義了轉換的比例。若該值為100%，則圖像完全是深褐色的；若該值為0，則圖像無變化。若該值為0～100%，則表示效果的線性乘子。若未設置該值，則該值默認是0url()url()函數(shù)接收一個XML文件，該文件設置了一個SVG濾鏡，且可以包含一個錨點，用來指定一個具體的濾鏡元素<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;/*適當放大圖片容器，讓邊緣的虛化效果出現(xià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">糖果可分為硬質糖果、硬質夾心糖果、乳脂糖果、凝膠糖果、拋光糖果、膠基糖果、充氣糖果和壓片糖果等。其中硬質糖果是以白砂糖、淀粉糖漿為主料的一類口感硬、脆的糖果；硬質夾心糖果是糖果中含有餡心的硬質糖果。</p><divclass="candy_bg"><imgsrc="candy.jpeg"alt="candy"></div></div>2.2.3混合模式mix-blend-mode屬性的作用是讓元素內容和這個元素的背景發(fā)生“混合”，產生各種效果，其基本語法格式如下：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(%)轉換圖像的透明程度。該值定義了轉換的比例。若該值為0，則圖像是完全透明的；若該值為100%，則圖像無變化。若該值為0%～100%，則表示效果的線性乘子，也相當于圖像樣本乘以數(shù)量。若未設置該值，則該值默認是1saturate(%)轉換圖像飽和度。該值定義了轉換的比例。若該值為0，則圖像完全不飽和；若該值為100%，則圖像無變化。其他值則是效果的線性乘子。該值可以超過100%，圖像會有更高的飽和度。若未設置該值，則該值默認是1sepia(%)將圖像轉換為深褐色。該值定義了轉換的比例。若該值為100%，則圖像完全是深褐色的；若該值為0，則圖像無變化。若該值為0～100%，則表示效果的線性乘子。若未設置該值，則該值默認是0url()url()函數(shù)接收一個XML文件，該文件設置了一個SVG濾鏡，且可以包含一個錨點，用來指定一個具體的濾鏡元素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>中國聯(lián)合航空</h2>

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

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

<divclass="navbar">

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

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

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

<nav></nav>

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

<divclass="changeLang"></div>

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

id="top"class="header_bar">

<divclass="navbar">

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

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

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

</a>

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

<nav>

<aclass="selected"href="index.html">網站首頁</a>

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

<ahref="html/product.html"target="_blank">產品中心</a>

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

<ahref="#">關于我們</a>

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

</nav>

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

<divclass="changeLang">

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

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

</div>

</div>

</header>步驟3：進行漸變設置在layout.css文件中設置頂部欄和導航欄的背景顏色,使用linear-gradient屬性進行漸變設置。/*頂部欄樣式*/.header_bar{

width:100%;

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

width:1000px;

height:60px;

margin:auto;

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

.navbara{color:#818496;}步驟4：進行漸變設置設置Logo區(qū)域的大小及浮動/*Logo區(qū)域*//*Logo區(qū)域*/.logo{

float:left;

width:108px;

height:20px;

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

width:100%;}/*頁面導航區(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：進行漸變設置設置頁面導航區(qū)域樣式及浮動步驟6：設置語言切換區(qū)域樣式設置語言切換區(qū)域樣式，完成頂部欄布局及樣式設計。/*語言切換區(qū)域樣式*/.changeLang{

float:right;

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

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

margin-left:10px;}main{

width:1000px;

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

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

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

</a>

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

<p>?2022巨巨網路科技有限公司<