编写 HTML/CSS 代码,实现如下布局。注:如能实现 left bar、content、right bar 的高度,自适应为三者的最高高度,可享额外加分
<!DOCTYPE html>
<html lang="en">
<head>
<title>布局</title>
<style>
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
width: 100%;
background-color: #7ecef3;
}
/*使用absolute 单位实现高度自适应*/
#conent {
width: 100%;
position: absolute;
display: flex;
top: 100px;
bottom: 100px;
}
#left {
width: 200px;
/*height: 200px;*/
background-color: #89c997;
}
#right {
width: 200px;
/*height: 200px;*/
background-color: #89c997;
}
#middle {
flex: 1;
background-color: #53b9be;
}
#footer {
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
background-color: #7ecef3;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="conent">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> header, footer { height: 200px; background: #7ecef3; } main{ height: 500px; display: flex; } main .left, main .right { width: 200px; height: 100%; background: #89c997; } .main { flex: 1; } </style> </head> <body> <header>Header</header> <main> <div class="left">Left Bar</div> <div class="main">Content</div> <div class="right">Right Bar</div> </main> <footer>Footer</footer> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三栏布局</title> <style> html, body { margin: 0; padding: 0; height: 100%; } .tb { height: 100px; background-color: #7ecef3; } .container { display: flex; height: 100%; } .left, .right { width: 200px; height: 100%; background-color: #89c997; } .main { flex:1; height: 100%; background-color: #53b9b3; } </style> </head> <body> <div class="tb">Header</div> <div class="container"> <div class="left">Left Bar</div> <div class="main">Main</div> <div class="right">Right Bar</div> </div> <div class="tb">Footer</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .header { background-color: #7ecef3; width: 100%; height: 100px; } .box { display: flex; justify-content: center; } .left { float: left; width: 200px; background-color: #89c997; } .right { float: right; width: 200px; background-color: #89c997; } .content { height: 300px; /* 其他自适应为最高 */ width: 100%; background-color: #53b9be; } .footer { background-color: #7ecef3; width: 100%; height: 100px; } </style> </head> <body> <div class="header"> header </div> <div class="box"> <div class="left"> left </div> <div class="content"> content </div> <div class="right"> right </div> </div> <div class="footer"> footer </div> <script> </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript"> window.onload = function () { } /* var arr0=["a","b","c","d","e"]; var newArr=arr0.slice(1,3); alert(newArr); alert(arr0);*/ var arr0=["a","b","c","d","e"]; //arr0.reverse(); </script> <style type="text/css"> * { margin: 0; padding: 0; } #header{ background-color: (1870)#7ecef3; width: 100%; height: 100px; } .mainContent { width: 100%; position: absolute; display: flex; top: 100px; bottom: 100px; } .left { width: 200px; /*height: 200px;*/ background-color: #89c997; } .right { width: 200px; /*height: 200px;*/ background-color: (1871)#89c997; } .middle { flex: 1; background-color: #53b9be; } .footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: (1872)#7ecef3; } </style> </head> <body> <div id="header"></div> <div class="mainContent"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局自适应</title> <style> html, body { width: 100%; height: 100%; margin: 0; border: 0; } header, footer { width: 100%; height: 100px; background-color: #7ecef3; } main { width: 100%; min-height: calc(100% - 200px); /*设置最小高度,当内容过少时高度为整个页面减去头尾,当内部某个高度过高则会撑开,实现高度自适应为三者的最高高度*/ display: flex; } main #leftBar, main #rightBar { width: 200px; background-color: #89c997; } main #content { background-color: #53b9be; flex: 1; } </style> </head> <body> <header></header> <main> <div id="leftBar"></div> <div id="content"></div> <div id="rightBar"></div> </main> <footer></footer> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> *{ padding: 0px; margin: 0px; } #centerContent{ display: flex; flex-flow: row nowrap; } #id2{ flex-grow: 1; } .side{ flex-grow: 0; height: 500px; } </style> <body> <div style="width: 100%; background-color: #7ecef3; height: 80px;"></div> <div id="centerContent"> <div id="id1" class="side" style="background-color: #89c997; width: 200px;"></div> <div id="id2" style="background-color: #53b9be;" ></div> <div id="id3" class="side" style="background-color: #89c997; width: 200px;"></div> </div> <div style="width: 100%; background-color: #7ecef3; height: 80px;"></div> <script> </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no, email=no" /> <title>Title</title> </head> <style> html,body{ margin: 0; height: 100%; } header{ position: relative; background-color: aqua; width: 100%; height: 100px; } footer{ position: absolute; bottom: 0; background-color: beige; width: 100%; height: 100px; } .container{ display: flex; overflow: hidden; } .left,.right{ width: 200px; padding-bottom: 2000px; margin-bottom: -2000px; background-color:darkgoldenrod; } .middle{ height: 200px; width: 100%; background-color: chartreuse; flex: 1 1 auto; } </style> <body> <header></header> <div class="container"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div> <footer></footer> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <div class="Header" style="background-color: #7ecef3;width: 100%;height: 150px;"> <h1 style="line-height: 150px;text-align: center;">Header</h1> </div> <div class="contain" style="width:100%"> <div class="Left Bar" style="background-color: #89c997;width: 200px;height: 450px;float: left;"> <h1 style="line-height: 450px;text-align: center;">Left Bar</h1> </div> <div class="Content" style="background-color: #53b9be;height: 450px;width: auto;float: left;"> <h1 style="line-height: 450px;text-align: center;">Content</h1> </div> <div class="Right Bar" style="background-color:#89c997;width: 200px;height: 450px;float: right;"> <h1 style="line-height: 450px;text-align: center;">Right Bar</h1> </div> </div> <div class="Footer" style="background-color: #7ecef3;width:100%;height:100px;float: left;"> <h1 style="line-height: 100px;text-align: center;">Footer</h1> </div> </body> </html>
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="flexbox"> <div class="head"> </div> <div class="main"> <div class="leftbar"> </div> <div class="content"> </div> <div class="rightbar"> </div> </div> <div class="footer"> </div> </div> </body> <style media="screen"> html, body { height: 100%; padding: 0; margin: 0; } .flexbox { height:100vh; display:flex; flex-flow: column nowrap; } .head, .footer { height: 20%; width: 100%; background-color: #7ecef3 } .main { display: flex; flex-grow: 1; width: 100% } .leftbar { width: 200px; background-color: #89c997 } .content { flex-grow: 1; background-color: #53b9be; } .rightbar { width: 200px; background-color: #89c997; } </style> </html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><style>html *{padding: 0;margin: 0;}#Header{background-color:#7ecef3;text-align: center;}#container{width: 100%;overflow: hidden;}#LeftBar{background-color:#89c997;float: left;width: 200px;}#Content{width: auto;float:left;background-color: #53b9be;}#RightBar{background-color:#89c997;float:right;width:200px;}#Footer{background-color:#7ecef3;}</style><body><div id="Header">Header</div><div id="container"><div id="LeftBar">Left Bar 定宽200px</div><div id="Content">Content 自适应宽度</div><div id="RightBar">Right Bar 定宽200px</div></div><div id="Footer">Footer</div></body></html>