html圆形按钮怎么设置

这样的按钮效果怎么做？这是 h t m l 代码，用 button 标签创建一个按钮，接下来是 c s s 代码。将所有元素的外边距和内边距设为零，并通过 box sizing 属性将元素的宽度和高度计算，包括边框在内。 设置八 d 元素的样式。使用 flex 布局，使内容水平和垂直居中。设置最小高度为适口的高度。字体大小为十像素，并设置背景颜色为红色。 定义按钮样式，设置按钮的宽度为四十 ram， 高度为十五 ram。 背景颜色为红色，字体颜色为白色。 去掉边框，设置边框圆角为三 rem， 字体大小为九 rem， 字体加足程度为七百光标样式为指针添加了过渡效果，使样式变化更平滑。设置位置为相 对定位层级，唯一溢出内容隐藏。当鼠标悬停在按钮上时，改变按钮的字体颜色为红色。 使用伪元素 after 来创建一个覆盖按钮的白色背景，将该伪元素的位置设置为绝对定位层级为负一，覆盖在按钮之下。通过 left、 right， top 和八等属性设置伪元素覆盖区域。 使用 transform 属性将元素沿 x 轴倾斜四十五度，并设置初始尺寸为零。添加过渡效果，使尺寸变化更平滑。当鼠标悬停在按钮上时，改变伪元素的尺寸， 从初始尺寸变为一比一，实现背景展开的效果。更多视频教程链接在评论区，想学习的赶紧去查看！

这样动态展开的圆形菜单怎么实现？这是 h t、 m、 l 代码，这段代码实现一个圆形菜单，包含一个主菜单按钮和多个菜单项。接下来是 c s、 s 代码。设置圆形菜单的内编剧和三 d 变换。设置圆形菜单的样式， 如大小、背景颜色、位置鼠标指针、字体大小和颜色以及过渡效果。设置圆形菜单鼠标悬停时的背景颜色。设置菜单项的样式，如列表样式、位置边框、鼠标指针、圆角和过渡效果。 设置菜单项鼠标悬停时的过度效果和层级。设置每个菜单项的样式，如大小、行高、圆角、背景颜色、位置、字体大小、颜色和过度效果。 设置菜单项鼠标悬停时的背景颜色和字体颜色。设置每一个菜单项鼠标悬停时的过渡效果和变换。

大家好，我是清新，今天带大家开发带左右按钮的自动轮播图效果的布局，那么就是这样一个简单的布局，那么涉及到动画的部分，我们怎么在后面 gs 的时候我们再给大家讲， 那么在这个布局当中啊涉及到四个非常重要的知识点，我们来看一下，那么第一个就是这个 projesion 定位的实战应用，第二个就是轮播图的执行原理，第三个就是这个小按钮如何自适应水平和垂直居中，那么第四个就是这两个左右按钮如何自适应垂直居中。 那么接下来我们就开始写代码，我们先把这个代码窗口拖大一点，然后我们在这里新建一个网页文件，我们来给他取个名字，叫做带左右按钮的自动轮播图效果， 点 h t m l 回车，然后按住 shift 键感叹号回车，调出我们这个网页的骨架。 那么接下来我们就开始写代码了，那么首先第一步我们需要干嘛？我们需要在页面当中构建这么大的一个长方形的区域，用来放我们的班人图，那么接下来我们来构建一下，点上班人 回车，那么接下来我们来给他添加我们的 css 样式点上班了大括号，我们给他加上一个宽度一千像素，加上一个高度四百六十六 ps， 然后我们给他加上一个背景颜色， ctrl js 保存，然后我们在浏览器当中来查看一下效果，那么这样一个长方形的区块就构建好了，那么他与 上面和左边有这样一个间隙啊，那么这个间隙我们可以通过右击审查元素查看一下，我们来选中我们的玻璃，大家看一下这里是不是有八像素的外边距啊 啊？也就是说这个空隙是浏览器默认变异的时候玻璃自带的八像素的外边距，我们不需要，我们就把它给干掉， 胖子加速保存就没有了。那么接下来我们要把这个蓝色的盒子移到水平中间的位置，这样好看效果，所以我们给它加上一个外边距，上面是五十左右自动相等水平距，中下外边距是零， 那么这样就 ok 了，那么接着往下看啊，那么我们要构建这样一个轮播图的效果，我们来看一下他这里是什么这样一个播放的效果，那么他的一个布局到底是怎样来实现的啊？所以接下我们要给他讲他的一个执行原理。好，我们来看 看一下啊，那么比如说我们这个小框框是我们现在这个大的蓝色的盒子，然后他其实是干嘛哈？他是在这个盒子里面呀，构建了一个无限大的红色的盒子，然后在这个红色的盒子里面放了什么？放了 我们的要滚动的内容的部分啊，大家可以看就是大概就是这样的放了放上去的 好，然后我们能看到的这个部分就是这个地方的这个部分，对吧？所以我们需要把这个盒子设置超出的部分设置为隐藏掉，那么就看不到了，那么他在在整个滚动的时候，他其实滚动的是水哈，他其实滚动的就是这个红色的盒子， 他往左边滚，左边一滚了之后，那么他里面的内容肯定是跟着一起走掉了吗？那么这个时候他把第 一张滚出去了之后，这个手你在这里就看到了第二张图片了，那么这就是他整个的一个动画的一个执行原理啊， 所以接下来我们要在这个盒子里面构建一个无限大的盒子，然后在这个无限大的盒子里面构建一个一个的小区块来放我们的图片， 所以接下来我们可以利用我们的 ur 无序列表标签来进行构建。好，我们来怎么样？我们来选择五个 ri 啊，我们来构建五个 ri。 好，那么接下来我们为了给大家看效果，我们来给美 ri 怎么样？和 ur 加上边框线，我们来看看效果啊。 好， ctrl 加是保存，那么这样一个 ur 就出来了，我们再来看一下我们的 r i ur 下面的 r i border， 同样的我们给它加上两像素啊，我们给它加个黑 色的。好，那么这样一个效果也就出来了，那么我们刚才说了，这个红色的这个 ur 相当于是无限大的，所以我们可以给他加上一个无限大的宽度，给他加个一万吧，是吧？ 大家看一下，那么这样子之后你就看到没有？在这拖拖拖，看到没有啊？非常的大了，然后里面的每一项这个 ri 他的宽度是多少呀？我们来看一下啊，他的宽度其实就是外面这个盒子的宽度，一千他的高度也是外面这个盒子的高度。好， ctrl js， 这大家看到没有啊？就是这样一个效果的。好， ok 了之后我们来看一下，那么他这里是不是有间距啊？大家看到没有？这个地方还有这个小点点啊，其实我们可以选中这个什么啊？ ur， 我们来看一下大家就可以了啊，我们来选中这个 ur， 大家看，其实这个 ur 自带的默认的外边距还有内边距，所以我们也不需要，我们就要把它给干掉，所以我们可以在这里把 ur 自带的默认样式给干掉，比如说第一个我们加上一个拍点设置为零， ctrl 加 s 保存，那么这个间距就没有了啊，当然他还有个默认的外边距，我们刚才也看到了，只不过 主要在这里好像看不到，是不是因为他穿透了啊，在上面好看成加 s 哎，然后还有一个黑色的小点点，我们来看一下啊， this dealt， 好，我们也把它设置为浪好，那么这个圆点点也就没有了。没有了之后，那么我们来看一下他这里的每一个 ri 是从上往下显示的，那我们刚才说了，他应该是怎么样在水平方向显示的，所以我们要给每一个 ri 给他加上 一个左浮动。好看，车架是保存啊，这样子大家看到没有？好，我们来看一下啊，大家看一下是不是每一个区块就出来了，那么接下来我们要在每一个 i 里面插一张图片， 所以接下来我们在里面来插图片，我们一次性插吧，按住 ctrl alt 键啊，然后 img 回车， imajes 杠，我们来选择我们要插入的这些图片啊，好，我们把这里改成啊， 这里改成三四五 ctr 加 s 保存，那么这样的五张图片就插入进来了，看到了吧？ 好，那么它接下来要执行的这个动画它是怎么样的？我们刚才说的它是在滚动外面这个 u r 来达到这个效 效果的，那么这个 ur 能够进行位置的移动的话，那它一定是一个绝对定位的元素了，那么它相对谁来进行位置移动啊？也就是说这个 ur 它是相对于外面这个斑斓来进行位置的移动，所以我们可以给这个斑斓加上一个 projesion 相对定位， 然后我们给幼儿加上一个 position 绝对定位， ctrl 加 s。 好，当然这个还看不出什么效果啊，那么接下来他默认的是显示的第一张，所以 left 是零， 然后透步也是零啊，这样没有问题了。好，我们把这个窗口放大啊，那么接下来我们来看一下，我们要把第一张图片移走，然后显示第二张图片，那我们来看一下我们怎么做好，我们是不是只需要做一件事情啊？就是把这个 life 车车子给 再修改一下，那么第一张图片的宽度是一一千，所以我们要把它移走，那就是负一千看才减 s， 那么这样子第一张图片移走了，那么在这个区块看到的就是第二张了。好，当然如果大家想更清楚的看到，我们可以这样子来给大家调试一下啊，我们右击审查元素。 好，我们来看一下啊，我们把它往下拖一点，我们来选中这个 ur， 然后这里有个 left 的值，看到了吧，我们可以给他剪剪剪啊，大家看一下，你这样一剪之后，大家看一下他是不是就整个在往右边移动啊？ 啊，所以他整个轮播图的一个效果就是这样来实现的。好，但是有一个点就是我们当我们在轮播的时候，我们只看只能看到这一张，是吧？所以我们需要做一个点，就是超出了这个 banana 的这个部分， 我们要把它设置为隐藏，看不到，所以我们可以给班人加上一个 over from hand 的 超出部分，设置为隐藏。然后我们来看一下，这个时候你能看到的就只有这个部分了，对吧？好，这个时候我们可以在这里再来演示一下我们这个 ur， 比如说我要移动的时候，大家看你就能看到里面的图片在动了， 对吧？啊？只不过我们现在这里的速度比较慢一些啊，人工操作吗？好，那么他整个的一个执行原理啊，就是这样子的了。 好，我们来把它重新刷新一下，然后我们来把我们刚才添加的这些辅助线把它给注射掉，然后这个辅助线也注射掉。好，那么它整个的一个滚动的原理我们就 讲完了啊，那么接着往下看啊，那么接下来我们要做的是什么？这里是不是有两个大，看一下这两个左右切换的按钮啊？所以我们来构建两个 div 来制作这个切换按钮，同样的，我们是在这个班人里面去写啊。 好，我们来构建两个，第一个叫做 pro， 对吧？向前的按钮，那第二个叫做类似的向下一张的按钮， 那么这两个按钮的话，那接下我们要给这两个按钮添加宽度和高度，所以我们来给他添加一些样式啊。点，上班了，下面的怎么样？我们来看一下啊。点上 preview， 我们来先控制他的怎么样？ 前一张的这个按钮的样式，我们来给他加上一个宽度啊，他的宽度是四十一，他的高度是六十九，然后我们给他加上一个边框，看效果。加两像素吧， 看得清楚一下，看成 gs 保存。当然这个时候我们来看一下，你好像什么也看不到，为什么？因为我们刚才给外面这个盒子设置设了什么 overflowm， 焊的超出部分的那种隐藏好，所以我们现在为了看效果，我们可以先把这个代码注视掉， 那么注视掉了之后，你发现你还是看不到，为什么呀？因为我们这个 ur 它是一个绝对定位的元素，它相当于是漂浮的，所以这个按钮肯定是被它盖住了。所以如果你还想看的话，你还可以做一件事情，我们可以先把这个注视掉， 注视完了之后，你看一下是不是就在这个位置啊？好，那么接下来我们来看我们需要这个按钮怎么样悬浮在这个图片上面，所以我们肯定也需要用到我们的定位，所以接下来我们可以 给他加上一个定位 for jason absolute， 那么他也是相对于我们这个 balance 进行位置的移动，所以我们来看一下啊。加了之后，那么接下我们要控制他的位置，首先第一个他与左边是零，这个没有问题啊。 left 零 px。 那么它与头部的距离是多少呀？我们可以通过精准的来计算，比如说这个高度是四百六十六，然后减掉它的一个高度除以二，是吧？这是一种方式。那么还有一种方式啊，我们来看一下，我们可以这样子做，比如说我给它加上一个 top 百分之五十。 好，我们来看一下，这个时候我们来看一下啊，你会发现一个什么效果透不？百分之五十，也就是说他怎么样，他与头部的距离正好是整个盒子的 一半了，一半的这个位置，那么接下我们要让他居中的位置，我们就要把这个盒子往上移多少？移他自身的高度的一半就可以了。好，所以接下来我们可以做的事情就是 marking 杠 top， 那么他的高度是多少啊？六十九，那么移一半，向上移，那么就是多少，我们可以给他个三十五 啊，因为他这里没有办法捐分哈，大家看一下，那么这样就可以了。好，那么同样的，我们右边这个按钮， 我们来看一下。那么右边这个按钮其实跟左边这个按钮的什么整个样式是一样的，唯一的就是什么他不是在左边显，他是在右边显示，所以我们可以干嘛？我们可以在这里这样子啊，我们来看一下，我们可以把它复制一份， 然后我们给它改成什么？改成 list。 好，然后我们把这个左改成什么，它与右边的距离是五十就可以了， 大家看左右两个按钮就出来了，出来了之后我们接着往下看，那接下来我们是不是要给他们添加背景图片呀？好，我们来给他们添加背景图片。 background， 我们来添加。 i m a j e s 杠，我们来给他添加哪一张图片？我们来看一下这个按钮的这张图片在哪里啊？这个按钮是立的 啊，就是这张图片。好，我们来看一下。 gs 保存哎，大家看一下，当然我们这里最开始显示的是什么？是一个这样的，看不？不是很清楚这张图片是不是，所以我们来给大家看一下这张图片啊， 我们来在这里看一下这张图片，打开大家看一下，他是把四张小的按钮图放在一张图片上了，然后每张图片的宽度是四十一，然后中间这里还有一像素的间距啊， 那么我们最开始的时候要显示的是这一张图片，所以我们需要把这个背景图往左边移移多少，他的宽度四十一，他的宽度四十一就是八十二，八十二，中间这里还有一像素就是八十三， 所以我们在这里我们来看一下啊，我们需要给他加上一个他的一个位置的一个移动，所以是负八十三， 然后零，也就是往水平方向移八十三，垂直方向不要移，那么这样就没有问题，哎，大家看一下是不是 ok 了？好，然后右边这一个我们来看一下啊，我们可以把 这段代码复制一份拿过来，复制一份放到这个位置，然后我们来看一下啊，那么他要移走多少哈，那么他要移走的话，我们同样要看这一张图片了， 那么要显示的是这一张，我们需要把前面三张都要移开，所以这里是四十一，这里是四十一，这里也是四十一， 四十一加四十一是八十二，八十二加上四十一就是一百二十三，一百二十三加上这里有个空格，加上这里也有一个空格，所以就是一百二十五，所以这里应该是负一百二十五。 好，我们来看一下啊，大概就是这样一个效果啊，没有问题了。好，那么接着往下看啊，那么接下来当鼠标划上去的时候，我们来看一下，鼠标划上去的时候，大家看一下他是不是要 换了一张图，是吧？图片啊，图片还是刚才那一张，只是把位置移动了一下，所以接下来我们来给他们要加上一个 banner， 点上 pro， 好玩，当鼠标滑动到它上面的时候，那图片还是这张图，不要动，我们唯一的就是要更改这张图片的什么位置，那么我们现在要显示的是哪一张？就是这里，这里他的位置是多少？就是零零，所以我们来看一下啊，我们把这个 background 或 jason 只要更改它的一个图片的位置就好了，其他的都不需要动， ctrl 加 s 保存，保存好了之后我们来看一下，哎，是不是 ok 了？ 好，那么右边这一个我们来看一下，同样的原理，所以我们可以把它复制一下，然后这一个我们来看一下啊，他要移走的应该是负四十 啊，就可以了。 ctrl 加 s 保存。哦，我们没有加，是不是啊？这里把它改一下啊，把它改成 nice， 好， ctrl 加 s 保存。哎，这样就可以了。好， 那么同样的，我们把刚才这些代码把它给什么样还原回来，那么这个时候你就看到了这样一个效果了啊，这个 overflow 我们最后再把它隐藏掉吧。 好，那么写到这里之后，我们来看一下，这上面有很多代码是相同的，我们有没有办法把这些代码合并一下呀？这个看起来太杂了，是不是？可以啊？我们来看一下，我们来怎么合啊？ 点上 preriver 逗号，点上 banner 下面的，点上 list。 好，那么这样的话，我们就是把这个什么 banner 下面的 preriver 和 banner 下面的这个 list 相同的代码放在一起，我们来看一下哪些代 是相同的啊？这些代码肯定是相同的。好，所以我们把这里就给他干掉，然后与头部的这个还有这里是相同的，所以我们也要把它放到里面去，然后这里我们也可以干掉。 好，我们来看一下啊，那么这段代码我们来看一下可不可以优化啊这段代码，这段代码好像两个人不一样啊，但是他其实上有有共同的一个点啊，我们来看一下，我们可以给他把背景图片 我们来看一下啊，翻过来，也就说他的背景图片是不是共用的是一张背景图啊，所以我们这里可以把它拿过来，然后唯一的他不一样的点就是他每一张背景图的一个位置不一样，所以我们把这里删掉之后，我们可以把它改了，改成什么拜克格浪的杠，什么 for jason， 就是单独只要控制每一张图片的什么那个位置不一样就好了啊， 好，那么这样子就可以了，代码也简化了，效果也就达到了，也就是说把他们公用的样式相同的样式把它放在一起，然后再单独再给他们添加不同的地方就可以了，这样代码量相对就比较少了，大家看一下效果是没有变的好， 那么这里做完了之后，我们接着往下看啊，接下来就是这个部分了啊，那么这个部分首先我们也要构建这样一个长区块，然后把它定在这个图片上面呢， 所以同样的我们来构建下面这些按钮啊，点上一个什么 b u t t o m butter， 然后我们也要给他添加宽度，高度点上扳的下面的，点上 b u t t o m， 我们给他加上一个宽度，百分之百加上一个高度，我们给他五十像素，然后我们给他加上一个背景颜色，掰个啊，那么他的背景也是是黑色的，半透明的，所以是零杠，零杠零点零五好， 当然加完之后肯定也是看不到效果，因为他也被整个区块给盖住了啊，所以同样的我们要做的还是可以把它 怎么样注视掉，看一下，再看是不是在这个位置啊啊，当然我们要让他显示在这个图片上面，所以首先我们要做的还是要给他加上一个绝对定位，所以 position absolute， 当然它同样的是相对于外面这个斑斓进行位置的移动啊，这个斑斓我们已经设置为了相对定位的元素了，所以我们不需要在这里去改什么代码了。 加完之后，然后我们来看他与左边的距离是零，他与这个班的底部的距离是零，那么这样就没有问题了， ctrl 加 s 保存 在这个位置显示，那么接下我们就要在这里面构建什么构建我们这些小按钮了，好，我们这里有五个小按钮，我们分别用十五个十泵来构建啊，十泵乘以五回车。好，我们把它一个一个换行了，看一下 ctrl 加 s 保存好，那么 ok 的，这这里还看不到效果啊，因为他们还没有给他添加任何的样式，那么这个小按钮我们是怎么样？他其实是一个 宽度和高度大概十像素的这样一个小方块，然后把它设置为圆的，所以接下来我们要给这个丝泵添加宽度和高度。 点上搬了下面的 butter， 下面的 spoon， 我们给它添加一个宽度十像素，添加一个高度十像素，然后给它加上一个背景颜色，白色的，我们来看效果， 当然什么也看不到，因为这个班人这个是蹦，他是一个泪点元素，他不支持宽告的设置，所以我们要把它转换。为什么？你可以转换为会计元素，也可以转换为什么？ inn block 行列会计元素，但是我们要让他在一行显示，那会计元素肯定是做不到的，所以我们用行列会计元素， 那么这样子就在这个位置了。那么接下来他是圆角的，所以我们要把它设置为圆角，所以 border 杠 redears， 我们把它的半径设置为它的整个的宽度的啊，一半，大家看一下，这样就没有问题了。好，没有问题的，这我们来看，他们之间 默认是有空隙的啊，这个空隙我们肯定不需要，因为他是自带的，我们来看一下这空隙怎么产生的啊？我们之前的视频一直有讲到过这个问题，看一下复制过来就没有了。所以这个空隙他是通过什么浏览器变异的，这个换行和这个空格造成的。 好，那不同的浏览器他又不一样，所以我们怎么做？哈，认真看啊，我们只需要干嘛在他外面的这个盒子上面加上一行代码，叫做方针杠塞子零 px 就可以了。 这个空隙你看到没有？上面下面这个空隙全部都消失了。好，消失了之后接下来他要有空隙，我们很简单呢，我们可以给私奔单独添加外编剧就好了，上下外编剧不需要，我们左右给他加上三像素的外编剧，他们就分开了。那么接下来我们要让这些小按钮在这个什么，在这个区块里面 水平和垂直居中，我们来看一下怎么做啊？这里很重要啊，非常非常的重要。首先我们来看一下，我们要让他们在水平方向居中，还是挺简单的，我们只需要干嘛呀？只需要给外面这个盒子加上一个 test 杠和浪 伸头就可以了，这样就在水平方向居中了，但是要在垂直方向居中怎么办嘞啊？认真听哈，这个地方非常重要，我们首先我们给外面这个大盒子，我们可以给他加上一个行高， 行高等于多少呀？这里是五十是不是？所以行高也是五十，看是价是保存。哎，这样一看你好像认为居中了，我们来放大一下啊，其实他并没有完全居中啊，我们来截图看一下你就知道了，他并没有完全居中，你看到没有？这里你看 啊，然后我们来拖到下面，你看是不是下面还留了很大的一个空隙，是吧？你看这里，所以他根本并没有完全居中。好，那接下来我们要让他完全居中怎么办啊？我们只要再加一个代码就可以了，就是我们给这个私奔啊加上一个这个代码 mid 啊，好，我们来看一下，这样的话他就会这个是泵啊，他就会相对于上面这个区块的这个行高的基准线来进行垂直居中对齐， ctrl 加是保存，这样子就可以了，我们来放大一下 看，就完全居中了。好，这里大家一定要注意了啊，所以大家对这个代码一定要非常的熟悉啊，好，没有问题了，那么接下来我们还有最后一步了，就是当怎么样我们点击 到哪个按钮的时候，他这里要有一个变色的一个效果，有当前选中的按钮，他的颜色不一样，所以我们可以给当前选中的这个按钮，我们给他加上一个单独的样式。好，然后我们来给他添加单独的样式啊， 是泵点上 c u r r e n t， 我们给它单独加上一个什么背景颜色， hot pink， 看成加是保存，那么这样就可以了啊，当然关于他什么点击之后他变色呀，包括他整个的左右切换的一些效果呀，也就这里的一个自动能播的效果，我们在后面的 gs 课程当中学到了，我们就会给大家来补充。 好，那么接下来我们来把这里把它给注射，把它给删掉啊，然后我们再把这个 overflamhand 把它给加上，超出 部分隐藏 好，最后我们要把这个按钮的这个边框线把它给干掉， 那么这样一个布局就出来了啊，如果说你想要他滚动的话，我们来看一下他是可不是不是真的可以按我们刚才说的实现的滚动的效果了。我们最后再强调一下，他滚动的时候是滚动的这个 ur 来改变这个 ur 的 life 的值啊，看到了吧，所以我们来看一下， 看到没有啊，那么他就可以这样往左边滚了 啊，好，那么所有的滚动啊，包括后面的效果都是 g s 需要讲的，我们只是给大家讲整个的一个布局和原理。 ok， 好，那么这一节课我们给就给大家讲到这里的啊， 那么关于这个布局，我们给大家整了一个非常详细的文档啊，比如说每一步要做什么，然后我们来看一下，比如包括每一步里面又分很多小步骤，是吧？第一步干嘛？第二步干嘛？大家看一下啊，就是让你对这个轮播图有一个完整的思路，包括每一行代码 再看，如果大家需要这个文档的话，也可以私信获取啊。还有的话，我们总共录制了大概有十六个案例了啊，我们总共是三十个案例。好吧，那么就给大家讲到这里了啊，拜拜。

微信小程序 button 按钮组件的基本用法？这节课带大家来了解一些其他的比较常用的组件，那第一个就是 button 按钮组件，第二个是 image 图片组件，第三个是 navigate 导航组件。那首先呢，我们来看一下这个 button 组件。 八腾是一个按钮组件，它的功能要比 h t m l 里面的八腾按钮要丰富很多。在小程序里面，我们可以通过八腾的 open type 属性调用微信提供的各种功能，比如说我们可以通过 open type 属性指定不同的值， 然后就可以去调用微信里面的客服，微信转发获取用户的授权用户信息等等，那这些微信提供的能力都要通过咱们的 open type 属性来进行使用，这是咱们的巴特按钮。那然后我们去了解下这个 emit 组件。 image 就是咱们小程序里面的图片组件，在小程序中默认的这个 image 组件有一个宽和高，默认这个宽大约是三百像素左右，高度大约是两百四十个像素左右。 而最后这个 navigate 组建，这是咱们小程序里面的页面导航组建，就类似于 h t m l 里面的 a 链接。那首先这节课咱们先去了解下这个巴藤组建如何来进行使用， 那比如说我们可以在页面上去放一个普通的默认巴特按钮，它的颜色默认就是一个灰色的背景色，然后里面的文本是黑色的， 那如果咱们需要指定不同类型的按钮，咱们可以用 tap 属性来进行指定，比如说 tap 等于 primary， 就是一个主色调的按钮，在微信里面主色调就是这个绿色，那如果咱们指定了 tap app 等于 one， 就代表是一个红色的警告按钮，那么接下来就带大家一起去做下演示。打开微信开发者工具，咱们先放一个普通的巴特按钮，在这里写段文本为普通按钮，也可以是默认的按钮。 咱们保存之后大家来看，在页面上就会渲染出一个灰色背景的一个普通按钮。如果咱们希望来一个主色调的按钮， 那咱们可以去改一下 type 属性，先把这个 type 做一下修改，等于 primary， 再修改文本为主色调按钮保存之后，咱们再来看，在页面上就多了一个绿色的按钮， 那如果咱们希望来一个警告按钮，来修改下 type 等于 worm 文本为警告按钮，然后保存。大家看在页面上就有了一个红色的警告按钮，那么接下来我们再看一下这个按 有的另外一个属性， size 等于 mini， 通过 size 等于 mini 这个属性，咱们可以在页面上选出一个比较小的按钮，大家来看，默认情况下这个按钮是独占一行的， 那如果咱们希望来一个比较小一点的按钮，且是横向排列开的按钮，那么这时候咱们可以给这个按钮加一个 sis 等于 mini 这么一个属性，就代表说我们希望选出一个小尺寸的按钮，咱们先添加一下注视， 咱们再去做下演示。比如说我们复制上面的这三种按钮，然后加一个四 s 属性等于 mini， 咱们快速的复制粘贴一下，然后保存。大家来看页面， 在页面上就多了三个按钮，这三个按钮是在一行上面来进行展示的大小也没有之前那么大了，我们再看一下这个按 扭的另外一个属性 plane， 通过 plane 咱们可以在页面上渲染出一个镂空的按钮，就是没有背景色，但是有了一个边框线，咱们一样去做下演示，依旧是先复制这三个按钮，然后再加一个属性 plane， 不用给值，直接复制粘贴好保存之后呢大家来看 在页面上就多了三个镂空的按钮。那么这一节课给大家去介绍了一下 button 按钮的三种不同用法。那如果咱们只想更改按钮的这个颜色色调的话， 咱们可以来 type 等于 primary 或 type 等于 one， 可以渲染出主色调的按钮或警告类型的红色按钮，或者是直接放一个普通的灰色按钮都是可以的。如果咱们希望来一个小尺寸的按钮，可以加一个 size 等于 mini， 那如果我们希望渲染一个镂空的按钮，咱们可以 加一个 playing 属性就行了。那同时在之前的课程中，我们曾经说过，在 app 这色里面有一个 style 等于 v 二这么一个节点来控制咱们这些元素的样式版本 v 二代表说最新的样式，那如果我把它给去掉的话， 大家来看这些按钮的颜色样式会不会发生变化，保存后大家来看是不是这个按钮的颜色样式都发生了非常大的改变。 那所以说啊，咱们在这个微信小程序里面，可以通过 app justin 里面的这个 style 节点来控制我们这些组件。使用新版的样式还是使用之前旧版的样式？默认情况下这个 style v 二就是新版的样式， 如果希望启用旧版的样式，咱们把这个节点给他删掉就行了。这节课关于咱们按钮组建的基本使用，我们就为大家介绍到这里了，记得点赞、关注、收藏，咱们下期见。

大家好，今天我们来学习一下在 wps 文当中怎么制作圆形选项按钮， 什么是圆形选项按钮呢？在适合否前方的他们就是圆形选项按钮，如果今天是星期五的话，我们就要选择是就可以在这里点击一下， 如果今天不是星期五呢，那我们就要选择否，就可以在这里点击一下。 该怎样制作这样可以点击的圆形选项按钮呢？下面就来给大家讲解一下。我们先把鼠标的光标定位在视的前方，然后点击工具选项卡， 这里找到开发工具，点击，然后找到这里的圆形选项按钮，点击一下，现在我们按住鼠标左键往下拖，然后松开， 就有了一个圆形选项按钮，然后我们把它的背景颜色改成白色，点击一下，单击鼠标右键，在打开的这一个页面中点击属性， 在右侧的属性窗格中，我们在这里点击一下，然后再选择颜色，对话框中我们就可以把它的背景颜色调整成白色，点击，然后确定。 接下来呢，我们在否的前方也添加这样的选项按钮， 再来把它的背景颜色也给调整成白色， 然后我们关闭属性窗格， 在开发工具选项卡的下方点击一下，退出设计，现在圆形选项按钮就能够使用了，我们来试一下。 以上呢就是在 wps 文当中制作圆形选项按钮的方法，感谢您的聆听，再见！