網頁開發(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:0 auto;/*所有元建置中顯示*/
list-style:none;
border:0;
}
#wrap {
width: 990px;
background-color: #686868;
}
header {
background-color: #E37C7E;
height:200px;
}
aside {
background-color: #87B3D7;
height:900px;
width:190px;
float:left;
}
main {
background-color: #4D95BD;
height:900px;
width:800px;
float:left;
}
#main01
{
background-color: #FF0000;
float:left;
height:800px;
width:650px;
}
#main02
{
background-color: #00FF00;
float:left;
height:800px;
width:150px;
}
footer {
background-color: #561718;
height:100px;
clear:both;
}
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>檔頭</header> <aside>側欄</aside> <main> <div id="main01"> 主內 </div> <div id="main02"> 右側 </div> </main> <footer>頁尾</footer> </div> </body> </html>