三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 多列样式布局 -> 正文阅读
 

[Html-Css]多列样式布局

多列样式布局 效果图如下:

代码如下:

  1 <!DOCTYPE html>
  2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3     <meta charset="UTF-8">
  4     <title>Document</title>
  5     <style>
  6         * {
  7             margin: 0;
  8             padding: 0;
  9         }
 10         h2 {
 11             margin: 20px 0;
 12         }
 13         .left1 {
 14             width: 200px;
 15             height: 100px;
 16             green;
 17         }
 18         .right1 {
 19             width: 60%;
 20             height: 100px;
 21             red;
 22         }
 23         .left2 {
 24             width: 200px;
 25             height: 100px;
 26             green;
 27             display: inline-block;
 28         }
 29         .right2 {
 30             width: 60%;
 31             height: 100px;
 32             red;
 33             display: inline-block;
 34         }
 35         .left3 {
 36             width: 200px;
 37             height: 100px;
 38             float: left;
 39             green;
 40         }
 41         .right3 {
 42             width: 60%;
 43             height: 100px;
 44             float: right;
 45             red;
 46         }
 47         .mainL, .sitebarL, .mainR, .sitebarR {
 48             height: 200px;
 49             /*font: bolder 20px/200px '微软雅黑';*/
 50             color: #fff;
 51             text-align: center;
 52         }
 53         .mainL {
 54             width: 100%;
 55             float: left;
 56         }
 57         .mainR {
 58             width: 100%;
 59             float: right;
 60         }
 61         .mainL .contentL {
 62             height: 100%;
 63             margin-right: 200px;
 64             red;
 65         }
 66         .mainR .contentR {
 67             height: 100%;
 68             margin-left: 200px;
 69             red;
 70         }
 71         .contentLR {
 72             height: 100%;
 73             margin-left: 200px;
 74             margin-right: 200px;
 75             red;
 76         }
 77         .sitebarL {
 78             width: 200px;
 79             float: left;
 80             margin-right: -100%;
 81             green;
 82         }
 83         .sitebarR {
 84             width: 200px;
 85             float: right;
 86             margin-left: -100%;
 87             green;
 88         }
 89         .clear {
 90             width: 100%;
 91             clear: both;
 92             height: 10px;
 93         }
 94         #left {
 95                 float: left;
 96                 width: 200px;
 97                 height: 100px;
 98                 green;
 99         }
100  
101         #contentL {
102             height: 100px;
103             red;
104             margin-left: 200px;/*==等于右边栏宽度==*/
105         }
106         #right {
107             float: right;
108             width: 200px;
109             height: 100px;
110             green;
111         }
112  
113         #contentR {
114             height: 100px;
115             red;
116             margin-right: 200px;/*==等于左边栏宽度==*/
117         }
118         #contentLR {
119             height: 100px;
120             red;
121             margin: 0 200px;
122         }
123         .cont {
124             overflow: hidden;
125         }
126     </style>
127 </head>
128 <body>
129     <h2>普通文档布局</h2>
130     <div class="left1">Left</div>
131     <div class="right1">Right</div>
132     <div class="clear"></div>
133  
134  
135     <h2>行内布局使用inline-block</h2>
136     <div class="left2">Left</div>
137     <div class="right2">Right</div>
138     <div class="clear"></div>
139  
140  
141     <h2>浮动布局float</h2>
142     <div class="left3">Left:<br>
143         width: 200px;<br>
144         height: 100px;<br>
145         float: left;<br>
146         green;
147     </div>
148     <div class="right3">Right<br>
149         width: 60%;<br>
150         height: 100px;<br>
151         float: right;<br>
152         red;
153     </div>
154     <div class="clear"></div>
155  
156  
157     <h2>浮动布局float+margin正边距与多列布局</h2>
158     <h3>两列</h3>
159     <div id="left">
160             Left Sidebar<br>
161             float: left;<br>
162             width: 200px;<br>
163             height: 100px;<br>
164             green;<br>
165     </div>
166     <div id="contentL">
167         height: 100px;
168             red;
169             margin-left: 200px;/*==等于左边栏宽度==*/
170         <div id="contentInner">
171             Main Content
172         </div>
173     </div>
174     <div class="clear"></div>
175     <div id="right">
176         Right Sidebar<br>
177         float: right;<br>
178         width: 200px;<br>
179         height: 100px;<br>
180         green;
181     </div>
182     <div id="contentR">
183         height: 100px;
184             red;
185             margin-right: 200px;/*==等于右边栏宽度==*/
186         <div id="contentInner">
187             Main Content
188         </div>
189     </div>
190     <div class="clear"></div>
191     <h3>三列</h3>
192     <div id="left">
193         Left Sidebar<br>
194         float: left;<br>
195         width: 200px;<br>
196         height: 100px;<br>
197         green;<br>
198     </div>
199     <div id="right">
200         Right Sidebar<br>
201         float: right;<br>
202         width: 200px;<br>
203         height: 100px;<br>
204         green;
205     </div>
206     <div id="contentLR">
207         <div id="contentInner">
208             Main Content<br>
209             height: 100px;<br>
210             red;<br>
211             margin: 0 200px;<br>
212         </div>
213     </div>
214  
215  
216     <h2>浮动布局float+margin负边距与多列布局</h2>
217     <h3>两列</h3>
218     <div class="sitebarL">
219         <h4>左侧定宽200px区块</h4>
220         <p>width: 200px;
221             float: left;
222             margin-right: -100%;
223             green;
224         </p>
225     </div>
226     <div class="mainR">
227         <div class="contentR">
228             <h4>右侧主体自适应区块</h4>
229             <p>.mainR:width: 100%;
230             float: right;</p>
231             <p>.contentR:height: 100%;
232             margin-left: 200px;
233             red;
234             </p>
235         </div>
236     </div>
237     <div class="clear"></div>
238     <div class="mainL">
239         <div class="contentL">
240             <h4>左侧主体自适应区块</h4>
241             <p>.mainL:width: 100%;
242             float: left;</p>
243             <p>.contentL:height: 100%;
244             margin-right: 200px;
245             red;</p>
246         </div>
247     </div>
248     <div class="sitebarR">
249         <h4>右侧定宽200px区块</h4><h4>
250         <p>width: 200px;
251             float: right;
252             margin-left: -100%;
253             green;
254         </p>
255     </h4></div>
256     <div class="clear"></div>
257     <h3>三列</h3>
258     <div class="sitebarL">
259         <h4>左侧定宽200px区块</h4>
260         <p>width: 200px;
261             float: left;
262             margin-right: -100%;
263             green;
264         </p>
265     </div>
266     <div class="mainL">
267         <div class="contentLR">
268             <h4>主体自适应区块</h4>
269             <p>.mainR:width: 100%;
270                 float: left;
271             </p>
272             <p>.contentLR:height: 100%;
273                 margin-left: 200px;
274                 margin-right: 200px;
275                 red;
276             </p>
277         </div>
278     </div>
279     <div class="sitebarR">
280         <h4>右侧定宽200px区块</h4><h4>
281         <p>width: 200px;
282             float: right;
283             margin-left: -100%;
284             green;
285         </p>
286     </h4></div>
287     <div class="clear"></div> 
288 </body></html>

  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
Bootstrap学习(3)
HTML常用标签
HTML与CSS入门——第五章 使用文本块和列
css书写步骤
上一篇文章      下一篇文章      查看所有文章
加:2016-02-24 18:37:39  更:2017-05-16 05:29:10 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年2日历
2018-2-19 16:13:17
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库