HTML 布局

网页布局对改善网站的外观非常重要。请慎重设计您的网页布局。

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。css 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

虽然我们可以使用html table 标签来设计出漂亮的布局，但是 table 标签是不建议作为布局工具使用的 - 表格不是布局工具。??
html 布局 - 使用 <div> 元素
<div> 元素是用于分组 HTML 元素的块级元素

下面的范例使用了五个 div 元素来创建多列布局
<!DOCTYPE?html>?
< Meta ?charset="utf-8">?
<div?id="container"?style="width:500px">

<div?id="header"?style="background-color:#FFA500;">
<h1?style="margin-b ott om:0;">主要的网页 标题 </h1></div>

<div?id="menu"?style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b> 菜单 </b><br>
HTML<br>css<br>JavaScript</div>

<div?id="content"?style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
 内容  在这里 </div>

<div?id="footer"?style="background-color:#FFA500;clear:both;text-align:center;">
版权?F2er.com</div>
</div>
上面的 HTML 代码会产生如下结果

HTML 布局 - 使用表格
使用 HTML <table> 标签是创建布局的一种简单的方式

大多数站点可以使用 <div> 或者 <table> 元素来创建多列

CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观
虽然我们可以使用 HTML table 标签来设计出漂亮的布局，但是 table 标签是不建议作为布局工具使用的
表格不是布局工具

下面的范例使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列
<!DOCTYPE?html>
< Meta ?charset="utf-8">?
<table?width="500"?border="0">
<tr>
<td?colspan="2"?style="background-color:#FFA500;">
<h1>主要的网页 标题 </h1>
</td>
</tr>

<tr>
<td?style="background-color:#FFD700;width:100px;">
<b> 菜单 </b><br>
HTML<br>
CSS<br>JavaScript</td>
<td?style="background-color:#eeeeee;height:200px;width:400px;">
 内容  在这里 </td>
</tr>

<tr>
<td?colspan="2"?style="background-color:#FFA500;text-align:center;">
版权F2er.com</td>
</tr>
</table>
效果基本同上。

HTML 布局 - 有用的提示
使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护

通过编辑单一的文件，就可以改变所有页面的布局

HTML 布局的几种方式
1.浮动

2.定位

3.分栏布局

　　column-count：auto | 整数；---控制栏数

　 ??column-width： auto | length；---每栏的宽度

? ? ? column-gap : length ;--- 两栏之间的间距

? ? ? column-rule : 宽度，线型，颜色；---栏与栏的间隔线类似border，solid | d ott ed | dashed 实线 | 点线 | 虚线

? ? ?column-width和column-count可以让一个元素进行多列布局 column-gap和column-rule就处在相邻两列之间

例子:
<div?class="con">
????<h1>大数据下个人隐私的保护分析与研究</h1>
????<div>
????????一堆 内容 
????</div>
??</div>
css
.con{
????width:?600px;
????column-count:?3;?分几栏
????column-gap:?10px;?每栏之 间的 距离
????column-rule:?3px?d ott ed?red;?栏目之 间的 线

??}
??.con?h1{
????-webkit-column-span:?all;? 标题 是否跨栏 显示 
??}
4.弹性布局

　　优点：

　　　　　1 适应性强，在做不同屏幕分辨率的界面时非常实用

　　　　　2 可以随意按照宽度、比例划分元素的宽高

　　　　　3 可以轻松改变元素的显示顺序

　　　　 ??4 弹性布局实现快捷，易维护

　　 dis play: Box ;将一个元素的子元素以弹性布局进行布局

　　 Box -orient:horizontal ?|| vertical || inherit 子元素排列方式?

　　 Box -direction: nor mal || reverse || inherit 子元素的排列顺序

　　 Box -align:start || end || center 子元素的对齐方式 (规定水平框中垂直位置或垂直框中水平位置)

　　 Box -pack: start || end || center 子元素的对齐方式(规定水平框中水平位置或垂直框中垂直位置)

　　 Box -flex:number;子元素如何分配剩余空间

　　 Box -ordinal-group:number;子元素显示顺序

例子:
??<style>
????body,html{
??????width:?100%;
??????height:?100%;
?????? dis play:?-webkit- Box ;
??????-webkit- Box -orient:vertical;
??????-webkit- Box -align:center;
??????-webkit- Box -pack:center;
????}
????.con{
??????width:?90%;
??????height:?90%;
?????? dis play:?-webkit- Box ;
??????-webkit- Box -orient:vertical;
??????border:?1px?solid?red;
????}
????.con?.head{
??????height:?200px;
?????? dis play:?-webkit- Box ;
??????-webkit- Box -orient:horizontal;
????}
????.con?.head?. logo {
??????width:?100px;
??????height:?200px;
??????background:?pink;
????}
????.con?.head?. logo Con{
??????height:?200px;
??????-webkit- Box -flex:1;
??????background:?green;
????}
????.con?.content{
??????-webkit- Box -flex:1;
??????background:?orange;
?????? dis play:?-webkit- Box ;
??????-webkit- Box -orient:horizontal;
??????-webkit- Box -direction:reverse;
????}
????.content?div{
??????width:?200px;
??????text-align:?center;
????}
????.con?.footer{
??????height:?100px;
??????background:?blue;
????}
??</style>
</head>
<body>
<div?class="con">
??<div?class="head">
????<div?class=" logo "></div>
????<div?class=" logo Con"></div>
??</div>
??<div?class="content">
????<div?class="con1">111</div>
????<div?class="con2">222</div>
????<div?class="con3">333</div>
??</div>
??<div?class="footer">
??</div>
</div>
5.响应式布局

一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本@media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等) ?and|not|only(三个关键字可以选)
??<style?media="screen">
????@media?screen?and?(max-width:600px){
??????.con{
????????background:red;
??????}
????}
????@media?screen?and?(min-width:600px)?and?(max-width:800px){
??????.con{
????????background:blue;
??????}
????}
????@media?screen?and?(min-width:800px){
??????.con{
????????background:green;
??????}
????}
????.con{
??????width:?100%;
??????height:?100px;
????}
??</style>
</head>
<body>
??<div?class="con">

??</div>
</body>
查看更多关于HTML 布局的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did91834

更新时间：2022-10-19 阅读：43次