布局左固定右自适应 

存在一个问题就是当屏幕缩小至一定宽度的时候，边框栏会被挤开

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>

 

posted @ 2015-12-26 12:15  ^^-^^-  阅读(191)  评论(0)  编辑  收藏  举报