如何使用H5进行网页布局在线视频

上节课我们学习了

在网页中如何使用文本

进行格式化

以及认识了什么是块级元素

和行内元素的概念

在本节课中我们来讲一下

在网页制作中如何使用h5

进行网页布局

在h5程序中

网页布局主要用到的元素

分为基本布局元素

和列表布局元素

大家来看一下

这些基本布局元素

下面这个呢是

列表布局元素

主要分为无序列表 有序列表

以及定义列表

这个是布局的一个展示

这张图表示了基本布局元素的

一个排列方式

有两种写法

我们现在在代码中呢

来实现一下我们

基本布局的模型

体会一下

这些基本布局模型标签的用法

我们现在在body元素当中

输入我们的这些基本布局模型的元素

例如先在最上面

添加一个头部的盒子

这是一个头部元素

在头部元素当中

有一个title的元素

插入一个title的盒子

接下来呢是一个

导航条的盒子

这些id起什么名字都可以

根据自己的习惯来起就行

下面有一个文章的盒子

大家千万不要忘了备标签

在右侧还有一个右边框的盒子

然后最下面是一个脚步的盒子

好了 这是基本的布局

那么我们为了看出效果

把这些盒子分别加上颜色

加上一些属性

然后待会儿我们好看出效果

比如头部的这块呢我们

把它加一个颜色

加一个宽度和高度

让它的排列方式是左对齐的

流排布方式

title这块增加一个颜色

给它设成45吧

这样能看到一点header

与它是包含关系

能看到一点header的部分

float都是left

宽度

因为我们这个article和aside

都是左右结构

所以我们给它弄一个三七开吧

增加一个颜色

最后在下面footer这块

再增加一个宽度百分百

高度 颜色 float left

我们现在来看一下效果

好 这就是

我们基本布局元素的效果

现在所有的内容

可以分别放到这里面的

每一个盒子里

例如我们现在主体文章部分

我们可以再加几个元素

来看一下效果

在主体文章这个盒子里面增加

再插入一个盒子

给它增加一个颜色

好 再来看一下效果

现在这是增加了三个部分

我们这个颜色有点

跟这边重合了

我们换一个颜色

把这个换一个颜色

再把这儿设成90吧

这样比较清楚

好 现在大家看到

在我们的主体部分

当中出现了三个盒子

接下来我们就可以

把具体的内容文字

放在这三个盒子当中

这就是一个文章的主体部分

现在就是一个基本布局的应用

大家可以根据

自己的设计稿的需求

然后来看使用哪些部分

使用哪些标签

我们现在呢

来看一下列表元素

列表元素呢主要分为

无序列表 有序列表

现在我们先来看一下

无序列表怎么写

是由ul li

在ul当中增加li的列表项

li可以是多个

比如我们有四个列表项

随便给增加一些内容

现在呢就出现了四个列表项

每一个列表项前面

都是一个小圆点

这个是默认的情况

那么每一个列表项它们是并列的关系

中间没有顺序问题

所以它们是无序列表

那么我们现在可以调整的呢

是这个ul上面的type属性

我们可以改变一个

让前面变成小方块

或者还可以是一个空心圆

空心的圆圈

甚至呢还可以是一些图片

动图 gif图 都可以

大家可以试一下

那么无序列表呢

经常会在导航

或者是多个相同样式的模块

出现的时候

会非常常用

这个我们在后面的css当中

还会继续介绍

下面我们来看一下有序列表

就把ul改成ol

中间的列表项还是li

看一下效果

现在就变成1 2 3 4

这种有序的排列的一个列表项

我们可以呢给它增加一个start属性

例如start是5

可以看一下

现在每一个列表项前面的这个标记号

是从5开始的

而且是顺序的开始

我们可以改一个

例如改成10

可以看到就从10开始了

另外呢我们还可以给它增加一个

type属性

type可以是A类型的

大写字母类型的

阿拉伯数字类型的

小写字母类型的

大写罗马数字类型的

还有小写罗马数字类型的

我们随便给它加一个

例如这个大写字母类型的

看一下效果

那么现在就是从第五个

大写字母顺序排列

因为我们刚才由start

那个第五步开始的

我们可以再给它换一个

小写的罗马数字类型看一下

就是从第五个小写罗马数字类型开始

顺序排列

还可以换一个大写的罗马数字

就是大I

好 现在就是大写的罗马数字了

这就是有序列表

它呢经常会用在文档排版当中

根据我们的需要来使用

我们现在呢回到设计稿当中

来分析一下设计稿的布局结构

首先我们来看最外层的盒子

它是由这一部分

这是第二个盒子

这是第三个盒子

然后这是第四个盒子

然后每一个盒子当中呢

所有的内容都可以

在里面再嵌套盒子

像这一块就会用到一个无序列表

这一块就是一个单独的盒子

这也是单独的盒子

这也是单独的盒子

下面的布局方式也基本上是一致的

每一个元素都会是一个单独的盒子

这种模式相同的格式的按钮

也可以做成无序列表

类似这样的也会是一个无序列表

这里呢就是一些表单

好 我们现在来实现一下第一部分

好 我们现在回到编程环境的代码当中

先把最外层的四个布局的盒子

给做出来

先放四个盒子

好 我们为了看出来呢

把它们先都增加一些

背景色呀 宽度 高度

先随便加一个颜色

加一个宽度高度先设成100像素吧

把这个属性分别放到四个盒子当中

改一下颜色

这样我们就能看出四个盒子的分界线

好 看一下效果

好 现在四个盒子

就已经布到我们的网页当中了

现在我们把第一个盒子

做一下详细的布局

我们先在设计稿里

先来测量一下第一个盒子的高度

宽度肯定是100%吗

然后测量一下它的高度

用选择工具

可以来勾一下第一个盒子的高度

在右侧呢会出现它的宽高的信息

像现在是917像素

那么我们第一个盒子的

高度就是917像素

我们把这个数值填到代码当中

高度917

看一下效果

那么我们现在第一个盒子的高度

就已经出现在页面当中了

那么现在第一个盒子的尺寸

是正确的

我们现在回到设计稿当中

再来看一下第一部分的布局

是怎样做的

我们可以先用辅助线

来划分一下第一部分布局的格局

根据页面上面的元素来划分一下

好 这个条是第一个盒子

然后它里面包含了小logo

还有搜索框

还有选择框的一些内容

接下来是文字这部分

文字这部分可以用图片

也可以用文字来做

咱们这里呢就用图片来做

这样比较美观

然后也比较好控制

最下面还有一个无序列表的盒子

好

整体上我们先这样布局

接下来呢我们在代码上

把这些布局给写出来

首先都是在第一个盒子当中的

因此我们都写在第一个盒子当中

先做第一个头部的这个大盒子

id还是根据自己的个人习惯

来起名字

在大盒子里面有一个logo的小图标

我们先在这里标明

是个logo的图片

这部分呢就是我们看到

在设计页当中这个搜索框

是有一个输入区域的

这个背景输入区域

所以搜索框包含了

输入区域和搜索图标

因此我们把这两个元素

做成一个盒子

是这个盒子

里面包含了一个搜索框

还有一个输入框就是背景

再往下呢就是语言这一块

这个盒子

在这个盒子里也是有

下拉显示的这部分

所以把它也做成一个盒子

里面包含了后面的元素

和前面显示的元素

我们要先把它都做出来

然后再来用代码控制它

显示还是不显示

好 我们先给它写出来

最后面呢还有一个小三角

也给写出来

好 那么我们第一条的元素就做完了

我们现在呢接着往下写

现在做第二部分

第一个header这部分已经做完了

然后做第二部分

这部分呢我们要插入一个图片

将来这块插入一个图片

文字的图片

因此我们就写一个盒子就可以了

再往下呢就要做这个无序列表

这部分

无序列表还记得怎么写吗

它是由三个列项

其中呢前面包括一个小方块

后面是一个文字

这两部分我们也加进去

然后是个文字

好了

那么我们第一个部分

整个的元素布局就已经做完了

可以试着把后面的

这几个模块的元素 布局的方式

都往代码里做一做

看看会遇到什么问题