左中右三栏+页眉页脚布局

其他 2018-10-30 17:41:52 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lyd0902/article/details/79391239

效果图



  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <style type="text/css">  
  7.             .wrap{  
  8.                 margin: 0 auto;  
  9.                 width: 900px;  
  10.             }  
  11.             #header{  
  12.                 height: 100px;  
  13.                 background: #2AFFE5;  
  14.             }  
  15.             #main{  
  16.                 height: 500px;  
  17.                 background: #37FFC1;  
  18.             }  
  19.             #footer{  
  20.                 height: 80px;  
  21.                 background: #22FF91;  
  22.             }  
  23.             #middle{  
  24.                 width: 100%;  
  25.                 float: left;  
  26.             }  
  27.             #left{  
  28.                 width: 200px;  
  29.                 height: 100%;  
  30.                 background: #26E8BE;  
  31.                 float: left;  
  32.                 margin-left: -100%;  
  33.             }  
  34.             #right{  
  35.                 width: 200px;  
  36.                 height: 100%;  
  37.                 background: #26E8BE;  
  38.                 float: left;  
  39.                 margin-left: -200px;  
  40.             }  
  41.             .content{  
  42.                 height: 500px;  
  43.                 margin: 0 200px;  
  44.             }  
  45.         </style>  
  46.     </head>  
  47.     <body>  
  48.         <header id="header" class="wrap"></header>  
  49.         <section id="main" class="wrap">  
  50.             <section id="middle">   
  51.                 <div class="content"></div>  
  52.             </section>  
  53.             <aside id="left"></aside>  
  54.             <aside id="right"></aside>  
  55.         </section>  
  56.         <footer id="footer" class="wrap"></footer>  
  57.     </body>  
  58. </html>  

猜你喜欢

转载自blog.csdn.net/lyd0902/article/details/79391239
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022