實時電商數倉（三十四）之實時計算（十三）ads層（一）ADS 聚合層
阿新 • • 發佈：2020-09-14
一、聖盃佈局
<!DOCTYPE html> <html> <!-- 聖盃佈局 標準三列布局要求： 1.兩邊固定 當中自適應 2.當中列要完整顯示 3.當中列要優先載入 --> <!-- 知識點 浮動：搭建完整的佈局框架 margin 為賦值：調整旁邊兩列的位置（是三列布局到一行上） 使用相對定位：調整旁邊兩列的位置（是兩列位置調整到兩頭） --> <head> <style> * { margin: 0; padding: 0; } #header, #footer { height: 20px; text-align: center; border: 1px solid deeppink; background-color: gray; } #content { padding: 0 200px; } #content .middle{ float: left; width: 100%; background-color: pink; } #content .left { position: relative; left: -200px; float: left; width: 200px; margin-left: -100%; background-color: yellow; } #content .right { position: relative; right: -200px; margin-left: -200px; float: left; width: 200px; background-color: yellow; } .clearfix { *zoom: 1; } .clearfix:after { /* 清楚浮動 */ content: ''; display: block; clear: both; } </style> </head> <body> <div id="header">header</div> <div id="content" class="clearfix"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> <div id="footer">footer</div> </body> </html>