步驟1 創(chuàng)建空白的HTML 5模版
創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、新津縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為新津縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
首先,我們創(chuàng)建一個(gè)空白的模版,代碼很簡(jiǎn)單,如下所示:
復(fù)制代碼
步驟2 增加HTML 5新標(biāo)簽 HTML 5中新增加了不少標(biāo)簽,如:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在頁(yè)面模版中,我們需要確保每個(gè)區(qū)域都能正確地對(duì)齊,因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標(biāo)簽。代碼如下所示:
復(fù)制代碼
讀者可能留意到這里使用的div id=”wrapper”,這個(gè)是稍候用來(lái)做meida query的時(shí)候調(diào)整全局CSS樣式調(diào)整用的 步驟3 往HTML 5標(biāo)簽中增加代碼
1)首先往標(biāo)題中增加如下代碼:
Simple HTML5 Template
復(fù)制代碼
2)往導(dǎo)航標(biāo)簽中添加如下代碼,這樣很方便地構(gòu)件了一個(gè)簡(jiǎn)單的頁(yè)面分類導(dǎo)航:
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
復(fù)制代碼
3)使用標(biāo)簽來(lái)描述每一個(gè)要展示的內(nèi)容實(shí)體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內(nèi)容就可以使用標(biāo)簽了。如下代碼所示:
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
復(fù)制代碼
4)添加標(biāo)簽 HTML5提供的元素標(biāo)簽用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分,可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組,以及其他類似的有別與主要內(nèi)容的部分。
根據(jù)目前的規(guī)范,元素有兩種使用方法:
被包含在中作為主要內(nèi)容的附屬信息部分,其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。
在之外使用,作為頁(yè)面或站點(diǎn)全局的附屬信息部分;最典型的形式是側(cè)邊欄(sidebar),其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。
代碼如下:
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
復(fù)制代碼
5)加上最后的標(biāo)簽,代碼為:
Copyright@ 2013 HTML5.com Privacy Policy - About Us
復(fù)制代碼
步驟4 增加CSS樣式
首先創(chuàng)建一個(gè)空白的樣式,如下:
[/code] 然后在中下載這個(gè)css,然后將其內(nèi)容復(fù)制到該空白的文件中代碼如下: [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
}
nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}
nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* css for */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}
/* css for */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;
}
aside.sidebar
ul li { width:100%; margin: 0px 0px 2em; padding:
0px; float: left; list-style: none;
}
aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;
}
aside.sidebar
ul li ul li ul li { margin: 0px; padding: 0px 0px 0px
1em; width: 90%; font-size: 0.9em;
}
aside.sidebar
ul li h3.widget-title { width:100%; margin: 0px;
padding: 0px; float: left; font-size: 1.45em;
}
/* css for */
footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }
復(fù)制代碼
步驟5 為移動(dòng)應(yīng)用使用@media query查詢 為了進(jìn)行響應(yīng)式設(shè)計(jì),最佳的方案是使用@media query去進(jìn)行查詢,在上面的CSS代碼中添加如下代碼:
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
復(fù)制代碼
步驟6 增加jquery,modernizer和html5shiv到標(biāo)簽中 這里推薦使用Modernizr 和html5shiv,它們都是一個(gè)能在多種瀏覽器中通過(guò)運(yùn)行各種腳本兼容運(yùn)行支持大部分HTML 5標(biāo)簽的插件。我們將它們和jQuery庫(kù)放在標(biāo)簽前,代碼如下:
復(fù)制代碼
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) (英語(yǔ):Responsive web design,通常縮寫為 RWD ),也稱為自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì),這一項(xiàng)網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)可以使得網(wǎng)站在不同的設(shè)備上都有一個(gè)合適的呈現(xiàn),減少了用戶進(jìn)行縮放,移動(dòng)等操作行為的次數(shù)。對(duì)前端工程師來(lái)說(shuō)使用響應(yīng)式布局設(shè)計(jì) 更易于維護(hù)網(wǎng)頁(yè)。因?yàn)橐苿?dòng)流量現(xiàn)在占互聯(lián)網(wǎng)流量的一半以上,響應(yīng)式布局變得更加的重要。
響應(yīng)式布局 技術(shù)的概念是伴隨著CSS3的媒體查詢技術(shù)的出現(xiàn)而產(chǎn)生的,現(xiàn)在已成為優(yōu)秀頁(yè)面布局的標(biāo)準(zhǔn),是當(dāng)今主流的設(shè)計(jì)。其中,Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。本人曾做過(guò)網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的工作深知響應(yīng)式設(shè)計(jì)對(duì)于提升用戶體驗(yàn)的重要性。不少朋友希望學(xué)習(xí)響應(yīng)式布局技術(shù)卻苦于沒有辦法找到合適的實(shí)例,我多年搜集了一套實(shí)用的HTML5響應(yīng)式模板。涵蓋各領(lǐng)域,可以直接修改 ,詳情請(qǐng)看
其達(dá)到的效果都一致的,自適應(yīng)屏幕大小來(lái)改變頁(yè)面布局適應(yīng)當(dāng)前屏幕。
類似爸爸,老爸,爹地,叫法不一樣而已。
舉個(gè)實(shí)現(xiàn)HTML5響應(yīng)式表格的實(shí)例,僅供參考:
HTML結(jié)構(gòu)如下:
table id="miyazaki"
captionThe Films of Miyazaki/caption
thead
trthFilmthYearthHonor
tbody
tr
td data-th="Film"My Neighbor Totoro
td data-th="Year"1988
td data-th="Honor"Blue Ribbon Award (Special)
tr
td data-th="Film"Princess Mononoke
td data-th="Year"1997
td data-th="Honor"Nebula Award (Best Script)
tr
td data-th="Film"Spirited Away
td data-th="Year"2001
td data-th="Honor"Academy Award (Best Animated Feature)
tr
td data-th="Film"Howl’s Moving Castle
td data-th="Year"2004
td data-th="Honor"Hollywood Film Festival (Animation OTY)
/table
注意代碼中的data屬性,每一個(gè)單元格的data屬性都與表格的header相對(duì)應(yīng)。
CSS樣式
表格基本的CSS樣式如下:
table#miyazaki caption {
font-size: 2rem; color: #444;
margin: 1rem;
background-image: url(miyazaki.png), url(miyazaki2.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center left, center right;
}
table#miyazaki {
border-collapse: collapse;
font-family: Agenda-Light; font-weight: 100;
background: #333; color: #fff;
text-rendering: optimizeLegibility;
border-radius: 5px;
}
table#miyazaki thead th { font-weight: 600; }
table#miyazaki thead th, table#miyazaki tbody td {
padding: .8rem; font-size: 1.4rem;
}
table#miyazaki tbody td {
padding: .8rem; font-size: 1.4rem;
color: #444; background: #eee;
}
table#miyazaki tbody tr:not(:last-child) {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
下面是響應(yīng)式表格的CSS代碼:
@media screen and (max-width: 600px) {
table#miyazaki caption { background-image: none; }
table#miyazaki thead { display: none; }
table#miyazaki tbody td { display: block; padding: .6rem; }
table#miyazaki tbody tr td:first-child { background: #333; color: #fff; }
table#miyazaki tbody td:before {
content: attr(data-th); font-weight: bold;
display: inline-block; width: 6rem;
}
}
media query代碼中隱藏表格的頭部單元,并且將每一個(gè)單元格的data-th作為標(biāo)簽顯示在單元格內(nèi)容的前面。每一行的第一個(gè)單元格都設(shè)置了特別的背景色和前景色,使之更為清晰。
擴(kuò)展
你現(xiàn)在可以縮放瀏覽器來(lái)看看效果,非常不錯(cuò)。但是上面的代碼是不可擴(kuò)展的:要添加一個(gè)新行必須手動(dòng)為每個(gè)單元格添加一個(gè)data-th屬性。要想做到自動(dòng)化,可以在服務(wù)器端實(shí)現(xiàn),如PHP。也可以通過(guò)javascript來(lái)實(shí)現(xiàn)它。
首先,將整個(gè)表格都進(jìn)行簡(jiǎn)化:
table id="miyazaki"
captionThe Films of Hayao Miyazaki/caption
thead
trthFilmthYearthHonor
tbody
tr
tdMy Neighbor Totoro
td1988
tdBlue Ribbon Award (Special)
tr
tdPrincess Mononoke
td1997
tdNebula Award (Best Script)
tr
tdSpirited Away
td2001
tdAcademy Award (Best Animated Feature)
tr
tdHowl’s Moving Castle
td2004
tdHollywood Film Festival (Animation OTY)
/table
然后在文檔的底部添加下面的javascript代碼:
script
var headertext = [];
var headers = document.querySelectorAll("#miyazaki th"),
tablerows = document.querySelectorAll("#miyazaki th"),
tablebody = document.querySelector("#miyazaki tbody");
for(var i = 0; i headers.length; i++) {
var current = headers[i];
headertext.push( current.textContent.replace( /\r?\n|\r/,"") );
}
for (var i = 0, row; row = tablebody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[j]);
} }
/script
上面的代碼的意思是:獲取每一個(gè)th中的文本內(nèi)容,然后分別剔除它們的回車和換行符。然后將這些文本分別添加到適當(dāng)?shù)膯卧竦膁ata屬性上,添加的規(guī)則與CSS樣式的規(guī)則相一致。(使用setAttribute要比dataset要好,后者只有在IE 11中得到支持。)
當(dāng)前文章:關(guān)于響應(yīng)式html5模板的信息
網(wǎng)頁(yè)路徑:http://chinadenli.net/article22/dsdsejc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、小程序開發(fā)、標(biāo)簽優(yōu)化、App設(shè)計(jì)、自適應(yīng)網(wǎng)站、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)