HTMLdiv标签

HTML div 标签是网页中的重要基础元素,透过 DIV 标签可以在网页中创造各个不同的区块,每个区块内还可以增加更小的区块,设计师也可以利用 HTML div 区块来进行排版,对网络浏览器来说,每组 HTML div 标签都是一个区块级元素,基本会占用掉一整行的空间,当然设计师也可以透过 div 的属性设置来调整这个部份,现在的 div 属性设置都是采用 CSS 来设计。

HTML div 标签区块的基础语法

<div id=”自订” class=”自订” style=”自订”>区块内容</div>

一组标准的 HTML div 区块是由一个开头 <div> 标签与一个结束 </div> 标签所组成,其间背包起来的部份就是区块内容,可以是文字、图片、影片、框架 … 等网页内容,开头的 <div> 区块内可以设置 id、class 或直接开始一段样式设计,也就是 style 的部份。

HTML div 标签应用示例一、设计一个有边框的 div 标签区块

<div style="border:2px orange solid;">这是个有橘色边框的 HTML div</div>

示例的输出结果

这是个有橘色边框的 HTML div

这个示例相当简单,就是在开头的 <div> 标签内使用 style 来声明一段 CSS 的样式语法,border 就是用来设计元素边框的标准语法,我们设计的是一个橘色的粗实线边框,是不是非常简单呢?关于边框设计请参阅:CSS border 边框。

HTML div 标签应用示例二、设计一个有背景颜色的 div 标签区块

<div style="background-color:pink;">这是个有粉红色背景色的 HTML div</div>

示例的输出效果

这是个有粉红色背景色的 HTML div

示例二也相当简单,只是把示例一的 border 改成用来设计元素背景颜色的 background-color 属性而已,这是非常普遍的 div 背景颜色设计技巧,通常会用 16 位元的色码来调整颜色。

找更多美丽的颜色 → 色码表。
背景颜色属性用法 → CSS background-color 背景颜色

继续我们的下一个示例。

HTML div 标签应用示例三、两个包在一起的区块

<div style="border:2px orange solid;padding:15px;">
<div style="background-color:pink;">这是个有粉红色背景色的 HTML div</div>
</div>

示例的输出效果

这是个有粉红色背景色的 HTML div

示例三等于是结合了示例一与示例二的结果,我们把示例二的粉红色 HTML div 标签组整个放在示例一的橘色边框 div 区块内,为了让示例呈现更清楚,我们在外围的橘色大 div 区块内增加了内距属性,也就是 padding,让两个 div 区块不要黏在一起,从示例的输出结果可以看到这漂亮的两个区块。

除了以上的三个示例之外,其实 HTML div 标签还有很多的应用方式,第一段也提到了可以用来排版,绝大多数的应用都会搭配 CSS 语法设计,这也是 div 区块在未来应用的主流。

延伸阅读

CSS DIV 文字字体设计
CSS DIV 文字颜色设计
CSS DIV 背景图片
CSS DIV 背景颜色
CSS DIV 三栏式网页排版设计
CSS DIV 两栏式网页排版
CSS DIV 单栏式网页排版

网页设计

HTMLRadioButtons选项按钮

2022-6-22 19:27:00

网页设计

PHPstripcslashes

2022-6-23 0:33:45



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 yp10086@vip.qq.com 举报,一经查实,本站将立刻删除。

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索