html-v12.25+课堂小练习-布局左固定右自适应
2015-12-26 12:15
615 查看
存在一个问题就是当屏幕缩小至一定宽度的时候，边框栏会被挤开
1 body {
font-family: 'Amarante', cursive;
background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;
}
.wrapper {
margin: 0 auto;
}
.header-wrapper{
background-color: #BD9C8C;
}
.header {
width: 80%;
background-color: #BD9C8C;
margin: 0 auto;
margin-bottom: 5px;
text-align: center;
}
.main-content-wrapper{
width: 80%;
margin: 0 auto;
}
.main-content {
float: left;
border-left: 255px solid pink;
margin-bottom: 15px;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.sidebar {
width: 250px;
float: left;
margin-bottom: 5px;
background-color: yellow;
margin-left: -80%;
margin-bottom: 15px;
}
.footer-wrapper{
clear: both;
background-color: #BD9C8C;
}
.footer {
clear: both;
width: 80%;
margin: 0 auto;
margin-bottom: 5px;
text-align: center;
}<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 