菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> * {box-sizing:border-box;} .gridwrapper {overflow:auto;position:relative;height:250px;} .gridcontent {width:8.33%;margin:0;xborder-left:1px solid grey;border-right:1px solid grey;height:100%;float:left;background-color:#84c754;background-color:#f1f1f1; } </style> </head> <body> <div style="position:absolute;opacity:0.9;width:auto;left:8px;right:10px;"> <div class="gridcontainer"> <div class="gridwrapper" style="height:90px;"> <div class="gridcontent" style="width:100%;background:#9933cc;border-right-color:transparent;"> </div> </div> <div class="gridwrapper" style="height:230px;"> <div class="gridcontent" style="background-color:#ffffff;border:none;width:25%;padding-top:15px;"> <div style="background-color:#33b5e5;border:none;width:100%;height:15%;margin-bottom:10px;"></div> <div style="background-color:#33b5e5;border:none;width:100%;height:15%;margin-bottom:10px;"></div> <div style="background-color:#33b5e5;border:none;width:100%;height:15%;margin-bottom:10px;"></div> <div style="background-color:#33b5e5;border:none;width:100%;height:15%;"></div> </div> <div class="gridcontent" style="background-color:#ffffff;border:none;"></div> <div class="gridcontent" style="background-color:#ffffff;border:none;"></div> <div class="gridcontent" style="background-color:#ffffff;border:none;"></div> <div class="gridcontent" style="background-color:#ffffff;border:none;"></div> <div class="gridcontent" style="background-color:#ffffff;border:none;"></div> <div class="gridcontent" style="background-color:#ffffff;border:none;"></div> <div class="gridcontent" style="background-color:#ffffff;border:none;width:25%;padding-top:15px;"> <div style="background-color:#33b5e5;border:none;width:100%;height:92%;"></div> </div> </div> <div class="gridwrapper" style="height:50px;"> <div class="gridcontent" style="width:100%;background:#0099cc;border-right-color:transparent;"> </div> </div> </div> </div> <div class="gridcontainer" style="opacity:0.1;"> <div class="gridwrapper" style="height:370px;"> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;border-left:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> <div class="gridcontent" style="background-color:#ffffff;border-right:1px solid #000000;"></div> </div> </div> <p>重置浏览器窗口大小网格会自动伸缩。</p> </body> </html>
运行结果