開發(fā)人員可以在其職業(yè)生涯中獲得巨大利益。HTML5不只僅是一項技術，HTML5HTMLWeb開發(fā)中的下一個重要里程碑。武漢
網站建設公司通過對其早期學習。會??留下一個堅定的足跡。雖然目前它并沒有完全誕生，但注定會是值得你去付出努力。
這篇文章中我將基于HTML5和CSS實現(xiàn)一個完整
網站制作。首先你需要對CSS有一定的解并熟識HTML當然也無需對此非常專業(yè)， HTML5HTML4下一代版本。但是至少能有一定的解。
幾乎保存了上一代所有的標簽元素，盡管有局部被視為廢棄元素，但在開發(fā)過程中仍可繼續(xù)沿用。不過使用時需謹慎，因為這部分功能最終都將被刪除。這一項新興技術尚處于起步階段，目前的規(guī)范仍處于發(fā)展階段，不過我可以推測最終規(guī)范中的規(guī)范會有哪些變化。由于規(guī)范制定委員會還沒有一個標準化的提議，因此，開發(fā)HTML5網頁時會有一個負面影響-目前不是所有的瀏覽器都能支持其功能，不過在絕大多數(shù)的最新版本下可以實現(xiàn)。
從而實現(xiàn)從Flash束縛中解放出來。但在這個問題上仍有很多的爭論， 毫無疑問的W3C將在HTML5項目中以新的標志呈現(xiàn)頁面中的視音頻。例如外地的HTML5播放器上視頻流的解碼器規(guī)范化問題。雖然還有很多問題未解決，但這并不影響開發(fā)者去學習HTML5如果對這項新技術感興趣，就完全可以著手，正如人們所說 -不下水，一輩子不會游泳：不揚帆，一輩子不會撐船。
而不只是一個簡單主頁。這里同時用到HTML4與HTML5中的元素以及一個CSS樣式表。開發(fā)過程中采用谷歌Chrome和IE9作為測試瀏覽器， 本文中我來模擬創(chuàng)建一個企業(yè)網站。而對于HTML和CSS則在Eclipse中完成。讀者可以選擇Eclipse或其它IDE
---------------------------------------------------------------------
可選擇多種不同的方式，開發(fā)人員在設計網頁時。這里我一般遵循以下方法：
導航鏈接，1.要求：分析網頁的內容。圖形/圖像，標志，表單等。
2.布局是否符合要求；準備工具：筆和紙
完成CSS樣式表3.創(chuàng)建布局。>
4.HTML編碼
5.瀏覽器中測試
需要注意的這些方法并不是線性的方法345一般都是同時進行。
---------------------------------------------------------------------------------------------
下面讓我來看看具體如何實現(xiàn)。
HTML與CSS
即標題，可以看到下方所示的樣式布局共包含6個部分。主菜單，主頁面內容，視頻，表單以及畫板。
這里將margin參數(shù)值設置為0刪除所有的HTML頁面的默認margin參數(shù)值。整個頁面中設置HTML頁面的背景色并應用字體TrebuchetMS頁面寬度設置為934px和margin設為自動，CSS代碼下General局部。給頁面實現(xiàn)固定寬度并在瀏覽器中準確定位。
可參考以下鏈接：實例中大多數(shù)都是罕見標簽。>
http://www.w3schools.com/HTML5/HTML5_reference.aspforHTML5tags.
http://www.w3schools.com/CSS/default.aspforCSStags.
CSSofHeaderSection
@CHA RSET"ISO-8859-1";
{
margin:00;
}
html{
background:#f2f4f5;
}
bodi{
代表說明網站是采用的編碼是英文；*/font-family:"TrebuchetMS"; /*TrebuchetMS西歐的編碼。>
width:934px;
margin:0pxauto;
padding:12px20px12px20px;
}
headerh1{
font-size:36px;
margin:0px;
color:#f3390a;
}
headerspan{
color:#000000;
}
headerh2{
font-size:12px;
margin:0px;
color:#444;
text-transform:uppercase;
}
nav{
background:#000000url'images/navbar.jpg';
font-size:1.143em;
height:40px;
line-height:30px;
padding:0px;
text-align:left;
border-radius:5px;
}
navul{
list-style:none;
margin:0pxauto;
width:800px;
}
navli{
float:left;
display:inline;
margin:0px;
}
nava:visit{nava:link.>
color:#fff;
display:inline-block;
height:30px;
padding:5px1.5em;
text-decoration:none;
}
nava:active,nava:hover.nav.activa:link,nav.activa:visit{
color:#65b0f7;
text-shadow:none;
}
HTMLofHeaderSection
CompanyName
youcanputhereaverinicecompanitagline
CSSofFeatursection
#featured{
background:#fffurlimages/banner.jpgno-repeat;
height:320px;
margin:0pxauto;
border-radius:10px;
}
#featurh2{
font-size:18px;
padding:20px20px20px20px;
color:#f3390a;
text-shadow:blackthreeddarkshadow;
text-transform:none;
}
#featurp{
font-size:12px;
padding:20px20px20px20px;
width:65%;
text-align:justify;
color:#000000;
}
#featurdiv{
font-size:12px;
margin-left:22px;
margin-right:22px;
padding-left:5px;
width:63%;
text-align:justify;
color:#000000;
background:#f67a56;
border-radius:20px;
}
#featurdiv>p{
font-size:12px;
padding:20px20px20px20px;
width:90%;
text-align:justify;
color:#000000;
}
HTMLofFeaturSection
A boutyourcompany
Youcanputheresummariofyourcompanidetails.
Lorem
consecteturadipiscelit.Quisquvenenatis ipsumdolorsitamet.>
nuncvitaliberoiaculielementum.Nullametjustononsapien
dapibublanditnecetleo.Ututmalesuadatellus.Loremipsumdolor
consecteturadipiscelit sitamet.>
Highlightpointaboutyourcompany.
Loremipsumdolor
consecteturadipiscelit.Quisquvenenatinuncvitae sitamet.>
liberoiaculielementum.Nullametjustononsapiendapibublandit
necetleo.Ututmalesuadatellus.Loremipsumdolorsitamet.>
consecteturadipiscelit
CSSofVideo,FormandCanvaSection
article{
margin:0pxauto;
background:#ffffff;
border-radius:10px;
padding:20px;
}
article>h2{
font-size:18px;
padding:20px20px20px20px;
color:#f3390a;
text-transform:none;
}
article>sectvideo{
width:320px;
height:240px;
background:#ffffff;
border-radius:5px;
}
article>section>ttd{
padding:0px20px0px20px;
font-size:12px;
}
article>sectform{
padding:10px;
margin-bottom:30px;
}
article>sectlabel{
font-weight:bold;
font-size:13px;
}
article>sectinput{
margin-bottom:3px;
font-size:13px;
}
canva{
margin-left:70px;
border:1pxsolid#888;
background-color:#f67a56;
}
HTMLofVideoSection
vorbis"'> type='video/webm;codecs="vp8.0.>
vorbis"'> type='video/ogg;codecs="theora.>
mp4a.40.2"'> type='video/mp4;codecs="avc1.4D401E.>
Thivideoheading |
Loremipsumdolorsit
Nullametjustononsapiendapibus
blanditnecetleo.Ututmalesuadatellus.
|
HTMLofFormandCanvaSection
Thiisafeedbackformandcanvasection.Youcanput
somedrawinthecanvaarea.
CSSofFooterSection
footer{
text-align:center;
}
HTMLoffootersection
代碼整合
HTML
HTML5andCSS3Demo
CompanyName
youcanputhereaverinicecompanitagline
A boutyourcompany
Youcanputheresummariofyourcompanidetails.
Lorem
consecteturadipiscelit.Quisquvenenatis ipsumdolorsitamet.>
nuncvitaliberoiaculielementum.Nullametjustononsapien
dapibublanditnecetleo.Ututmalesuadatellus.Loremipsumdolor
consecteturadipiscelit sitamet.>
Highlightpointaboutyourcompany.
Loremipsumdolor
consecteturadipiscelit.Quisquvenenatinuncvitae sitamet.>
liberoiaculielementum.Nullametjustononsapiendapibublandit
necetleo.Ututmalesuadatellus.Loremipsumdolorsitamet.>
consecteturadipiscelit
vorbis"'> type='video/webm;codecs="vp8.0.>
vorbis"'> type='video/ogg;codecs="theora.>
mp4a.40.2"'> type='video/mp4;codecs="avc1.4D401E.>
Thivideoheading |
Loremipsumdolorsit
Nullametjustononsapiendapibus
blanditnecetleo.Ututmalesuadatellus.
|
Thiisafeedbackformandcanvasection.Youcanput
somedrawinthecanvaarea.
CSS
@CHA RSET"ISO-8859-1";
*{
margin:00;
}
html{
background:#f2f4f5;
}
bodi{
font-family:"TrebuchetMS";
width:934px;
margin:0pxauto;
padding:12px20px12px20px;
}
headerh1{
font-size:36px;
margin:0px;
color:#f3390a;
}
headerspan{
color:#000000;
}
headerh2{
font-size:12px;
margin:0px;
color:#444;
text-transform:uppercase;
}
nav{
background:#000000url'images/navbar.jpg';
font-size:1.143em;
height:40px;
line-height:30px;
padding:0px;
text-align:left;
border-radius:5px;
}
navul{
list-style:none;
margin:0pxauto;
width:800px;
}
navli{
float:left;
display:inline;
margin:0px;
}
nava:visit{nava:link.>
color:#fff;
display:inline-block;
height:30px;
padding:5px1.5em;
text-decoration:none;
}
nava:active,nava:hover.nav.activa:link,nav.activa:visit{
color:#65b0f7;
text-shadow:none;
}
#featured{
background:#fffurlimages/banner.jpgno-repeat;
height:320px;
margin:0pxauto;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#featurh2{
font-size:18px;
padding:20px20px20px20px;
color:#f3390a;
text-shadow:blackthreeddarkshadow;
text-transform:none;
}
#featurp{
font-size:12px;
padding:20px20px20px20px;
width:65%;
text-align:justify;
color:#000000;
}
#featurdiv{
font-size:12px;
margin-left:22px;
margin-right:22px;
padding-left:5px;
width:63%;
text-align:justify;
color:#000000;
background:#f67a56;
border-radius:20px;
}
#featurdiv>p{
font-size:12px;
padding:20px20px20px20px;
width:90%;
text-align:justify;
color:#000000;
}
article{
margin:0pxauto;
background:#ffffff;
border-radius:10px;
padding:20px;
}
article>h2{
font-size:18px;
padding:20px20px20px20px;
color:#f3390a;
text-transform:none;
}
article>sectvideo{
width:320px;
height:240px;
background:#ffffff;
border-radius:5px;
}
article>section>ttd{
padding:0px20px0px20px;
font-size:12px;
}
article>sectform{
padding:10px;
margin-bottom:30px;
}
article>sectlabel{
font-weight:bold;
font-size:13px;
}
article>sectinput{
margin-bottom:3px;
font-size:13px;
}
canva{
margin-left:70px;
border:1pxsolid#888;
background-color:#f67a56;
}
footer{
text-align:center;
}
結論
當前文章：完整網站設計實例：HTML5實戰(zhàn)開發(fā)
網站路徑：http://bm7419.com/news/179780.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站建設、服務器托管、網站內鏈、電子商務、品牌網站制作、全網營銷推廣
廣告
![]()
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：
創(chuàng)新互聯(lián)
