最近都在學這個部分,所以有學到什麼,就開始分享什麼啦,今天分享的也是排版系列,因為我覺得不管學任何一個套件軟體,基本的排版你還是要有些概念存在,不然到時候就算架WORDPRESS,結果CSS部分都不太懂,這樣也不是說很好,所以一起來看看今天的教學吧!

HTML5排版

比如今天我們想要排成這樣子,

寬螢幕的CHROME是這樣子,

這邊分享的語意標籤還是一樣基本的為主,

<header>代表上方區塊橫幅

<article>代表主要內容

<aside>代表側欄

<footer>指得是底部區塊

最後分享今天寫的語法,CSS部分就要麻煩大家自己去翻一下書了,

<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title>html5排版測試</title>
<style>
body{
min-width:1024px;
margin-top:0px;

}
#total{
margin:0 auto;
width:1024px;

}
header{
background:#0066CC;
width:1024px;
height:250px;
}
article{
background:#F90;
width:350px;
height:100px;
float:left;
}
#main2
{
background:#FF0;
width:350px;
height:100px;
float:left;

}
aside{
background:#000;
width:323px;
height:100px;
color:#FFFFFF;
float:left;
}
footer{
background:#666;
width:1024px;
height:300px;
clear:both;
}
</style>
</head>

<body>
<div id=total>
<header id=top>
橫幅
</header>
<article id=main>
主要欄
</article>
<article id=main2>
主要欄二
</article>
<aside>
側邊攔
</aside>
<footer id=bottom>
底部
</footer>
</div>
</body>
</html>

最後分享IE9和FIREFOX11的畫面,這一篇只是單純對有支援HTML5瀏覽器的做測試,其它像比較舊的IE等,要外掛一個JS檔才能看。

FIREFOX11

 

IE9

 

熱門相關文章

網頁設計教學系列-用HTML5語法做基本的排版
最近自己本身在學HTML5語法,所以會開始分享一些HTML5設計的語法教學,也順邊透過這樣的方式來跟大家討論,今天要分享的東西跟之前DIV排版很像,但這次是用HTML5語法來做排版,因為HTML5語法是語意標籤,也就是只要看網頁原始碼大概就知道網頁架構,一起來看看今天的教學! 第一步我們先來看想要完成的樣子, 這跟之前教學的排版很像,只是今天分享的是用HTML5語法來排, 分享今天排版的原始碼, <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>測試用</title> <style> body{ width:1024px; margin:0 ...
繼續閱讀
網頁設計教學系列-CSS+DIV排版-2
今天再度要來分享CSS排版系列,現在CSS+DIV的排版是一定要學會的基本功,這樣你才能靈活用在像是之後HTML5語法上面,或者是WORDPRESS等等,因此這裡的文章都會從一些基本的教起,如果有什麼樣的問題,歡迎大家來提問,這樣大家才會一起進步,話不多說,趕快來看今天的教學吧! CSS排版 我們先來到網站想要變成的雛形,我們很常看到國外網站是這樣子排版的,就像以下這張圖一樣, 發現中間一個大區塊,下面三個小區塊,所以我們可以把構想做成這樣,用顏色來代替, 這是預覽CHROME17的畫面,現在就要分享這個架構的原始碼! HTML原始碼 <body> <div id="total"> <div id="header"> banner區塊</div> <div id="content"> <div class="left"> 內容左區塊</div> <div class="middle">內容中間區塊</div> <div class="right">內容右區塊</div> </div> <div id="footer"> ...
繼續閱讀
網頁設計教學系列-CSS+DIV排版-1
今天要分享的東西,也是網頁設計很基本的排版設計,以WORDPRESS來看,就是一塊header+content+sidebar+footer的一種排版方式居多,所以今天這裡要先介紹基本類似的兩欄式排版方式,先從基礎的學起,以後在用其它東西時,會比較得心應手,話不多說,馬上開始今天的排版教學! CSS排版教學 CSS+DIV排版 首先我們來看我們想要達到的效果,這是預覽CHROME17的畫面, HTML原始碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
繼續閱讀
網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!
今天要分享的東西,可能從標題看不太出來在講什麼樣的意思,這邊今天要講的,就是網頁設計的爸爸和小孩,也就是父區塊和子區塊,有時候在1024X768看到的是子區塊,在1366X768看見的是父區塊和子區塊的結合,這樣做的好處就是不會在不同解析度下,所呈現出來的感覺不會差太多,讓我們來看看今天的教學! 比如我們今天看到一個部落格網站長這樣子,這是1024X768的解析度畫面, 不過在其他的寬螢幕和筆電可能是這樣子,比如1366X768,   或許是現在圖片尺寸關係,所以有點看不出來,不過如果在做網頁如果遇到不同解析度的話,是件麻煩問題,所以通常我們都會設父區塊和子區塊,比如今天我們設一個父區塊和子區塊, 之後我們在為這兩個區塊寫上CSS背景顏色,這邊是原始碼, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
繼續閱讀
網頁設計教學系列-HTML5語法分享!
今天要介紹的東西,就是最近還滿夯的HTML5,這篇只是從一些基礎的東西開始分享,大概了解基本的觀念而已,之後如果學到更多好玩的東西,再一次分享給大家,不過昨天這樣摸一摸,還滿佩服賈伯斯所帶來當的創意,雖然HTML5還沒有真正完全到答一個標準,不過我想這是遲早的趨勢,一起來看! 比如我們呈現效果像下圖這樣,以前用HTML4語法也很簡單,就很多區塊設DIV就行了,這邊要分享HTML5的寫法, HTML5文件檔頭簡單設定 以往我們熟悉的HTML語法,剛開始文件一開頭都會這樣寫, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 但HTML5的文件一開頭寫法相當簡單,只要像下圖這樣寫就可以 <!DOCTYPE html> 寫法變得相當簡單, 我們從WORDPRESS預設佈景也看到是這樣子寫的 <!DOCTYPE ...
繼續閱讀
網頁設計教學系列-用HTML5語法做基本的排版
網頁設計教學系列-CSS+DIV排版-2
網頁設計教學系列-CSS+DIV排版-1
網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!
網頁設計教學系列-HTML5語法分享!

DOUBLE冠就是愛升級

  • ※一起訂閱本站:按這裡
  • ※訂閱DOUBLE冠手機版本站:按這裡下載
  • ※引用網址:
  • ※如有發現圖檔無法預覽,請麻煩告知告知,將會盡速處理!謝謝~
  • ※請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處~謝謝~~
  • 日期:2012/03/30

    隨機文章

    FACEBOOK留言

    0 留言

    發表留言 »

    (姓名)
    (信箱)
    (網站)

    網站搜尋

    2015-DOUBLE冠就是愛升級 引用-Theme Sco v5.0 By:Scorpio

    本站不支援IE6以下的版本