HTML布局技术 HTML布局技术|HTML5

本文概述

HTML表格（不推荐）
CSS框架
CSS浮动
CSS Flexbox

在设计网站时, 创建布局是最重要的事情, 因为这将确保你的网站看起来井井有条, 内容易于理解。有多种技术和可用于创建布局的框架, 但是在这里我们将学习简单的技术。你可以使用以下方法创建多列布局：

HTML表格（尽量不要使用）
CSS float属性
CSS框架
CSS Flexbox
使用div布局

HTML表格（不推荐）基于HTML表的布局是创建布局的最简单方法之一, 因为表仅使用基于行和基于列的格式, 但是不建议将HTML表用于页面布局。的
【HTML布局技术】
以下是使用HTML表创建简单网页布局的示例。
例：

< !DOCTYPE html> < html> < head> < style> li{ display: inline-block; padding: 10px; } a{ color:#20b2aa; } < /style> < /head> < body> < !-- Header Section --> < table width="100%" style="border-collapse:collapse; "> < tr> < td colspan="2" style="background-color:#1a1a1a; text-align: center; "> < h3 style="font-size: 30px; color: #ff6a6a; ">srcmini Table-layout< /h3> < /td> < /tr> < !-- Nav Section --> < tr> < td colspan="2" style="background-color:#666666; "> < ul> < li>< a href="http://www.srcmini.com/#">Home< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu< /a>< /li> < li>< a href="http://www.srcmini.com/#">About-us< /a>< /li> < li>< a href="http://www.srcmini.com/#">Contact us< /a>< /li> < /ul> < /td> < /tr> < !-- Main Section --> < tr> < td style="background-color:#e6e6fa; width:80%; height: 400px; text-align: center; "> < p>Write your content Here< /p> < /td> < td style="background-color:#a7e6fb; height: 400px; "> < p>This is your side bar< /p> < /td> < /tr> < !-- Footer Section --> < tr> < td colspan="2" style="background-color:#2e2e2e; text-align: center; "> < p style="color:#f08080">?< strong>Copyright srcmini.com< /strong>< /p> < /td> < /tr> < /table> < /body> < /html>

立即测试
注意：此示例仅用于显示如何使用表格创建布局, 但不建议使用表格布局。CSS框架CSS提供了许多框架, 例如W3.CSS, Bootstrap等, 以快速创建布局。使用CSS框架, 你可以轻松创建具有响应性和吸引力的Web布局。你只需要为这些框架添加链接, 就可以使用框架中所有可用的属性。
CSS浮动你可以使用CSS float属性创建整个Web布局。
优点：非常容易学习和使用。你只需了解float和clear属性如何工作。
缺点：浮动元素与文档流相关联, 可能会损害灵活性。
例：

< !DOCTYPE html> < html> < head> < style> div.container { width: 100%; border: 1px solid gray; }header, footer { padding: 1em; color: white; background-color: #000080; clear: left; text-align: center; }nav { float: left; max-width: 160px; margin: 0; padding: 1em; }nav ul { list-style-type: none; padding: 0; }nav ul a { text-decoration: none; }article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; overflow: hidden; } < /style> < /head> < body>< div class="container">< header> < h1>Tutorials Gallery< /h1> < /header>< nav> < ul> < li>< a href="http://www.srcmini.com/#">HTML< /a>< /li> < li>< a href="http://www.srcmini.com/#">CSS< /a>< /li> < li>< a href="http://www.srcmini.com/#">JavaScript< /a>< /li> < /ul> < /nav> < article> < h1>HTML< /h1> < p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is developed for beginners and professionals.< /p> < p>TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?< /p> < /article> < footer>Copyright ? srcmini.com< /footer> < /div> < /body> < /html>

立即测试
CSS FlexboxFlexbox是CSS3中的新布局模式。
优点：它确保页面布局必须适应不同的屏幕尺寸和不同的显示设备。
缺点：在IE10及更早版本中不起作用。
例：

< !DOCTYPE html> < html> < head> < style> .flex-container { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; text-align: center; }.flex-container > * { padding: 15px; -webkit-flex: 1 100%; flex: 1 100%; }.article { text-align: left; }header {background: #000080; color:white; } footer {background: #000080; color:white; } .nav {background:#eee; }.nav ul { list-style-type: none; padding: 0; } .nav ul a { text-decoration: none; }@media all and (min-width: 768px) { .nav {text-align:left; -webkit-flex: 1 auto; flex:1 auto; -webkit-order:1; order:1; } .article {-webkit-flex:5 0px; flex:5 0px; -webkit-order:2; order:2; } footer {-webkit-order:3; order:3; } } < /style> < /head> < body>< div class="flex-container"> < header> < h1>City Gallery< /h1> < /header>< nav class="nav"> < ul> < li>< a href="http://www.srcmini.com/#">HTML< /a>< /li> < li>< a href="http://www.srcmini.com/#">CSS< /a>< /li> < li>< a href="http://www.srcmini.com/#">JavaScript< /a>< /li> < /ul> < /nav>< article class="article"> < h1>HTML< /h1> < p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is developed for beginners and professionals.< /p> < p>TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?< /p> < p>< strong>Resize this page to see what happens!< /strong>< /p> < /article>< footer>Copyright ? srcmini.com< /footer> < /div>< /body> < /html>

立即测试
使用div布局

< !DOCTYPE html> < html> < head> < title>Webpage using div< /title> < style> body{ margin:0px; } .header{ padding: 10px; background-color:#455e64; text-align: center; } .header h2{ color: black; } /*===============[Nav CSS]==========*/ .nav{ background-color:#243238; padding: 5px; }.nav li{ list-style: none; display: inline-block; padding: 8px; } .nav a{ color: #fff; }.nav ul li a:hover{ text-decoration: none; color: #7fffd4; } .lside{ float: left; width: 80%; min-height: 440px; background-color: #f0f8ff; text-align: center; } .rside { text-align: center; float: right; width: 20%; min-height: 440px; background-color:#c1cdcd; } .footer{ height: 44px; background-color:#455e64; text-align: center; padding-top: 10px; }.footer p{ color:#8fbc8f; } < /style> < /head> < body> < div> < div class="header"> < h2>srcmini Div Layout< /h2> < /div> < !-- Nav --> < div class="nav"> < ul> < li>< a href="http://www.srcmini.com/#">HOME< /a>< /li> < li>< a href="http://www.srcmini.com/#">MENU< /a>< /li> < li>< a href="http://www.srcmini.com/#">ABOUT< /a>< /li> < li>< a href="http://www.srcmini.com/#">CONTACT< /a>< /li> < li style="float: right; ">< a href="http://www.srcmini.com/#">LOGIN< /a>< /li> < li style="float: right; ">< a href="http://www.srcmini.com/#">SIGN-UP< /a>< /li> < /ul> < /div>< !-- main --> < div style="height:440px"> < div class="lside"> < p>Write your content here< /p> < /div> < !-- side --> < div class="rside"> < p>This is side< /p> < /div> < /div> < !-- footer --> < div class="footer"> < p>?< strong>Copyright srcmini.com< /strong>< /p> < /div> < /div> < /body> < /html>