- 博客(28)
- 收藏
- 关注
RSS订阅原创 JS小练习（运算符分支练习）
会员等级：1代表金牌会员，2是银牌会员，3是铜牌会员，4是普通会员，四种会员进店消费xxx元，其中普通会员无折扣，会员享受9折，如消费满1000元，金牌会员享受6折，银牌会员销售7折，铜牌会员享受8折。浏览器接收会员等级和消费金额，输出折后金额。如图所示，输入会员等级代码和消费金额后， 要付款的金额也直接在电脑中计算了出来，输入其他的会员等级代码和消费金额也可以，也是按照编译好的语法计算，当然了也有其他方法解出来，也欢迎小伙伴评论区讨论。
2022-09-22 19:03:40
524
40
原创 动画三：2D转换（超详细！）
如图所示：box1设置了在父元素盒子中水平垂直居中，由于图片大小的缘故，所以看不出来，不过确实是居中的，这也是继使用绝对定位设置水平垂直居中的第二种设置水平垂直的方法，box2设置了向上平移了3像素，再加上设置了盒子阴影，看起来就像是盒子浮起来了一样，再加上hover效果，看上去非常美观，感兴趣的朋友可以试试，span盒子设置了平移，但是没有起作用，这是因为。缩放属性的属性值和位移属性的属性值是类似的语法，可以是一个值，也可以有两个属性值：只有一个值的时候第二个值和第一个值是相等的；
2022-09-13 18:41:29
942
41
原创 动画一：过渡（超详细！）
如图所示：每一个子元素盒子设置了不同的 过渡的时序函数，它的运动的方式和快慢都是不一样的，由于展示不了视频，不过如果感兴趣可以自己演示一下，也是会有收获的。指定执行过渡的属性，多个属性，使用逗号隔开，例如height，background-color，width等。注意：缩写里如果出现了两个时间，那么第一个时间系统默认为过渡时间，第二个时间才是延迟时间！IE10开始兼容，移动端兼容良好，并且通过过渡可以创建一些非常好的效果，提升用户体验。过渡的时序函数，它的可选属性值比较多。接下来做个示范给大家。
2022-09-07 19:05:42
2110
36
原创 表单的语法及属性（form）
由于用可选值get会有？而用可选值post没有任何的显示，所以用可选值post更加安全，常用于敏感数据的传输。意思是当输入过数字或文字后，浏览器会有个记忆功能，如果设置了可选值on后可以自动填充了。意思是当输入过数字或文字后，浏览器会有个记忆功能，如果设置了可选值off后不自动填充了。get 将表单数据随着action提交的路径以？意思是属性action可以选择表单信息提交的地址。意思是导入或者导出的路径会跳转到当前页面。意思是导入或者导出的路径会跳转到新页面。意思是创建一个form的标签。...
2022-08-30 16:56:52
838
25
原创 flex布局（弹性盒子二）
意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，且每个子元素盒子与父元素之间都有一定的空隙。意思是设置属性值为space-around后，三个盒子分别排列在父元素盒子的左 右 中间，且两边盒子与父元素两边有较大空隙。意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，意思是设置属性值为 flex-end后，盒子从右向左排列在父元素盒子中，开始位置在最右最上边。
2022-08-24 19:15:19
1517
18
原创 背景的样式（雪碧图）
如图所示：设置完水平、垂直的偏移量后图片就来到了接近背景中间部分的位置，第一种设置也可以实现这种结果，并且两种设置方式都可以设置正负值，正值是向下向右移动，负值则相反，是向左向下移动。意思是设置了content-box后，从内容区开始计算距离，不设置位移量就默认是在原点。意思是设置了border-box后，从边框开始计算距离，不设置位移量就默认是在原点。意思是图片不会重复，只有一张，这样会漏出背景的底色，除非图片和背景的大小相同。如图所示： 设置了cover后，虽然元素铺满了，但是图片却突出了内容区。...
2022-08-16 20:13:24
481
22
原创 定位的开启及特点（固定定位和粘滞定位）
第三点和第四点说的是，设置元素粘滞定位后，粘滞定位会页面某个位置设一个点，如果在页面下拉但还没有下拉到那个点的时候，元素会跟着页面的下拉而移动，等页面下拉到设置的点的时候，元素自动开启粘滞定位，不会随着页面的滚动而滚动，固定起来。如图所示，页面明显已经下拉了很多了，但功能栏依然固定在页面右边中部偏下的位置，这是因为使用了固定定位的原因，功能栏一直固定在页面的右边的中部偏下的位置。如图所示：页面滚动时侧边栏随着页面滚动而滚动，但侧边栏滚动到了顶部后不再滚动，而是固定下来，这是因为侧边栏设置了粘滞定位的原因。.
2022-08-13 15:54:04
1107
11
原创 定位的开启及特点（相对定位和决对定位）
a默认情况下（没有定位），包含块是元素祖先元素b如果是有定位的情况下，包含块就是元素的开启了定位的，离它最近的祖先元素，如果祖先元素都没有开启定位，则包含块就是根标签（html）设置文本样式.outer {}.box1 {left: 0px;top: 0px;}.box2 {}.box3{}.box4{}书写文本...
2022-08-11 15:33:45
648
22
原创 高度塌陷的语法以及解决问题（超详细）
然后在对其进行清除浮动，这样可以通过这个空白的块元素来撑开父元素的高度，基本没有副作用使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。设置主要内容的样式：.box1 {}.box2 {}.box3{}主要内容：设置主要内容的样式：.box1 {}.box2 {}}主要内容：...
2022-08-10 14:21:41
208
21
原创 设置元素的浮动（float）
块元素在文档流中会独占一行，自上而下排列，如果设置元素浮动，元素脱离文档流后，就不会具有元素的特点float：设置元素的浮动可选值：none；元素正常显示，不浮动（默认值）left；元素向左浮动right；元素向右浮动浮动可以使块元素水平布局例：设置元素左浮动。...
2022-08-09 20:30:09
2443
7
原创 垂直布局和如何去除流动条样式（超详细）
默认情况下，块元素的高度是被内容撑开，如果是自定义高度大于内容区，听自定义的。需要出现滚动条时自动出现。内容正常显示（默认值）如果有其他不同方式，欢迎评论讨论。例：如上图，设置滚动条。...
2022-08-08 18:55:36
244
4
原创 小箭头和圆角盒子的设置
设置这个块元素边框的大小样式和颜色，把边框的其中三个边的颜色隐藏起来。设置一个盒子，然后加入属性{border-radius：属性值；border-bottom-right：右下角。border-bottom-left：左下角。border-top-right：右上角。border-top-left：左上角。可选值（单独给每个角设置圆角）设置一个红色的箭头朝右的箭头。像素:0~盒子宽或高的一半。设置一个宽高都为0的盒子。百分比：0~50%（...
2022-08-04 19:17:17
911
4
原创 解决设置盒子边框hover效果时所产生的抖动
border 意思是盒子的width和height指的是内容区，内边距，边框的大小。可选值：content-box 意思是默认情况下，盒子width指的是内容区宽度。解：把边框提前设置出来隐藏颜色，再给边框设置hover效果设置颜色就可以了。解：先在盒子里提前设置好边框，再在hover效果里设置颜色、大小和样式。在原有的盒子里设置好边框，把边框的颜色设置隐藏transparent。用box-sizing控制盒子的width、height 组成部分。我们用border举个例子。...
2022-08-04 14:02:54
2335
2
原创 CSS的盒子模型
border-xxx-color xxx指的是它的某一边，可选值有top right bottom left。margin也有简写方法，简写方式和padding、border是一致的。例：padding：30px 30px 30px 30px；边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部。3.内边距（padding）：内边距是内容区到边框的距离。margin 属性可以单独改变元素的上，下，左，右边距。设置边框必须指定三个样式 分别是颜色，大小，样式。...
2022-08-03 21:03:03
257
1
原创 CSS的文本常用样式以及如何使用
第一个参数：阴影的水平位移距离 （必填） 正值向右，负值向左。第一个参数：阴影的垂直位移距离 （必填） 正值向下，负值向上。裁剪多余的/溢出的内容 overflow: hidden;和上一个文本样式相差不大，只有阴影颜色不一样，box-shadow默认阴影颜色为黑色。第四个参数：阴影的颜色 （默认是字体的颜色）功能：1.设置元素垂直对齐，这种功能只针对图片，文字，表格，不针对块元素。设置不换行 white-space: nowrap；box-shadow：设置盒子的阴影。...
2022-08-02 20:45:05
565
1
原创 CSS的常用字体样式声明块
font-weightbold/bolder；（数值100~900，由细到粗）注意必须设置字体的大小，字体大小必须在倒数第二位，字体必须在倒数第一位。font-variantsmall-caps;font-styleoblique；可以通过rgb或十六进制等不同方式来设置字体的颜色。sans-serif非衬线字体。font-weightnormal；font-stylenormal；font-variantnormal；font-styleitalic；...
2022-08-01 17:32:11
525
1
原创 CSS的长度单位和颜色单位
物理像素一开始开发商就设定好了的，在PC端，1px=一个物理像素，这是我们最常用的单位，固定单位。常用的十六进制#ccc灰色，#f00红色，#0f0绿色，#f60棕黄色，#000黑色，#fff白色。相当于当前元素的字体大小，如果没有设置字体大小，那么浏览器有默认的字体大小为16px。是屏幕上的一个个小点，正常情况下是看不到的，只有放大到一定的倍数才能看到。直到继承根标签，根元素的字体大小，根标签/根元素字体默认的大小是16px。是相对于其父元素得到宽高进行设置的，是一个相对单位，...
2022-08-01 16:33:57
337
2
原创 学习编程的第三天（火热更新~）
PNG支持的颜色多，并且支持复杂的透明，不支持动图。是否允许用户控制音视频的播放（默认不允许）可以用来显示网页复杂的透明的图片。支持的图片颜色比较多，图片可以压缩，但不支持透明。图片使用base64编码，这样可以将图片转为字符，通过字符形式引入。一般用于保存颜色丰富的图片。一般都是需要和网页一起加载的图片才会使用base64。效果不一致使用效果好的；用来向页面引入一个外部的音频文件。支持的颜色少，只支持简单的透明，支持动态图。谷歌新推出的专门用来表示网页的一种格式。颜色单一的图片或是动态图时可以使用。...
2022-07-27 19:24:14
68
2
原创 成为程序员的第一天
今天学的内容很基础，再加上之前我在上一个班当了几天的插班生，那几天里我也都有在预习，截止到目前我已经预习到了css的第一步css样式的选择器了，所以得益于之前的预习，我也能够对今天的基础内容进行完全掌握了。,这是网页的基本结构，就像是向网页介绍一样，这是我写的头，身体，你可不要给我解译错了一样。今天是我正式学习电脑编程的第一天，我非常重视这一天，以后在学习期间的每一天我也会同样重视，希望每一天我都能快乐学习，不会因为困难而趴窝,加油！今天老师教了我们安装了两个软件，第一个软件是。...
2022-07-25 16:29:44
227
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人