看到整个页面他是满屏的,是不是?其实呢,一般正常情况下,我们的页面不是满屏的,他会一部分啊,所以呢,这个 app 我们在一开始呢啊,就想定一个宽度 啊,比如我第一个一千啊,这个宽度一千, 我们再看一下,这说他一切呢,他就这样子,是不是现在电脑比较宽了,是不是?一般我们会定一千多,是不是他定多少啊?这个自己定哈 啊,如果说你定八百六百,可能就不太适合今天的很多电脑了,是不是百分百,百分百就比较少啊?这个也也有一些,上面有个盆条百分百的,是不是?但下面这里我们看下 啊,下面这张图啊,这张图很少是一百满屏的,这个定多少呢?我们自己处理就可以了。假如我定一千四或者七二三,那你这里定好之后, 下面的内容由全部定了,因为定的宽度不是百分百,那就是我们要做一个什么东西呢? 是做一个居中,是吧?像居中,这必须的啊,一百就不用了,是不是?好,这时候居中了,因为下面这个轮廓的图在这里,他宽度也跟上面一样才好看,是不是?所以呢,我们接着做, 就马上下面这个内容的轮波,这个轮波首先我们先不要着急就做内容,我们要举一下,是不是按道理啊,因为这个已经是多少了啊,我们就在下 在加,是不是?那么也可以你上面这行啊,你把它这里加到一个行里面去,比如说可以这样再加个 dip, 然后把这个放到里面去 啊,这样也是可以的,但是这个内容,刚才这个内容有些属性呢,我们得定一下 啊,这个定了属性之后可能就你自己定一个了,就说我想把这个些内容放到这里面来,让他能够管理到啊,这个也够了,大家为我们慢慢整理好,你这样写这个 top 有没有问题呢?我们去看一下。 有问题是不是啊?有问题,意思是原来在 aapp 里面的一些样式啊,我们要放在这个 top 里面, 什么样式的?除了高度,宽度是不是?那我们这些可能要重复一份上放进来。好,这时候你才会发现是可以的,那么在这里呢,我们就把这个来拿走了啊,把这个 啊再来再刷新一下,看怎么样,是不是就可以达到刚才的效果,是不是会重复吗?然后剩下的东西呢,我们就可以所有东西都会在这里面, app 里面,标签里面去做啦,而这时候我们做第二个 vip, 是不是本辈在做什么啊?轮波图,我们轮波图啊是自己定一个名字,那你可以定其他名字是吧? 好,这个名字输了,他有些是用这个,这个名字是不是啊?自己定啊,这个啊,我用这个也进也可以,一般准备做广告一样啊。好,这个内容我们先定好他的大小,然后我布局啊,先做好布局也发到这里来啊,首先 我把这个样式写在这里,宽度是多少?不知道高度是多少?不知道是不是。那就写一个高度写嘛 啊,随便写一个,然后呢?再写个背景颜色啊,为了看倒数啊啊,然后随随便写一个,然后再改一下名字啊,改一下内容啊,随便加一个不同就行了啊,就有点看的区别, 保存一下好,记得看一下,你发现这个东西将来我们要做什么啊?这个话没准备做什么啊,就准备要放 这些图进行轮播,是不是啊?想达到这样的一个效果,所以呢,我重新定一个位置,它里面就会放好多张图啊,怎么放?怎么实践?我前面已经有些例子,在这里我给大家看一下啊,这个例子呢,在这里我们之前写了一些例子 啊,总共多少个呢?我们再看这里啊,我运行要给大家看,是不是不是参考价值呢?他是一模一样的。好,右键我再点到这里来,然后运行一个。好,我准备就把这个放进来,是不是? 是不是可以实现呢?只要把它放进来,他这样是轮波是不是啊?当然我们可以用 viu e 来做,用接起来做,是不是啊?看到时候的需要,是不是现在我们最简单指点,不做我就做这个内容,直接再加上去也是可以的。 在这里呢,怎么把它拿过来呢?首先我们知道这个内容我们需要的,而正话就在这里啊,这个是动画内容了,就这里一个名字,动画定义。然后呢里面呢放多少张图?这里肯定要改的, 看你放的图片是不是?好,等会我们就开讲把这个把它移过去,是不是说只要有这些例子,我们就到处给放,我们在学的时候呢,就准备很多这种小功能啊,案例独立放在一起,到时候你以后,哎用什么功能,我们就把这功能取下去,放到你的固定的位置,是吧?就可以实现 页面上看到的很多的效果了啊,现在我们看下,明显啊,这张图准备是轮播三张,是不是?我们这里呢?也是有三张图在轮播嘛,就很自然就是三张,五张是很正常的,是吧?不行再加是不是?好的,我们现在。
粉丝758获赞3913

来看下一个 dem, 这里就一个 def, 设置了背景颜色和宽度高度,没有设置没有高度,这个 def 肯定是撑不起来的,对吧? 这里可以用 asberry 手这个属性主要是用来设置宽高比的,比方我设置成五比二,因为宽度现在呢是百分之一百,所以呢他就会计算出高度, 对吧?这个 diff 就出来了,宽高的比例是五比二,并且无论你怎么调整这个窗口的大小哈,这个 diff 它的宽高比呢,都是五比二。 这个呢就方便我们移动端呢做一些响应式的设置。好,再来看一个 demo, 现在就一个点设置了一个背景图,就这样。然后呢,我想给这个图片呢弄个倒影,好看一点。 这里我们可以用 boss reflect 这个属性啊,移过来呢,就是盒子反射的意思,就相当于给它反射一个影子的意思啊,这个影子呢,控制它出现在 below, 也就是呢,下方和原图间隔十个像素, 相当于给原图哈反射了一个影子出来。但是这种倒影的效果呢,还不够真实,可以给他调整一下透明度, 加一个渐变色,前面百分之十是透明,过渡到一个半透明的黑色, ok, 看一下效果还不错,对吧?这种倒影的感觉呢就出来了。好,这个视频就到这里,感谢大家的收看。

一、使用 dw 新建 htm l 文件。二、点击菜单栏,插入布局对象 div。 三、点击编辑规则,新建 css 样式。四、在样式面板中设置字体、背景颜色、宽度,内编剧外兼具并应用。 五、在和模型中插入图片水平线、官资标题、日期和内容, 如果图片太大,可以点击图片在属性面板修改大小。六、分别对标题和日期单独设置样式选择期类型,选择类 名称可以自定义,可以设置标题的大小以及文字加粗。在标题和日期样式设置完成后,七、 点击下方页面属性,设置上下间距和背景颜色,点击应用就完成啦!

不是组件用不起,而是原声 gs 更有挑战性。给他一个 waterfor 盒子,他能加上相对定位,并把其宽设置为浏览器窗口的百分之八十,外编辑为五十像素并居中。 若是再给他一个出手的机会,他能把一张大图片狠狠的塞入名为 waterford 小盒子里,并给图片设置为绝对定位宽为二百二十像素,圆角设置为十像素,并加上零点三秒的过渡效果。 结构和样式搭建好后,他向 gs 模块伸出了咸猪手。他先获取 waterfor 盒子,设置变量为图片宽度,但是他还不满足,他甚至还要写了一个创建图片的函数,并且丧心病狂的利用福尔循 加载三十张图片,并把其狠狠地塞入 waterfow 盒子。接下来到了布局环节。对于布局问题,五星上将迈克阿瑟评论道, 如果上帝让我用 gs 实现瀑布流布局,那么我会定义一个数组,数组的长度即为图片的列数,通过找出数组的最小值来决定把图片放入哪一列。 此话一出便震惊四座,诸多网友纷纷对其进行称赞,于是便创建一个函数,用于获取图片的列数和列与列之间的缝隙。他默不作声地创建一个数组奈斯套,用于存放列的高度,并出始化为零。 在编写了一个用于获取 next top 最小值和缩影号,表示当前在第几列的函数, 但他仍不满足。他通过 four 循环来设置图片的位置,其中的 left 值相当于 x 坐标 meantop index 表示 d 系列从零开始。 i m g v 加 in forget 表示水平、方向、图片宽度,加上图片间的缝隙, top 值相当于外坐标 meantop mean 表示列高度最小。 info gap 二垂直方向图片间隙。最后再更新一下列的最小值,同时再求一下数组最大值,把 waterfor 盒子高度更新。 最后我们再把 lao 函数运行一下,惊喜的发现图片竟然重叠在一起,根本不行,你敢耍老子?其实这是因为函数 lao 调用时,图 片还没加载,即还没出现在页面上,需要获取图片的高,而获取不了,导致获取值为零,从而发生图片叠加。解决方法就是添加一个 window 等待时间,等待图片加载完后再执行, 此时就大功告成了。另外还可以加上监听窗口变换,实现让窗口大小变化时能重新布局。

小伙伴们大家好,欢迎来到朝夕教育。好,我是 demi, 呃,今天跟大家分享的内容是 c s 三响应式布局 啊,响应式布局呢,它是可以为哎不同终端的用户呢,提供更加舒适的界面和更好的啊一种用户体验啊。而且随着目前呢像大屏幕移动设备的普及,好,所以呢,我们今天来跟大家分享一下 cs 三响应式布局啊, 在这个我们敲代码之前啊,哎,首先啊,还先需要了解哎几个概念,比如说,哎,什么是这个响应式布局呢?好,我们先来啊,弄清楚啊,弄明白这个什么是响应式的布局,所谓响应式的页面呢, 他就是指一套页面,哎能够适配多种终端,那可以让网站呀同时适配不同分辨率的屏幕,让我们客户能有更好的体验啊。设计呢,他会根据屏幕的尺寸缩小或者是扩展,让用户啊以最方便的方式从任何设备来访问啊信息。 顾名思义呢,就是说我们响应式的这个设计呢,它是响应浏览器大小的变化,并啊调整了布局元素来适应呢可用的屏幕空间。 比如说我们的哎一套页面,那你可以我们在手机上面,哎,就是小屏幕上面浏览的时候,哎,他是一种这个样式,好,那在平板或说这个大桌面显示器上面,哎浏览的时候呢,他是不同的一种样式啊, 所以说这种就是一种叫做响应式的一种布局。那么呃他的这个响应式的布局呢,我们来看一下常用的实现方案啊。第一个就是 flex 布局, flex 布局呢,它能解决啊绝大多数情况下响应式布局的问题啊,比如说像这个全屏布局啊,两列分布啊,分分布的这种布局啊,还有就是内容居中哎之类的一些场景。 嗯,那为什么我们会用到这个 flex 布局呢? flex 我们知道是弹性盒子嘛,对吧?弹性啊,好。呃,像我们 以前的这种布局呢,有像百分比布局啊,哎,还有这个啊,浮动啊,那浮动呢,他是有副作用的啊,如果说我们的这个子元素设置了浮动, 它会引起复元素的塌陷,如果也就是说你的子哎有这个设置了这个浮动,但是你的这个复呢?哎,因为没有设置高度,所以说会引起这个复元素的塌陷, 那么就不能实现像自适应的一些布局。那么我们啊,这个整个布局啊,那前之前的一些元素如果说浮动了,那后面的元素呢,他可能就会错位,所以说我们的这个页面如果说是越来越复杂呢,是不利于管理的。 好。这第一个啊,布局方案好是 flex 布局,当然我们待会实现的这个呃布局呢啊,也会以这个 flex 的方式呢来进行布局。好。第二个呢,就是媒体查询啊,媒体查询呢,就是使用这个 media, 它是可以针对不同媒体类型的来定义不同的样式,那媒点呢,可以针对不同的屏幕尺寸呢,设置不同的,哎样式。来,我们一起看一下,像这个呃设备有一个划分啊, 后面呢,这个是呃尺寸的一个区间区间。像我们的小屏幕呢,哎,比如说手机啊,他的这个呃尺寸呢,就是小于七六八 px 好。然后像这个小屏设备,哎,比如说平板,哎,他的这个区间呢是七六八到九九二,还有这个中等屏幕呢,哎,比如说我们的桌面显示器就是九九二到哎,幺二零零一千二, 哎,之间。好,还有就是这个宽屏设备,就是咱们的大桌面显示器呢,它是大于等于一千二。好,所以说 说这个没点呢,可以针对不同的屏幕尺寸呢来设置不同的样式。比如说我们在那个大桌面显示器,哎,上面的时候,哎,是这样的一种布局样式,那么在我们的这个小屏手机上面的时候,那你肯定 就不能这个你的尺寸肯定都要发生一些变化了,比如说啊,我们的在这个大屏上面,好,这是我们的这个大屏幕上面,对吧?是这样的,好,我们的这个字体呢,有可能,哎, h 一是这样的,但是我们的手机屏很小啊, 那你还能这样的吗?那我们的这个整个的布局是不是要调整一下?好,那有有可能,以前你这个地方放了,哎四个图片,哎,是这样的,但我们手机上面你这样横着放四个,有可能,哎,他这个显示不下,太拥挤了,那我们在我们的这个手机屏上有可能这个 地方呢,哎,只显示两个,好,这是这个啊,媒体查询啊,当啊,我们看一下。第三个就是当你重置浏览器大小的过程中呢,那么页面他也会根据浏览器的宽度和高度来重新渲染页面。 好,目前呢针对很多像苹果手机啊,安卓呀,还有平板啊等等设备,我们都可以用到这个媒体查询。 好,这第二个,呃,接下来呢,还有就是,哎,我们见到的比较多的这两个单位啊,一个是 r e m, 还有一个是 e m, 这两个呢都是一个相对单位,那么他们有什么区别吗?嗯, 好,我们先来看一下这个 r e m 吧, r e m 呢,它是根据咱们的根结点,所谓根结点呢就是 h t m l 啊, 好,他是根据他的这个字体大小呢来进行计算,默认的字体大小呢是十六 px。 好,来,我们可以看一下这个 r r e m 单位呢,都是这个相对于根源数,也就相对我们的 h t m l 的,呃,放的杠 size 这个属性呢来决定大小的。 好,如果说在我们的根源数啊,下面设置了一个 find 刚 size 呢啊,就相当于提供了一个基准, 那么当我们的页面的啊,这个 size 发生变化的时候啊,只需要更改放不刚 size 的一个值,那么呢,以 r e m 为固定单位的元素,它的大小也会呢发生响应式的变化, 比如说我们的这个跟节点,哎, h t m l 你设置的是十六 p x 啊,好,如果我们的这个页面,哎,我们的这个字体大小发生变化,我把它变为 十四,哎,你只需要更改咱们的这个 htm 哎,里面的这个放到塞子里面的这个子就可以了,那么其他的呢,他会响应式的来发生一个变化, 呃,那这个 r e m 我们这个值应该怎么来设置呢?好,如果说它的默认值是十六,那我们如果说这里地方,哎,你是等于啊二 r e m, 那么这个二 r e m 怎么换算呢?相当于是多多大呀?就是三十二啊,这个 p x 的一个大小,哎,就是十六乘以二嘛, 好,这个换算也非常的简单啊。好,这是 r e m, 那么 e m 它是根据自身字体大小来计算啊,一定要记得啊,它是相对于咱们的这个复元数的。好, 就是这两个啊,相对单位啊,我们先暂时的了解一下,后面呢具体的啊,我们都会应用得到。好,第四个呢啊,这个呢是也是一个单位啊,他是四口单位啊, vw 和 vh 这两个单位呢,他是根据浏览器窗口大小呢来进行适配 啊,据,他们两个是市口单位啊,什么是市口呢?市口呢,就是我们哎所看到的整个浏览器的一个大小,也就总市口的宽度是一百 v 啊,宽度啊,是 vw, 那高度呢?就是一百 v h, 哎,相对于这个市口的一个高度,就是我们整个可以看到这个浏览器的一个大小。好,那一 w 相当于是市口宽度的哎,百分之一,那如果说是一百呢,就是我们整个浏览器的一个宽度或者是 一个高度了。好,这是我们哎实常用的一些啊,实现的一个方案啊。好,接下来呢,我们一起来看一下我们需要实现的是一个什么样的效果呢? 嗯,好,这个好,这个效果呢,我们一起来看一看。 好,也就是说我们现在需要实现的一个效果呢,它是这样子的,它是分为了,哎,左右,它是一个左右的一个布局啊。 好,左右两边左右结构,左边呢是一个固定的宽度,那右边呢内容啊,还是可以根据用户的使用来啊,自动缩放。哎,我们先看一下他的一个效果,那也就说当我们的这个屏幕的分辨率,哎,比如说啊,当他大于一千二 的时候呢,那我们可以看到,你看这现在他是有一二三四,是不显示了,四个。好,当我们的这个屏幕,哎,你看我缩小的时候看到了吗?你看他是不是有变化呀? 我们刚才看到的,哎,显示了有四个,结果,现在呢?你看屏幕,当我们的分辨率,比如说,哎,小于九百九十二的时候呢,哎,可以看到,你看他只显示了,哎,两个。好,继续啊,再改变这个啊,他的一个大小, 当他的大小继续发生改变的时候,哎,我们可以看到,你看他左侧的这个 左侧的导航栏是不是隐藏起来了呀?哎,不见了,好,继续啊,继续看他的一个变化,当他继续缩小的时候,也就是当,哎,我们这个屏幕分辨率小于七百六十八的时候呢,他的展示效果可以看到 这里的图片,他是不是一行只显示了一个啊?并且呢这个左侧的菜单确实隐藏了。左侧菜单隐藏,其实大家有没有发现还有一个地方不同啊? 你看我们刚才可以看到,你看左侧的菜单隐藏了啊,来看一下,我们的这个头部是不是也发生了一些变化呢?仔细看, 看到了吗?你的左侧菜单隐藏了,但是我们头部是不是又有一个菜单出来了?哎,好,继续啊,看到这个头部菜单,也就我们这个屏幕分辨率再小,再次小于七六八的时候,哎,可以看到 他的这个头部的这个菜单又发生了一个变化,哎,有一个首页,然后呢还有出现了一个像这样的一个按钮, 哎,是不是看的很清晰?好,也就是说我们,哎整个呢,嗯,他是有一个变化的啊,还是是不同意页面在不同屏幕尺寸下呢?他会有不同的一个,哎,布局啊, 好,所以说这个响应式啊,它是需要有一个负极呢来作为啊,布局容器,然后来配合子元素来实现啊变化的一个效果。 那么在不同的屏幕下面呢,我们通过刚才介绍到的媒体查询来改变整个布局容器的大小, 然后呢,哎,我们在改变里面子元素的一些排列的方式啊,哎,他的一些大小啊,从而来实现在不同的屏幕下面呢,我们看到不同的页面布局,还有他的一个样式的变化。 好,整个页面结构,哎,我们清晰了之后呢,下节课开始跟大家一起啊来完成,哎,咱们这个页面, ok, 那本节的内容呢跟大家先分享到这。

教你用四行 css 代码实现全屏滚动效果,今天我们用几行代码带大家去实现一下全屏滚动这样的一个效果。 首先呢我们看一下我们的 html 代码,在 html 当中的话,我们引入了 css, 并且呢我们使用对应的语法生成了十个 cx 和 h 一标签。再接下来的话,我们写对应的样式, 对 lt 描呢设置了这样的一个样式,对 section 的话设置了这三个样式,既可以实现全屏滚动,我们使用 greed 来实现我们对应元素的一个居中,你学会了吗?

不会带马也能做出网页,网页设计的工具有很多种, dream viewer 是其中的一款可视化网页设计的工具,非常适合初学者。 现在我们用这款软件快速设计一个这样的网页,从头到尾一句代码都不用。打开 dream beer, 选择 html, 选择网页背景颜色, 也可以用图片插入五行一列的表格,设置宽度。 how do you mean me before i fade away 设置表格背景颜色。 第一行做菜单,同样的方法,插入一行五列的表格, 设置背景和字体颜色, 输入菜单名。 第二行插入一个图片, 调整大小。 第三行左边做一个登录模块, 插入水平线, 插入表单, 插入文本狱, 输入标签, 同样的方法,再插入一个文本域, 插入登录按钮, 插入注册按钮, 右边做文章列表拆分表格 字体加粗 水平线, 插入表格, 同样的方法,插入图片, 填写文本。 第四行插入图片,方法和上面的一样,调整大小和位置。 第五行也同样的操作, 保存,双击打开运行。

如何在网页里添加一个图片?这是一个空的网页文件展示图片使用以妹子标签,也就是 i m g s r c 填他的地址。 哎,显示了有点大,图片需要缩小一下,设置 ys 属性等于六百,这就可以了,你学会了吗?

不用代码也能制作这个网页,操作过程就像是沃尔一样简单,想学习的继续看视频,先准备好需要的图片、图标、视频等材料, 打开独一无二软件,点击 html, 单击鼠标右键,在出现的菜单中选择页面属性。在弹出的窗口中选择网页背景颜色,或者导入背景图片, 点确定。单击上面的表格图标。在对话框中设置表格大小,行数为六,列数为二, 宽度为七百像素,点确定,单击在下面的这个箭头。 在单机属性,选择表格对齐方式, 设置表格背景颜色,白色, 像 excel 一样。拖动鼠标调整单元格大小,选中左边这五个单元格,单机鼠标右键一字,单机表格,合并单元格, 同样的方法合并下面两个单元格, 分别设置两个合并单元格的背景颜色。 根据页面布局调整单元格高度, 选中左边合并单元格,单击表格图标,插入六行一列宽度为四十五像素的表格。 调整高度, 选中第一个单元格,单击在上面的图片图标,选择需要的图标点确定。 调整图片大小,单击在上面的超级链接图标,在对话框中单击这个黄色文件架图标。指定需要跳转的 html 网页, 访问网页时,我们单击刚才插入的图标,页面就跳转到指定的页面。 同样的方法,再插入下面几个图标。

大家好,我是只会切图的前端。上节课我们完成了商城首页的制作,这节课我们接着商品详情页的制作。首先介绍下详情页包括哪些内容,左边是产品图片展示,移动鼠标可以切换图片。 然后是标题,产品价格,产品属性,如颜色。接着是购买数量,立即购买,加入购物车等按钮。下面是广告图,产品详情等信息。 好了,下面我们开始写代码了。首先我们通过拷贝首页内容,新建一个详情页面, 保留网页的公共部分代码,删除主体部分代码。 然后我们在首页中产品图片部分加上 a 标签跳转链接,点击跳转到我们的详情页面。 接着我们新建一个详情页 c s s 文件,并在页面中引入 c s s 文件。 首先我们制作详情页上部分内 容,新建一个 div, 并内嵌两个子 div, 复元素 div 的使用 flex 布局,让子元素在一行内排列。 接着我们在产品图片部分新增两个 div, 用于显示大图及小图片, 设置 div 样式。 接着在小图片部分 div 新增五张小图片, 并设置小图片的样式,设置宽度高度,即加上两像素边框, 修改小图片复元素的样式,设置宽度为百分之九十水平居中显示,并使用 flex 布局,石子元素平均分布于一行中。 在小图片中新增 class 标记,当前选中的小图片即用边框黑色样式来显示。 因为接着我们要实现鼠标移入小图片,修改大图效果,所以我们先引入 j quary 插件,当然用原声 j s 实现也可以 使用 j query。 我们给小图片新增鼠标移入事件,当鼠标移入时,移除已选中的 class, 并给当前元素新增 class。 通过获取当前小图片的索影,我们可以拼接大图的图片地址来修改当前鼠标移入时的大图。 接着我们新增右边的产品信息。首先添加产品标题, 设置样式。这里我们设置右部分 div 的 flag 为一,这样可以让该 div 占据可用部分的全部宽度。 接着新增价格信息,并设置样式。 接着新增销量信息。 接着我们新增产品属性信息,如颜色等。 修改属性的样式。设置字体大小,字体颜色行高高度。设置左右内边距大小。添加一像素边框。 设置当前选中的属性的 class, 并给选中的元素添加边框为一像素红色边框样式。 接着我们给选中的元素新增小图标。使用伪元素 after, 并设置样式。设置背景,并使用绝对定位让其固定在右下角。 好了,这节课内容我们就到这里,下节课再见,感谢您的关注点赞!

很多粉丝问啊,说回家我们用带鱼片上网啊,或者说去看这个电影啊,会不会把屏幕铺满?今天我给大家做个演示, 咱们一般办公啊,打开网易,他这个两边啊,他的宽度会比较宽,因为大一品的宽度比较宽。呃,咱们但是呢咱们也可以去调节,比如说,哎,我可以调大一些,百分之一百五呢,一个食品也可以给他调大一点,这样子的话比较大啊,这是新浪网今天的一个 美容,然后但是如果咱们去防电影的话,像像这个电影一个新新盘的皮啊,他都支持这种宽屏的,然后咱们打开转一个全屏,大家感受一下,然后我们拨一下, 这是樊老师的一个断桥,新的新帕纳,然后完了以后他这个是支持全屏的, 只要说现在的新拍的电影,他都支持这种全面屏,都支持这种宽屏。所以说杀鸡啊,人家这个公鸭杀鸡杀鸡出来了肯定都没有问题。呃,放心用,放心买,有不懂的私信我。

你知道吗?其实网页中有很多种图片格式,例如网页中有一种图片格式叫做 png, 或者有一种图片叫 gpeg, gpeg 还有另外一个名字,它叫 gpg, 我们可以把那个 e 给省略掉。 那么网页中呢,其实还有很多其他种图片的格式,比如技服,技服呢一般是用来表示动图的, 而 lef 或者说是 vbm 这些格式呢,可能大部分同学们并没有在网页中过多的去关注过,甚至还有一些 svg 啊 或者 bmp 的图片也有。那么这些呢,可能不是我们大多数同学所经常去关注的图片, 我们今天呢会在我们的网页代码中去实现自己通过引入一张图片来在网页中去进行展示。 图片呢是通过图片标签进行引入的,我们写一个图片标签,在 src 这个属性里面去写入我们当前图片的地址,当前图片地址我们可以用点斜杠表示, 那么当前我们去找到这个 test 点 jpg 图片找到之后,我们就可以在浏览器中进行预览, 我们通过浏览器进行打开,我们就会发现我们图片已经展示在浏览器中了,但是这张图片实在是太大了,我们可以通过改变代码标签中的卫视属性来修改我们图片大小,我们把它改成一百宽, 这个一百宽就是指一百像素的意思,但是图片又变得太小了,那怎么办呢?我们就可以继续去修改它大小,把它变成三百。 我们修改完我们的这个宽度之后,我们发现我们的图片是按比例进行伸缩的,也就是说即使我们不去修改它的 hide 高度,它也能够放大和缩小,但是我们一旦手动控制了它的 hide, 它就被压缩了。 所以说这个 it 我们可以不去设置,如果设置的话我们一定要提前知道我们这张图片的宽高比例,我们随意修改一个宽高都会导致我们图片进行的变形。

一行 css 搞定图片等比例缩放,通过设置固定的 victor 就可以实现图片等比例缩放,但是此时发现高度都不一致了,这时如果要保持高度一致,就必须设置 heath 属性,这时又发现图片缩放变形了,可以通过 object fit 这个属性来防止图片缩放变形。 cover 是将图片裁剪可能会导致部分图片内容丢失,将 cover 改为 content 就可以实现图片等比例缩放了。你学会了吗?记得点赞哦!