CSS3——淘寶留白
阿新 • • 發佈：2018-11-25
做一個淘寶的留白：
當你在縮小瀏覽器頁面的時候他的內容區並沒有縮小，是留白的變小。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrapper{ height: 30px; background-color: gray; } .content{ width: 1200px; height: 30px; background-color: #0f0; margin: 0 auto;/* 上下0,左右自適應 */ } </style> </head> <body> <div class="wrapper"><!-- 背景區 --> <div class="content"></div><!-- 內容區 --> </div> </body> </html>
這樣當你在縮放的時候，縮放的是外面灰色的部分，綠色的部分始終居中。
裡面的文字就是這樣來寫了
<div>
<ul style="float: left;"></ul>
<ul style="float: right;"></ul>
</div>