超全css解决方案之CSS布局_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

超全css解决方案之CSS布局_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:45 AM

1.固定宽度的居中布局

首先我们这里探讨的是我们常用的固定宽度的居中布局，这应该是目前实战中应用的最多的了。

然后从考虑是否应用大背景上我们分为两种，一种是允许整体有一个大背景，一种是头部，中间及底部都可以平铺一个全屏的大背景。接着我们从有无边栏来讨论三种情况，一种是有左或右边栏，一种是没有边栏，最后一种就是左右边栏都存在的情况。

我们在这探讨的布局方案借鉴与drupal的主题，所以如果是学过drupal这个cms的朋友应该会比较熟悉。

2.html结构详解

我们使用html5标签，所以有必要针对ie6-8导入html5.js。然后我们设置把所有的结构都包含在一个class为page的div里面，在这里div中我们还需要加上布局的class，aside-left,aside-right,two-sides,no-side分别对应左边栏，右边栏，左右两栏，没有边栏布局,这里我们以两栏布局为例，总共包括五个区域，分别为header，left，content，right，footer区域，每个区域里面我们增加了一层class为inner的div，这个inner主要是用来辅助我们布局，默认我们inner设置了margin左右的各位10px，可以根据实际需要来覆写。

3.为什么要使用inner

我们说了这个是用来辅助我们布局的，很多时候我们布局的时候不得不考虑border及左右的margin，padding等，现在我们完全把这些抛在脑后，交给我们的inner来完成。如整个宽度为1000px，左右边栏各为200px，而内容为600px。我们以前的思想应该是左右为200px，然后中间内容就是580px（margin为10px）或560px（margin为20px），这样我们如果需要改为980px，我们又得改好几个值，然后如果我们左右边栏要加个边框，又变成了202px，或者要设置左右宽度为198px，这是多么的纠结啊。现在引入inner，我们在布局的时候直接计算宽度不需要考虑border，margin，padding什么的，然后通过对各个区域里面的inner重新覆写，不就搞定了吗。这里贴出左右两栏的 html代码供参考。具体的请看下面的demo

 1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>aside left & right demo</title> 6     <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> 7     <!--[if lt IE 9]> 8     <script src="js/html5.js" type="text/javascript"></script> 9     <![endif]-->10 </head>11 <body>12     <div class="page two-asides">13         <header id="header" class="clearfix">14             <div class="inner">15             </div>16         </header>17 18         <section id="container" class="clearfix">        19             <aside id="aside_left" class="aside">20                 <div class="inner">21                 </div>22             </aside><!--aside_left-->23 24             <section id="main">25                 <div class="inner">26                 </div>        27             </section><!--main-->28 29             <aside id="aside_right" class="aside">30                 <div class="inner">31                 </div>32             </aside><!--aside_right-->    33         </section><!--container-->34 35         <footer id="footer" class="clearfix">36             <div class="inner">37             </div>38         </footer>39     </div>40 </body>41 </html>

如果需要为header，container及footer部分各设计一个全屏的背景，上面的这个肯定是不行的了，我们可以这三个div外面再加一层wrap，而这个wrap就是全屏的。

demo: 左边栏布局右边栏布局左右两边栏布局无边栏布局

ps:原文来自www.w3cplus.com

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML行动：网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：启用Web浏览器可以显示内容May 03, 2025 am 12:03 AM

HTML的核心目的在于让浏览器理解并展示网页内容。1.HTML通过标签定义网页结构和内容，如、到、等。2.HTML5增强了多媒体支持，引入了和标签。3.HTML提供了表单元素，支持用户交互。4.优化HTML代码可提升网页性能，如减少HTTP请求和压缩HTML。

为什么HTML标签对Web开发很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）heSdefinElayout，语义和互动性。2）SemantictagsiCtagSimproveCacsibilitieAndseo.3）pose poseriblesibilityAndseoandseo.3）poser