響應式網頁
阿新 • • 發佈：2022-03-30
<!doctype html> <html> <head> <meta charset="utf-8"> <title>myweb004</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- <link href="css/mui.css" rel="stylesheet" /> --> <style> body,ul,li,a{ margin: 0px; padding: 0px; list-style: none; text-decoration: none; } body{ background: #f4f4f4; } header{ width: 100%; height: 60px; background: #fff; box-shadow: 0px 0px 5px 5px #ccc; margin-bottom: 20px; } .top{ width: 60%; height: 60px; border: 1px solid blue; margin: 0px auto; /* //定義一個容器，做彈性盒模型*/ display: flex; /* 父類容器水平 */ justify-content: space-between; } .top>section{ border: 1px solid #000; } /* 子容器按比例分配 */ .top_left{ flex-grow: 1; } .top_center{ flex-grow: 5; } .top_right{ flex-grow: 2; } /* 導航部分 */ nav{ width: 60%; height: 80px; /* border: 1px solid blue; */ margin: 0px auto 20px; background: #FFF; border-radius: 10px; box-shadow: 0px 5px 5px #CCC } /* 內容部分 */ #content{ width: 60%; border: 1px solid pink; margin: 0px auto 20px; } .content{ width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; } .content>section{ width: 23%; height: 200px; border: 1px solid green; } /* 分頁部分 */ #page{ width: 60%; display: flex; justify-content: center; border: 1px solid red; margin: 0px auto; } #page>article{ border: 1px solid red; padding: 8px 15px; margin-left: 15px; } </style> </head> <body> <!-- 頭部內容 --> <header> <section class="top"> <section class="top_left">1</section> <section class="top_center">2</section> <section class="top_right">3</section> </section> </header> <!-- 導航部分 --> <nav></nav> <!-- 內容部分 --> <section id="content"> <section class="content"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> </section> <section class="content"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> </section> <section class="content"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> </section> <section class="content"> <section>1</section> <section>2</section> <section>3</section> <section>4</section> </section> </section> <!-- 分頁部分 --> <section id="page"> <article><a href="#">1</a></article> <article><a href="#">2</a></article> <article><a href="#">3</a></article> <article><a href="#">4</a></article> <article><a href="#">5</a></article> <article><a href="#">6</a></article> </section> </body> </html>
<!doctype html> myweb004
1 2 3
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4