HTML网页-页面布局

Posted HX花惜 iT TB

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML网页-页面布局相关的知识,希望对你有一定的参考价值。

页面布局

一.盒模型

1. 所谓盒模型,就是浏览器为页面中的每个html元素(标签)生成的矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。可见的板式模型主要由三个属性控制

(1) position属性:position属性控制页面上元素间的位置关系。

(2) display属性:display属性控制元素是堆叠、并排或者不在页面上显示。

(3) float属性:float属性提供控制的方法,以便于把元素组成成多栏布局。

2. 所谓盒模型顾名思义就是盒子,这个盒子叫盒模型,也叫元素,也可以叫标签。

3. 那么盒子的作用呢,肯定是用来装东西的,代码盒子可以装图片,装字,装链接,还有就是可往盒子里面装盒子。

4. 我们看一下一个网页是如何用盒子堆起来的。这张图片是一个已完成的网页(这只是一部分)。

 

注意:如有侵权,请联系删除,谢谢!

5. 上面的网页就是由各个盒子堆起来的,下面这张图对盒子做了简易的划分。

HTML网页-页面布局

6. 不管多难多简单的页面都是由一个个大小不一的盒子堆叠而成。我觉得我划分得还是可以的。要是每个盒子堆得好看,就要用到上面所说的三大属性了position定位),display指定生成的框类型,

Float(浮动)。

 

 

 

二.向页面添加一个盒子(元素)

1. HTML中有非常多的元素,最常用的就是div元素,也就是div标签。

2. 在之前的创建好的HTML文件中添加一个div元素(盒子)。

3.我使用的编程工具是Adobe Dreamweaver CC 2019

 

代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<!--网页名-->

<title>演示</title>

<!--网页logo-->

<link href="../Img/a2.png" rel="shortcut icon" type="image/x-icon" />

</head>

 

<body>

<div>

我是一个div盒子

</div>

</body>

</html>

 

图示:

 

HTML网页-页面布局

 

效果:

 

HTML网页-页面布局

 

3. 接下来给这个盒子设置一下大小和加一个边框。

代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<!--网页名-->

<title>演示</title>

<!--网页logo-->

<link href="../Img/a2.png" rel="shortcut icon" type="image/x-icon" />

</head>

 

<body>

<div style="width:200px;height:100px;border:2px solid #FF6C6E;">

我是一个div盒子

</div>

</body>

</html>

 

图示:

 

HTML网页-页面布局

 

效果:

HTML网页-页面布局

这样子就把盒子的长度,高度,边框 给设置好了。是不是感觉非常简单呢!

属性说明:

(1)width:指定元素的长度,单位为:px(像素)或 %(百分比)

(2)Height:指定元素的高度,单位为:px(像素)或 %(百分比)

(3)Border:指定元素的边框:2px(边框的大小),单位为:px(像素)

 solid (指定边框为实线)

 #FF6C6E (颜色值)

 

 

4. 我们再给元素加上背景图片

 

代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<!--网页名-->

<title>演示</title>

<!--网页logo-->

<link href="../Img/a2.png" rel="shortcut icon" type="image/x-icon" />

</head>

 

<body>

<div style="width:400px;height:300px;border:2px solid #FF6C6E;background-image: url(../Img/a2.png);background-size: cover;">

我是一个div盒子

</div>

</body>

</html>

 

图示:

 

 

效果:

 

这里我调整了元素的大小,为了让背景图片显示得跟和谐。

属性说明:

(1)background-image:设置元素的背景图片,Url指的是图片的路径

(2)background-size: 规定背景图片的尺寸cover(让图片始终占满整个背景)

 

注意:写完每个属性后必须加一个英文状态的:分号,分号的作用是将每个属性分开,代码里的符号都是英文状态的哦,这是一种规范。所以好习惯要养成。


以上是关于HTML网页-页面布局的主要内容,如果未能解决你的问题,请参考以下文章

如何利用EasyUI框架控制页面布局

网页搜索页面排版布局

android一个页面可以有几种布局方法吗

html5里面新增的用于网页布局的标签都有哪些

HTML页面布局问题

网页布局方法