您的位置 首页 > 数码极客

html如何给div加边框,html波浪div边框!

<div>块元素基础属性讲解

<div>元素是个有故事的元素,这个元素很早就出现在html超文本标记语言中,它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。

在我还上初中的时候,智能手机还没有出现,更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。

那时,大街小巷上有好多网吧。

那时,马云刚刚辞去工作准备创业。

那时,发送邮件的操作都会出现在计算机课程中。

那时,对页面还没有现在的跨平台要求。

那时,flashplayer大行其道。

那时,dreamwaver、flash、fireworks被称为网页三剑客!

那时,制作网页可以不用懂的html的写法!

第一次接触网页制作是在大学的专业课上,使用三剑客,通过点击软件菜单中的按钮就能制作网页,精力都放在了如何使用flash制作酷炫的交互动画上了。

那时,对html还没有深刻的认识,但是却对<table></table>这个标签有着极深的印象。

因为当时的dreamwaver通过非代码方式生成的页面都是使用<table>表格元素进行布局的!

也就是说,在移动智能设备诞生之前,在用户对页面还没有可以适应不同屏幕比例的要求前,<table>这个本来用来做表格的元素同时兼职了<div>的页面布局工作,而且把兼职干成了主业,让<div>这个专业的块元素闲置了好久。

直到智能手机,平板电脑产生后,由于对页面的跨平台显示的要求的出现(这类适应多平台的页面布局叫做响应式布局),<table>表格制作的页面在响应式布局大行其道的今天,用它布局的页面开始出现代码冗余,维护困难等诸多问题。手机端的浏览器在播放视频或其他交互动画时也不再依赖flashplayer这个给我们带来无数反感和恼火的插件。

从此,页面制作的世道变了,从不需要编程就能制作页面的三剑客,变成了必须懂得相关代码写法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢复了写代码做页面的操作方式,过去的点击加拖拽的制作方式也消失了。这让很多不懂编程和HTML等页面制作核心技术的从业人感到难受。

dreamwaver的老东家Adobe后来也尝试过推出新模式下通过界面操作来制作网页的软件,还搞出一个叫做Muse的软件,但是依旧没能撬动代码书写的方式。

这个故事在开始学习<div>和css布局之前我都会讲给学生(一群文科生)听,我只是想告诉大家,学习任何计算机技术,我们可以从简单易学的方式入手,但要有透过这种方式向下挖掘核心知识的决心和勇气!对于自己从事的工作我们不能满足于会做,还要尽量透析它的原理,这样才能在技术换代中不会被轻易淘汰。

在我研究生阶段,有一门让我终生难忘的选修课,这门课叫做《数字娱乐技术概述》,这门课既不娱乐也不概述,但是通篇都是数字,那位年轻的教授为我们透析了游戏、影视特效的核心----计算机图形学。

从此我开始学习数学。因为老师的一句话:从2000年到现在(2014)虽然各种软件层出不穷,但是计算机图形学的核心算法却几乎没什么改变。

向下挖掘虽然很难,但是有必要!与各位共勉!

下面开始今天的内容。

首先,我们将之前的"第一个页面.html"文件复制一个,叫做"块元素学习.html"。然后把<body></body>中间的内容清空。

如图:

下面,我们在<body></body>中间添加<div></div>标签。示例代码如下:

<body><div></div></body>

我们看看效果:

啦啦啦,什么都没有!

为了让大家可以看出来不同,我们为<div>添加边框属性!

我们使用style属性为<div>添加边框,style属性里的代码就是以后在CSS中使用的代码!实际上我们已经开始接触CSS的一些内容了。具体写法的讲解大家可以看这个教程,这里不再赘述。

示例代码如下:(通过style = "border-style: solid;"可以为很多元素添加边框,就不需要大家记忆或查询不同元素的不同写法,是不是很方便!)

<div style = "border-style: solid;">

效果如图:

因为里面没有内容,所以<div>的宽度是0,因此显示的就是一条直线。下面我们向<div>中添加内容。

为了看起来花哨些,加张图片吧!

示例图片

示例代码如下:

<div style = "border-style: solid;"><img src = "img/示例图片/image4.jpg"/ style = "width:50%;"></div>

大家请按照<img>中的scr自行建立文件夹和命名吧!如果您看不懂请参照《HTML元素中的属性2(路径详解)——零基础自学网页制作》

效果如下:

其中,我们也是使用了style的方式为<img>设置的宽度,这个设置方法在<div>中一样使用!

代码示例:大家注意写法,不同的属性都添加到style的双引号中即可,同时使用;隔开!

<div style = "border-style: solid; width:50%;"> <img src = "img/示例图片/image4.jpg"/ style = "width:50%;"> </div>

效果如图:

整个边框缩小了50%,图片更有趣,尺寸变成了div的50%乘以自身的50%。这个特性大家要记住。

为了方便观看,我们去掉div的width设置。同时在<div>中继续添加<div>标签。为了方便显示,我们在新的<div>中添加一段文字!

示例代码如下:

<div style = "border-style: solid;"> <img src = "img/示例图片/image4.jpg"/ style = "width:50%;"> <div> <p>学习网页制作非常有趣!</p> </div> </div>

效果如下:

如果为了美观,我们让文字到图片右边的空间中怎么做呢?

示例代码如下:

<div style = "float:right;"><p>学习网页制作非常有趣!</p></div>

我们通过为新的<div>标签中的style属性添加float(浮动)属性,同时设置为right(右)。

页面效果如图:

大家思考一下如何让图片与文字都靠在左边呢?

是不是为图片style添加float:left;同时把新<div>的float改为left?

我们试试看!

示例代码如下:

<div style = "border-style: solid;"> <img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/> <div style = "float:left;"> <p>学习网页制作非常有趣!</p> </div> </div>

页面效果:

效果完全不对,图片和文字跑到外边来了。

这是div布局中经常出现的一个问题!解决方案有点奇葩,既不是修改<img>属性也不是修改<div>属性,而是增加一组空的<div></div>标签!给这个新的空的<div>的style设置为"clear:both"即可修正。

示例代码如下:

<div style = "border-style: solid;"> <img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/> <div style = "float:left;"> <p>学习网页制作非常有趣!</p> </div> <div style = "clear:both;"></div> </div>

页面效果如下:

值得注意的是,如果您不使用<div>的话直接使用<img>和<p>,同时对两个标签的style设置为float:left,是没有问题的,只有把它们放到<div>中才会出现上面的情况。

代码如下:

<body> <img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/> <p style = "float:left;">学习网页制作非常有趣!</p> </body>

页面显示效果如下:

大家观察一下,文字也变小了。至于为什么去掉<div>之后就不会出现上面那种出框的情况,而且文字也变小的问题在以后的讲解中我们再深入探讨!

现在希望大家可以记牢这个情况和操作,更多布局问题我们会在CSS的浮动(float)的讲解中详细说明。

疫情期间,请大家少出门,不聚会,没事在家学学网页制作,即抗击疫情又提高自己!

喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“html如何给div加边框,html波浪div边框,html,div边框,html给div设置边框”边界阅读