網頁開發(HTML+CSS) 基本框架~RWD切版(HTML RWD DIV Layout) [單欄切版]
網頁開發(HTML+CSS) 基本框架~RWD切版(HTML RWD DIV Layout) [單欄切版]
資料來源:http://blog.ja-anything.com/2016/12/14/rwd%E7%B6%B2%E9%A0%81%E5%88%87%E7%89%88%E7%B7%B4%E7%BF%92%E4%B8%80%E5%9F%BA%E6%9C%AC%E7%B6%B2%E9%A0%81%E6%A1%86%E6%9E%B6/
GITHUB: https://github.com/jash-git/HTML-RWD-DIV-Layout
CSS
/* CSS Document */
@charset "utf-8";
/* CSS Document */
*{
/*
所有元素的基本CSS初始化
padding 內距屬性 - padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値;
margin 屬性用來定義一個區域（例如 DIV 或 span）的外邊界距離 - margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
list-style 項目符號及編號
border 邊框
*/
padding:0px;
margin:0px;/*margin:0 auto;*/
list-style:none;
border:0;
}
#wrap {
background-color: #8E8E8E;
width: 990px;
margin: 0 auto;/*區塊置中*/
}
header {
background-color: #8DA1D8;
height: 200px;
margin-bottom: 0px;
}
main {
background-color: #FFF242;
height: 1000px;
margin-bottom: 0px;
}
footer {
background-color: #178C2F;
height: 100px;
}
HTML
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="style/base.css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> </script> </head> <body> <div id="wrap"> <header>這裡放logo、選單</header> <main>這裡放內容</main> <footer>這裡放版權</footer> </div> </body> </html>