福州網站設計使用html5和css3最新制作企業網

  • 福州網站設計使用html5和css3最新制作企業網已關閉評論
  • A+

在福州網站建設眾多的網站設計公司里面,基本上都是用html5開發新的企業網站了。福州嘉藝網絡燕狂徒給大家介紹下html5在福州網站設計中的好處
福州網站設計使用html5和css3最新制作企業網

HTML5是HTML標準的第五次修訂, 由W3C推薦, 它的開發目標是為桌面和移動平臺帶來無縫銜接的豐富內容?;谄鋸V泛的應用前景, HTML5已成為當前網頁設計的主要技術, 也是高?!毒W頁設計與制作》課程的基礎內容。網頁設計離不開網頁排版的層疊樣式表CSS, CSS3是當前最新的CSS技術, 有效運用CSS3可令網頁的布局更加靈活, 頁面效果更新穎美觀, 其圖形圖像特效和動畫效果已經能夠取代Flash或Java Script的很多特效。脫離了CSS3, HTML5將黯然失色無法展示其強大的支撐能力。本文重點闡述CSS3的擴展功能, 以簡明有代表性的案例對CSS3技術應用進行探討, 并以此作為HTML5網頁的教學拓展。

1 CSS3新技術概述

CSS即層疊樣式表 (Cascading Style Sheet) 。在網頁制作時采用層疊樣式表技術, 可以有效地對頁面的布局、字體、顏色、背景和其他效果實現更加精確的控制。CSS3是CSS技術的升級版本, 相比原來的CSS2版本, CSS3新增了八大功能, 分別如下。

(1) 圓角:可以指定一個元素的任意一個角或全部角為圓角, 還可以設置圓角的半徑 (即曲度) ;

(2) 多背景:在CSS3中可以在一個元素中顯示多個背景圖像, 還可以將多個背景圖像進行重疊顯示;

(3) @font-face:允許用戶輸入自己的字體出現在網站上, 即使該特定的字體在終端計算機上沒有安裝;

(4) 動畫:使用@keyframes規則創建由當前樣式逐漸改為新樣式的動畫效果;

(5) 漸變色:允許元素設置背景雙色或多色、線性或徑向等平穩過渡的漸變色;

(6) box-陰影:可為盒子元素圖像元素等添加陰影, 陰影可設置為半透明的或漸變色;

(7) RGBa-透明色:RGBa中的a代表透明色, 用于設置元素不透明度。

(8) 文字陰影:設置文字陰影效果。

2 CSS3新技術對盒子背景、圖像、表格的支持

2.1背景漸變色

以下代碼實現紅、黃、藍線性漸變的背景色,?若將最后“background”屬性修改如下則實現紅、黃、藍徑向漸變的背景色, 網頁效果如圖1 (b) 。

background:radial-gradient (red, yellow, blue) ;

CSS3定義漸變的顏色數可以多于等于2種, 各顏色間用逗號 (, ) 分隔開。

2.2 CSS3半半透透明明、圓角、陰影圖像特效

以下代碼實現圖像的半透明、圓角及陰影特效,其中, opacity屬性的值在0~1之間, 值越小圖像越透明。border-radius屬性通常有三種取值:屬性值只有一個值時, 如“border-radius:70px”表示四個邊角均為半徑70px圓角;屬性值有2個值時表示兩對對角的圓角設置;屬性值有4個值時按左上、右上、右下和左下分別表示各個角圓角設置。

2.3多圖像背景

以下代碼實現將三張圖像設置成重疊背景, 原圖及重疊背景網頁效果。當設置多張圖像時, 這些背景圖是分層的, 先讀入的圖像將置于最前端。

2.4 CSS3的圓角表格

CSS3的圓角功能不僅能對圖像產生效果, 其對表格元素同樣可以實現, 以下CSS3樣式就能將表格及表項都設置成圓角,

table{border-radius:50px;}

td{border-radius:50px;}