HTML页面布局技术
- 2022-12-07 10:52:05
- 731次 极悦
创建布局是设计网站时最重要的事情，因为它将确保您的网站看起来井井有条并且内容看起来易于理解。有多种技术和框架可用于创建布局，但在这里我们将学习简单的技术。您可以使用以下方法创建多列布局：
HTML表格(尽量不要用)
CSS 浮动属性
CSS框架
CSS弹性框
使用 div 布局
HTML 表格(不推荐)
基于 HTML 表格的布局是创建布局的最简单方法之一，因为表格仅使用基于行和列的格式，但不建议将 HTML 表格用于您的页面布局。
元素旨在显示表格数据。这不利于布局。虽然首先创建布局很容易，但如果您想更改或重新设计您的网站，那么这将是一项复杂的任务。
以下是使用 HTML 表格创建简单网页布局的示例。
<!DOCTYPE html>
<html>
<头>
<样式>
李{
显示：内联块；
填充：10px;}
一个{
颜色：#20b2aa；
}
</样式>
</头>
<正文>
<!-- 标题部分 -->
<table width= "100%" style= "border-collapse:collapse;" >
<tr>
<td colspan= "2" style= "背景颜色：#1a1a1a；文本对齐：居中；" >
<h3 style= "字体大小：30px；颜色：#ff6a6a；" >javaTpoint 表格布局</h3>
</td>
</tr>
<!-- 导航部分 -->
<tr>
<td colspan= "2" style= "背景色：#666666;" >
<ul>
<li><a href= "#" >首页</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About-us</a></li>
<li><a href="#">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 javaTpoint.com</strong></p>
</td>
</tr>
</table>
</body>
</html>
CSS 框架
CSS 提供了许多框架，如 W3.CSS、Bootstrap 等，可以快速创建您的布局。使用 CSS 框架，您可以轻松创建响应迅速且有吸引力的 Web 布局。你只需要为这些框架添加一个链接，你就可以使用框架中所有可用的属性。
CSS 浮动
您可以使用 CSS 浮动属性创建整个 Web 布局。
优点：非常容易学习和使用。您只需了解 float 和 clear 属性的工作原理。
缺点：浮动元素与文档流相关联，这可能会损害灵活性。
例子：
<!DOCTYPE html>
<html>
<头>
<样式>
div.容器{
宽度： 100 %；
边框：1px 纯灰色；
}
页眉页脚 {
填充：1em；
白颜色;
背景颜色：# 000080 ；
清除：离开；
文本对齐：居中；
}
导航{
浮动：左；
最大宽度：160px；
保证金： 0 ；
填充：1em；
}
导航 ul {
列表样式类型：无；
填充： 0 ；
}
导航 ul a {
文字修饰：无；
}
文章 {
左边距：170px；
左边框：1px 纯灰色；
填充：1em；
溢出：隐藏；
}
</样式>
</头>
<正文>
<div 类= "容器" >
<标题>
<h1>教程库</h1>
</标题>
<导航>
<ul>
<li><a href= "#" >HTML</a></li>
<li><a href= "#" >CSS</a></li>
<li><a href= "#" >JavaScript</a></li>
</ul>
</导航>
<文章>
<h1>HTML</h1>
<p>HTML 教程或 HTML 5 教程提供了 html 的基本和高级概念。我们的 HTML 教程是
为 初学者和专业人士 开发 。</p>
<p>TML 是超文本标记语言的 缩写 。让我们看看什么是超文本，什么是标记语言？</p>
</文章>
<footer> 版权所有 © javatpoint.com</footer>
</div>
</body>
</html>
CSS弹性盒
Flexbox 是 CSS3 中一种新的布局模式。
优点：确保页面布局必须适应不同的屏幕尺寸和不同的显示设备。
缺点：它在 IE10 及更早版本中不起作用。
例子：
<!DOCTYPE html>
<html>
<头>
<样式>
.flex容器{
显示：-webkit-flex；
显示：弹性；
-webkit-flex-flow：行换行；
弹性流：行换行；
文本对齐：居中；
}
.flex 容器 > * {
填充：15px；
-webkit-flex: 1 100 %;
弹性： 1 100 %；
}
。文章 {
文本对齐：左；
}
标题{背景：# 000080 ；颜色：白色；}
页脚{背景：# 000080 ；颜色：白色；}
.nav {背景：#eee;}
.nav ul {
列表样式类型：无；
填充： 0 ；
}
.nav ul a {
文字修饰：无；
}
@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 ;}
页脚 {-webkit-order: 3 ;order: 3 ;}
}
</样式>
</头>
<正文>
<div class = "弹性容器" >
<标题>
<h1>展城馆</h1>
</标题>
<导航 类= “导航” >
<ul>
<li><a href= "#" >HTML</a></li>
<li><a href= "#" >CSS</a></li>
<li><a href= "#" >JavaScript</a></li>
</ul>
</导航>
<文章 类= “文章” >
<h1>HTML</h1>
<p>HTML 教程或 HTML 5 教程提供了 html 的基本和高级概念。我们的 HTML 教程是
为 初学者和专业人士 开发 。</p>
<p>TML 是超文本标记语言的 缩写 。让我们看看什么是超文本，什么是标记语言？</p>
<p><strong>调整 页面大小看看会发生什么！</strong></p >
</文章>
<footer> 版权所有 © javatpoint.com</footer>
</div>
</body>
</html>
使用 div 布局
<!DOCTYPE html>
<html>
<头>
<title>使用div的网页</title>
<样式>
身体{
边距：0px；
}
.header{
填充：10px；
背景色：#455e64；
文本对齐：居中；
}
.header h2{
颜色：黑色; }
/*===============[导航 CSS]==========*/
导航{
背景色：# 243238 ；
填充：5px；
}
.nav li{
列表样式：无；
显示：内联块；
填充：8px；
}
.导航{
颜色：#fff；
}
.nav ul li a:hover{
文字修饰：无；
颜色：#7fffd4；
}
.lside{
浮动：左；
宽度： 80 %；
最小高度：440px；
背景色：#f0f8ff；
文本对齐：居中；
}
.rside
{
文本对齐：居中；
浮动：对；
宽度： 20 %；
最小高度：440px；
背景色：#c1cdcd；
}
.页脚{
高度：44px；
背景色：#455e64；
文本对齐：居中；
填充顶部：10px;}
.页脚 p{
颜色：#8fbc8f；
}
</样式>
</头>
<正文>
<分区>
<div 类= "标题" >
<h2>javaTpoint Div 布局</h2>
</div>
<!-- 导航 -->
<div 类= "导航" >
<ul>
<li><a href= "#" >首页</a></li>
<li><a href= "#" >菜单</a></li>
<li><a href= "#" >关于</a></li>
<li><a href= "#" >联系方式</a></li>
<li style= "浮动：右；" ><a href= "#" >登录</a></li>
<li style= "浮动：右；" ><a href= "#" >注册</a></li>
</ul>
</div>
<!-- 主要 -->
<div style= "height:440px" >
<div class = "lside" >
<p>在这里写你的内容</p>
</div>
<!-- 边 -->
<div class = "rside" >
<p>这是侧面</p>
</div>
</div>
<!-- 页脚 -->
<div 类= "页脚" >
<p>©<strong>版权所有 javaTpoint.com</strong></p>
</div>
</div>
</body>
</html>
以上就是关于“HTML页面布局技术”的介绍，大家如果想了解更多相关知识，不妨来关注一下本站的HTML教程，里面还有更丰富的知识等着大家去学习，希望对大家能够有所帮助哦。
选你想看
你适合学Java吗？4大专业测评方法
代码逻辑 吸收能力 技术学习能力 综合素质
先测评确定适合在学习
在线申请免费测试名额
价值1998元实验班免费学
价值1998元实验班免费学
在线咨询
免费试学