存在一个问题就是当屏幕缩小至一定宽度的时候，边框栏会被挤开
1 body { 2 font-family: 'Amarante', cursive; 3 background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat; 5 } 6 7 .wrapper { 8 margin: 0 auto; 9 } 11 .header-wrapper{ 12 background-color: #BD9C8C; 13 } 15 .header { 16 width: 80%; 17 background-color: #BD9C8C; 18 margin: 0 auto; 19 margin-bottom: 5px; 20 text-align: center; 21 22 } 23 24 25 .main-content-wrapper{ 26 width: 80%; 27 margin: 0 auto; 28 } 29 .main-content { 30 float: left; 31 border-left: 255px solid pink; 32 margin-bottom: 15px; 33 box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2); 34 } 38 .sidebar { 39 width: 250px; 40 float: left; 41 margin-bottom: 5px; 42 background-color: yellow; 43 margin-left: -80%; 44 margin-bottom: 15px; 45 } 46 51 .footer-wrapper{ 52 clear: both; 53 background-color: #BD9C8C; 54 } 55 .footer { 56 clear: both; 57 width: 80%; 58 margin: 0 auto; 59 margin-bottom: 5px; 60 text-align: center; 61 62 }
<!DOCTYPE html> <html lang="en"> <head> <meta charest="utf-8" /> <!--空格以及斜杠是可选的--> <title>test</title> <link rel="stylesheet" type="text/css" href="css/test1.css"> </head> <body> <header class="header-wrapper"> <div class="header"> <h1>Header content</h1> </div> </header> <main class="container"> <div class="main-content-wrapper"> <section class="main-content"> <h2>定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体，可以导致段落断开的标签（例如标题、 和 标签）绝不能包含在所定义的块里,pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线 <br><br><br><br><br><br><br><br><br><br><br><br><br></h2> </section> </div> <aside class="sidebar"> <h2>Sidebar Content</h2> </aside> </main> <footer class="footer-wrapper"> <div class="footer"> <h2>Footer Content</h2> </div> </footer> </body> </html>
