HTML教程
HTML5教程
HTML参考手册

HTML 布局方式

HTML 布局方式

在设计网站时,创建布局是最重要的事情,因为这将确保您的网站看起来井井有条,并且内容易于显示。理解。有多种技术和可用于创建布局的框架,但是在这里我们将学习简单的技术。您可以使用以下方法创建多列布局:
HTML表格(尽量不要使用) CSS float属性 CSS框架 CSS flexbox 使用div布局

HTML表格(不推荐)

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

示例:

<!DOCTYPE html>
<html>
<head>
<style>
li{
display: inline-block;
padding: 10px;}
a{
color:#20b2aa;
}
</style>
</head>
<body>
<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;">javaTpoint Table-layout</h3>
</td>
</tr>
<!-- 导航部分 -->
<tr>
<td colspan="2" style="background-color:#666666;">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</td>
</tr>
<!-- 主要部分 -->
<tr>
<td style="background-color:#e6e6fa; width:80%; height: 400px; text-align: center;">
<p>在这里写您的内容</p>
</td>
<td style="background-color:#a7e6fb; height: 400px;">
<p>这是侧边栏</p>
</td>
</tr>
<!-- 页脚部分 -->
<tr>
<td colspan="2" style="background-color:#2e2e2e; text-align: center;">
<p style="color:#f08080">©<strong>Copyright lidihuo.com</strong></p>
</td>
</tr>
</table>
</body>
</html>
注意:该示例仅用于演示如何使用表格创建布局,但不建议使用表格布局。

CSS框架

CSS提供了许多框架,例如W3.CSS,Bootstrap等,可以快速创建布局。使用CSS框架,您可以轻松创建具有响应性和吸引力的Web布局。您只需要为这些框架添加一个链接,就可以使用框架中可用的所有属性。

CSS Float

您可以创建整个Web布局使用CSS float属性。
优点:它非常易于学习和使用。您只需了解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="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
<article>
<h1>HTML</h1>
<p>HTML教程或HTML5教程提供了html的基本和高级概念。我们的HTML教程是专为初学者和专业人士开发 。</p>
<p>HTML是其代表的首字母缩写 为 超文本标记语言。让我们看看什么是超文本和什么是标记语言?</p>
</article>
<footer>Copyright © lidihuo.com</footer>
</div>
</body>
</html>

CSS Flexbox

Flexbox是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="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
<article class="article">
<h1>HTML</h1>
<p>HTML教程或HTML 5 教程提供了html的基本和高级概念。我们的HTML教程是专为初学者和专业人士开发 。</p>
<p>HTML是其代表的首字母缩写 为 超文本标记语言。让我们看看什么是超文本和什么是标记语言?</p>
<p><strong>调整此 页面的大小 以查看会发生什么!</strong></p>
</article>
<footer>Copyright © lidihuo.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>Div布局</h2>
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
<li style="float: right;"><a href="#">登录</a></li>
<li style="float: right;"><a href="#">注册</a></li>
</ul>
</div>
<!-- main -->
<div style="height:440px">
<div class="lside">
<p>在此处写内容</p>
</div>
<!-- 侧边 -->
<div class="rside">
<p>这是一个侧边</p>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<p>©<strong>Copyright lidihuo.com</strong></p>
</div>
</div>
</body>
</html>
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4