準備首頁的基本框架
準備首頁 index.html 檔案
準備首頁第一層框架
<body>
<section id="sec1"></section>
<section id="sec2"></section>
<section id="sec3"></section>
<section id="sec4"></section>
<section id="sec5"></section>
</body>
設計 CSS 樣式
/* reset & default ============================================================ */
* { padding: 0; margin: 0; box-sizing: border-box; }
html,body { height: 100%; }
body { background-color: #ddd; color: #222;
font-size: 0.9375rem; letter-spacing: 1px;
font-family: Helvetica, Arial, "Microsoft JhengHei UI", 微軟正黑體, sans-serif; }
a { text-decoration: none; }
ul,ol,li { list-style: none; }
/* section all page ========================================================== */
body>section { min-height: 100%; overflow: hidden; position: relative; padding: 200px 7% 50px; }
body>section:nth-of-type(1) { background-image: url(images/bg1.jpg);
background-size: cover; background-position: center top; }
body>section:nth-of-type(2) { background-image: url(images/bg2.png); }
body>section:nth-of-type(3) { background-image: url(images/bg3.png); }
body>section:nth-of-type(4) { background-image: url(images/bg4.png); }
body>section:nth-of-type(5) { background-image: url(images/bg5.png); }