position 頁面簡單佈局

時間 2019-11-13

標籤 position 頁面簡單佈局欄目 CSS 简体版

原文原文鏈接

要想實現這樣的一個頁面佈局，請看代碼： git

<style>api

body{ margin-bottom:120px;}瀏覽器

.container{ position:relative; border:1px solid #000}佈局

nav{ position:absolute; left:0px; width:200px; border:1px solid #F00}ui

section{ margin-left:200px; border:1px solid #FF0}blog

footer{ border:1px solid #0FF; position:fixed; bottom:0; left:0; height:70px; width:100%; line-height:70px; text-align:center;}ip

</style> ci

<body>rem

<div class="container">get

<nav>

<ul>

<li>Draft List</li>

<li>Hours</li>

<li>Directions</li>

<li>Contact</li>

</ul>

</nav>

<section>section s的 margin-left 樣式確保了有足夠的空間容納 nav 元素。</section>

<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velitDonec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velitDonec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit</section>

<section>注意當你調整瀏覽器窗口時發生了什麼。效果很贊！</section>

</container>

<footer>若是你使用了一個固定定位的頁眉或頁腳，確保有足夠的空間來顯示它們！我在 body 上面加了 margin-bottom</footer> <br clear="all" />

</body>