什么是HTML5+CSS3

上篇文章，今天這節(jié)我們講一下自己如何建站的第13節(jié)：“什么是HTML5+CSS3”。

HTML5+CSS3 是一種最新的網(wǎng)站網(wǎng)頁布局方式。 HTML5:用于書寫網(wǎng)站內(nèi)容 CSS3:控制內(nèi)容的排版。

什么是HTML5+CSS3

網(wǎng)頁布局一共經(jīng)歷了三個主要階段：

第一個階段：Table表格布局（基本淘汰）
第二個階段：DIV+CSS布局
第三個階段：HTML5+CSS3布局

區(qū)別：

代碼越來越少，越來越簡潔；
功能越來越強大；
語義標簽越來越多，越來越受搜索引擎歡迎做SEO優(yōu)化排名，最好HTML5+CSS3

TML 是用來描述網(wǎng)頁的一種語言。

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網(wǎng)頁

HTML5 是最新的 HTML 標準。

HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計的，并且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡化了 web 應(yīng)用程序的搭建。
HTML5 是跨平臺的，被設(shè)計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。

CSS 是一種描述 HTML 文檔樣式的語言。

CSS 描述應(yīng)該如何顯示 HTML 元素。
CSS 用于控制網(wǎng)頁的樣式和布局。
CSS3 是最新的 CSS 標準。
CSS3 被拆分為"模塊"。主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸變效果、使用@Font-Face實現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等。

1 標注效果

要實現(xiàn)如下效果：

HTML5:

<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>離<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
鄉(xiāng)<rt>xiāng</rt>音<rt>yīn</rt>無<rt>wú</rt>改<rt>gǎi</rt>鬢<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。

2 與文本換行相關(guān)的屬性

	使用說明
line-break	用于指定如何（或是否）斷行。除了Firefox，其它瀏覽器都支持。取值包括： auto，使用缺省的斷行規(guī)則分解文本； loose，使用最松散的斷行規(guī)則分解文本，一般用于短行的情況，如報紙； normal，使用最一般的斷行規(guī)則分解文本； strict，使用最嚴格的斷行原則分解文本。
word-wrap	允許長單詞或URL地址換行到下一行。所有瀏覽器都支持。取值包括： normal，只在允許的斷字點換行（瀏覽器保持默認處理）； break-word，在長單詞或 URL 地址內(nèi)部進行換行。
word-break	定義文本自動換行。Chrome和Safari瀏覽器支持不夠友好。取值包括： normal：為默認值，允許在字內(nèi)換行; keep-all,對于中文、韓文、日文，不允許字斷開； break-all，與normal相同，允許非亞洲語言文本行的任意字內(nèi)斷開。
white-space	設(shè)置如何處理元素中的空格。所有瀏覽器都支持。取值包括： normal，默認處理方式； pre，顯示預(yù)先格式化的文本，當(dāng)文字超出邊界時不換行； nowrap，強制在同一行內(nèi)顯示所有文本，合并文本間的多余空白，直到文本結(jié)束或者遭遇br對象； pre-wrap，顯示預(yù)先格式化的文本，不合并文字間的空白距離，當(dāng)文字碰到邊界時發(fā)生換行； pre-line，保持文本的換行，不保留文字間的空白距離，當(dāng)文字碰到邊界時發(fā)生換行。

3 text-shadow

要實現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    font: bold 60px helvetica, arial, sans-serif;
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em;
}

要實現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    font:bold 60px helvetica, arial, sans-serif;
    color: red;
    text-shadow: 0 0 4px white, 
        0 -5px 4px #ff3, 
        2px -10px 6px #fd3, 
        -2px -15px 11px #f80, 
        2px -25px 18px #f20;
}

要實現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: -1px -1px white,  
        1px 1px #333;
}

要實現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: 1px 1px white,  
        -1px -1px #333;
}

4 border的transparent屬性

要實現(xiàn)的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

要實現(xiàn)的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

要實現(xiàn)的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

要實現(xiàn)的效果：

CSS3：

#demo {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

}

5 transform: rotate

要實現(xiàn)的效果：

CSS3和HTML5：

<style type="text/css">
.bubble {
    width: 200px; /*定義框大小，可忽略，讓消息框自由收縮*/
    height: 50px;
    background:hsla(93,96%,62%,1); /*定義背景色，必須與下面箭頭背景色一致*/
    padding: 12px;  /*增加補白，防止消息文本跑到框外*/
    position: relative; /*定義定位包含框，方便定位箭頭*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;   /*圓角*/
}
.bubble:before { 
    content: "";   /*不顯示任何內(nèi)容*/
    width: 0;  /*定義箭頭內(nèi)容區(qū)大小*/
    height: 0;
    position: absolute;  /*絕對定位*/
    z-index:-1;  /*顯示在消息框下面*/
}
.bubble.bubble-left:before {
    right: 90%;
    top: 50%;
    
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    transform: rotate(-25deg);  /*定位箭頭傾斜角度*/
    /*定義箭頭長短、粗細*/
    border-top: 20px  solid transparent;
    border-right: 80px  solid hsla(93,96%,62%,1);
    border-bottom: 20px  solid transparent;

}

div {
    margin:50px;
}

<div class="bubble bubble-left">左側(cè)消息提示框<br>class="bubble bubble-left"</div>

6 background: repeating-linear-gradient

要實現(xiàn)的效果：

CSS3：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
    background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
    background-size: 100% 30px;
    position: relative;
}
body:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}

需要實現(xiàn)的效果：

CSS3：

.box {
    background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
    color: #fff;
    padding: 12px 24px;
}

7 實現(xiàn)選項卡效果

<script>
function setTab(cursel,n){
	    for(i=1;i<=n;i++){
	        	var menu=document.getElementById("tab_"+i);
	        	var con=document.getElementById("con_"+i);
	        	menu.className=i==cursel?"hover":"";
	        	con.style.display=i==cursel?"block":"none";
	    }
}
</script>

<div id="tab">
    <div class="Menubox">
        <ul>
            <li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
            <li id="tab_2" onclick="setTab(2,4)">搞笑</li>
            <li id="tab_3" onclick="setTab(3,4)">美女</li>
            <li id="tab_4" onclick="setTab(4,4)">攝影</li>
        </ul>
    </div>
    <div class="Contentbox">
        <div id="con_1" class="hover" ><img src="images/1.png" /></div>
        <div id="con_2" class="hide"><img src="images/2.png" /></div>
        <div id="con_3" class="hide"><img src="images/3.png" /></div>
        <div id="con_4" class="hide"><img src="images/4.png" /></div>
    </div>
</div>
</body>

8 表格隔行添加背景色

CSS3：

tbody tr:nth-child(2n) {
    background-color: #f5fafe;
}

9 border-radius

圓角表格的CSS3：

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

10 border-spacing

單線表格的CSS3：

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

11 box-shadow

設(shè)計圖片翹邊陰影效果：

CSS3：

.box {
    width: 980px;
    clear: both;
    overflow: hidden;
    height: auto;
    margin: 20px auto;
}
.box li {
    background: #fff;
    float: left;
    position: relative;
    margin: 20px 10px;
    border: 2px solid #efefef;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    left: 21px;
    background: transparent;  /*透明背景*/
    z-index: -2;   /*顯示在照片的下面*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);  /*添加陰影*/
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(-12deg) rotate(-6deg);   /*變形并旋轉(zhuǎn)陰影，讓其翹起*/
    -webkit-transform: skew(-12deg) rotate(-6deg);
    -moz-transform: skew(-12deg) rotate(-6deg);
    -os-transform: skew(-12deg) rotate(-6deg);
    -o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左側(cè)添加翹邊陰影*/
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    right: 21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(12deg) rotate(6deg);
    -webkit-transform: skew(12deg) rotate(6deg);
    -moz-transform: skew(12deg) rotate(6deg);
    -os-transform: skew(12deg) rotate(6deg);
    -o-transform: skew(12deg) rotate(6deg);
}

<ul class="box">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
</ul>

ref

《HTML5+CSS3+JavaScript從入門到精通（實例版）》

-End-

書將當(dāng)前Web 設(shè)計中熱門的響應(yīng)式設(shè)計技術(shù)與HTML5 和CSS3 結(jié)合起來，為讀者全面深入地講解了針對各種屏幕大小設(shè)計和開發(fā)現(xiàn)代網(wǎng)站的各種技術(shù)。書中不僅討論了媒體查詢、彈性布局、響應(yīng)式圖片，更將最新和最有用的HTML5 和CSS3 技術(shù)一并講解，是學(xué)習(xí)最新Web 設(shè)計技術(shù)不可多得的佳作。

本書特色：

隨著移動設(shè)備的普及，用戶上網(wǎng)的方式發(fā)生了巨大變化，無論從樣式還是可用性來講，只適合桌面顯示器的網(wǎng)站已經(jīng)過時了。如今，在設(shè)計網(wǎng)站的時候必須同時考慮多種屏幕尺寸和用戶體驗。如果網(wǎng)站對你或你的客戶品牌非常重要，那么實現(xiàn)響應(yīng)式設(shè)計就是當(dāng)務(wù)之急。

“響應(yīng)式和移動優(yōu)先”的設(shè)計理念，可以確保無論使用什么設(shè)備都可以正常訪問你的網(wǎng)站。在這一理念的指導(dǎo)下，本書圍繞實戰(zhàn)案例，全面講解了與響應(yīng)式設(shè)計相關(guān)的現(xiàn)代Web技術(shù)，堪稱一部“響應(yīng)式設(shè)計大全”。

這一版根據(jù)最新的Web設(shè)計趨勢進行了更新，展示了實現(xiàn)現(xiàn)代響應(yīng)式設(shè)計最有效的方式，涵蓋了創(chuàng)建優(yōu)秀的響應(yīng)式設(shè)計所必需的全部最新技術(shù)和工具。掌握了這些內(nèi)容，你設(shè)計的網(wǎng)站不僅可以適應(yīng)當(dāng)下，更可以順應(yīng)未來。

- 理解響應(yīng)式設(shè)計，以及為何它對現(xiàn)代Web設(shè)計如此重要

- 清晰、高效地編寫富有語義的HTML5標記

- 使用CSS3媒體查詢基于設(shè)備應(yīng)用不同的樣式，了解媒體查詢的最新進展

- 根據(jù)不同的屏幕大小、分辨率和使用環(huán)境加載不同的圖片

- 掌握表單處理，使用HTML5標記添加日期選擇器、范圍滑塊等交互控件

- 在響應(yīng)式設(shè)計里使用SVG提供分辨率無關(guān)的圖片，修改SVG并添加動畫效果

- 使用CSS最新的特性，如自定義字體、nth-child選擇符、自定義屬性及CSS calc

<亞馬遜讀者評論>

(1)“看完這本書，我覺得時間花得太值了。書中滿是關(guān)于響應(yīng)式Web設(shè)計的高質(zhì)量信息，保證不會讓你失望。”

(2)“讀這本書可以說是一種享受。過去幾周，我一直把研讀這本書作為工作之余的最大樂趣。不管是提升技術(shù)水平，還是一窺Web設(shè)計的奧秘，這本書都非常合適。它將成為我手邊必備的參考書。”

(3)“這本書的作者應(yīng)該是我看過的書里思路最清晰的一位了，所有技術(shù)點在他筆下依次呈現(xiàn)，紛至沓來，讀后有如醍醐灌頂。程序員特有的幽默不時閃現(xiàn)，卻從不喧賓奪主。”

如果對這本書感興趣，可以私信回復(fù)“響應(yīng)式web設(shè)計”領(lǐng)取。

在線咨詢

上一篇：SEO如何對網(wǎng)站模板進一步優(yōu)化
下一篇：這些擴展組件，幫你輕松搞定web/移動應(yīng)用開發(fā)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

什么是HTML5+CSS3

1 標注效果

2 與文本換行相關(guān)的屬性

3 text-shadow

4 border的transparent屬性

5 transform: rotate

6 background: repeating-linear-gradient

7 實現(xiàn)選項卡效果

8 表格隔行添加背景色

9 border-radius

10 border-spacing

11 box-shadow

您的項目需求