- 博客(60)
- 收藏
- 关注
RSS订阅原创 CSS中表格介绍，表格相关的样式以及长表格的使用
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单，在网页中也可以来创建出不同的表格
2023-12-28 18:49:04
1332
原创 CSS中背景设置——渐变色和放射渐变
渐变：通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果渐变是图片，通过 background-image设置。
2023-12-28 18:46:19
1132
原创 CSS中设置背景的7个属性及简写background注意点
css中背景的设置至关重要，也是一个难点，因为属性众多，对应的属性值也比较多，这里详细的列举了背景相关的7个属性及对应的属性值，并附上演示代码，后期要用的话，可以随时查看，那我们坐稳开车了······
2023-12-27 09:16:18
2768
原创 CSS中元素设置定位，水平居中布局分析
因为left和right的值默认是auto，所以如果不设置left和right，则等式不满足时，就会自动调整这两个值。-在left，right设置为0的时候，如果width设置auto，，无论margin如何设置，都是调整width。-当开启决定定位后，水平方向的布局等式就会加上left，right两个值,此时规则和之前一样，只是多添加了两个值。1:如果9个值中没有auto，则自动调整right值以使等式满足。2:如果有auto，则自动调整auto的值以使等式满足。-可设置auto的值。
2023-12-27 09:15:58
422
原创 CSS中更加高级的布局手段——定位之固定定位及粘滞定位
(4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动。fixed：开启元素的固定定位（也是绝对定位的一种）- 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素。-当元素的position属性设置为sticky时，则开启了元素的粘滞定位。（1）以浏览器为参照物（体现固定定位特点）；当元素的position属性设置fixed时，则开启了元素的固定定位。（3）粘滞定位可以在元素到达某个位置时，将其固定。（3）固定定位不占有原来的位置，即脱离标准流。
2023-12-26 19:19:48
499
原创 CSS中更加高级的布局手段——定位之绝对定位
5.绝对定位会改变元素的性质，开启BFC属性，内联元素变成行内块元素，块元素的宽度和高度默认都被内容撑开。如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位，html （根元素，初始包含块）fixed：开启元素的固定定位（也是绝对定位的一种）（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）- 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素。-定位情况下：离他最近的开启了定位的祖先元素。3.绝对定位是相对于离他最近的包含块定位的。
2023-12-26 19:19:30
581
原创 CSS中更加高级的布局手段——定位之相对定位
当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动。通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位。当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型。- 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素。
2023-12-25 15:37:04
508
原创 CSS中浮动float带来的高度塌陷问题及4种解决方案
当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。
2023-12-25 15:36:46
2070
原创 CSS中水平布局手段浮动float属性及其需掌握的特点
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流使用float来使元素浮动，使一个元素向其父元素的左侧或右侧移动，从而脱离文档流可选值：none，默认值，元素默认在文档流中排列left，，向页面的左侧浮动right，向页面的右侧浮动。
2023-12-22 09:59:42
559
原创 CSS中设置盒子大小-box-sizing，设置盒子阴影- box-shadow ，设置盒子圆角-border-radius，属性及其属性值
border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区。box-sizing 属性用来设置盒子尺寸的计算方式， 也就是 width/height 指的是谁。border-radius 用来设置圆角 以XXpx为半径画圆。默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定。第一个值：水平偏移量 正->左 负->右。第二个值：垂直偏移量 正->下 负->上。还可以单独设置一角的圆角。设置元素的阴影效果，不会影响到页面布局。
2023-12-21 20:44:59
801
原创 CSS中2种去除浏览器默认样式方法—reset.css
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。
2023-12-21 19:23:56
837
原创 CSS中内联元素的盒子模型特点？行内元素，块元素，行内块元素之间的相互转换
4: 可以设置水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和，但不支持垂直外边距。inline-block 行内块块元素（即可以设置宽高，又不会独占一行）2: 可以设置padding，但垂直方向padding不会影响页面的布局，不会挤别人。hidden 元素不在页面中显示（隐藏一个元素），位置依然保留。3: 可以设置边框，但是垂直的边框不会影响到页面的布局，不会挤别人。none 元素不在页面中显示（隐藏一个元素）inline 将元素设置为行内元素。block 将元素设置为块元素。
2023-12-21 19:23:26
455
原创 CSS垂直方向布局中，子元素溢出父元素，如何处理？
visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示。子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出,scroll 生成两个滚动条，通过滚动条来查看完整的内容。默认情况下，父元素的高度是被子元素撑开的，若父元素设置了，就是设置多少就是多少。hidden 溢出的内容将会被裁剪不会显示。auto 根据需要生成滚动条。使用overflow属性设置父元素如何处理溢出的子元素。
2023-12-19 14:23:25
1062
原创 CSS中控制元素水平布局的七个属性
5:如果将两个外边距设为auto，宽度固定，则两侧外边距会设置为相同的值，会使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto。1:如果七个值中没有auto情况，则浏览器会调整margin-right值以使等式满足。如果有设置auto，则浏览器会自动调整auto的值，以使等式成立。以上等式必须满足，如果相加结果等式不成立，则称为过度约束，则浏览器会让等式自动调整。3:如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大。
2023-12-11 12:05:02
1067
原创 css中详解盒子模型组成部分—内容区，边框，内边距，外边距
—盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width。——由于页面中的元素都是靠左靠上摆放的，所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置（挤别人）style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边。
2023-12-08 08:46:01
2311
原创 CSS中常用的10个文本样式属性
一个页面中，文本样式，是必不可少的，当然css也给我们准备了很多很多很多的文本样式，以下列举了10个常用的文本样式属性及常用的属性值，掌握了，也基本满足使用了。超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline。父元素如果不设置高，由图片撑开，此时图片的底部就会有三像素的空白。- 通过调整文本之间的空格的大小，来达到一个两端对齐的目的，也可以让图片水平居中。2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰。
2023-12-08 08:35:38
1019
原创 CSS中设置字体样式的5种常用属性
当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体，该样式可以同时指定多个字体，多个字体之间使用‘，’分开，当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个， 浏览器使用的字体默认就是计算机中的字体， 如果计算机中有，则使用，如果没有就不用，在开发中，如果字体太奇怪，用的太少了，尽量不要使用， 有可能用户的电脑没有，就不能达到想要的效果。如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式。
2023-12-06 21:04:55
880
原创 CSS中区分行高，行间距
行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，控制文字行与行之间的距离， 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示。对于单行文本来说，可以将行高设置为和父元素的高度一致， 这样可以是单行文本在父元素中垂直居中。字体框是字体纯在的格子，设置font-size实际上就是在设置字体框的高度。3.可以直接传一个数值，则行高会设置字体大小相应的倍数，eg：2。2.可以指定一个百分数，则会相对于字体去计算行高，eg：30%行高会在字体框的上下平均分配。
2023-12-06 21:04:45
657
原创 CSS中，什么是文档流，文档流中元素各自有什么特点？
网页是一个多层的结构，一层叠着一层，通过css可以分别为每一层来设置样式-作为用户来讲，只能看到最顶上一层-文档流处在网页的最底层，文档流是网页的基础，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中，在其上排列-元素主要有两个状态，在文档流中，不在文档流中（脱离文档流）****
2023-12-06 21:04:34
433
原创 CSS中常用的4种长度单位
像素是我们在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的，但是这些像素点，是不能直接看见。在现实生活中，我们知道很多的长度单位，例如米，厘米，寸，尺等等，在css的世界中，也有很多的长度单位。- 不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。- 也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值。- 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变。
2023-12-05 19:23:21
401
原创 css新闻链接案例
background-image: url(./图片素材/dotBg.gif);利用html和css构建出新闻链接案例，使用渐变色做出背景色变化。利用背景图片，调整位置完成。
2023-11-30 15:52:39
575
原创 CSS中超链接的4种伪类
总结：link和visited是a标签独有的状态，hover和active是所有的元素都可以设置的。2、 :visited 用来表示访问过的链接，由于隐私的原因，所以visited只能改颜色。1、 :link 用来表示未访问过的链接（正常链接）正确排序：L-V-H-A love hate原则。3、:hover 用来表示鼠标移入的状态。4、:active 鼠标点击后的状态。
2023-11-30 15:36:13
1365
原创 CSS中样式冲突及选择器权重问题
通过不同的选择器选中同一个元素，进行一样的样式设定，发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定。4，选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器 量变达不到质变。1，比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示。通配符、子选择器、相邻选择器等。如*、>、+ 0000。3，如果优先级计算后相同，此时则优先使用靠下的样式。2，(并集选择器)分组选择器是单独计算的。总结：一般来说：选择器越具体，优先级越高。继承的样式 没有优先级。
2023-11-30 15:34:43
571
原创 CSS中常用的伪元素选择器
伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）1，::first-letter 表示第一个字母。2，::first-line 表示第一行。3，::selection 选中的内容。4，::before 元素的开始位置。5，::after 元素的结束位置。before和after必须要结合content使用。
2023-11-21 16:05:01
696
原创 CSS中常用的伪类选择器
1、 :first-child 第一个子元素2、 :last-child 最后一个子元素3、 :nth-child() 选中第n个子元素特殊值：n 所有的、2n或even 选中偶数、2n+1或odd 选中奇数—以上这些伪类都是根据所有的子元素进行排序1、:first-of-type2、:last-of-type3、:nth-of-type()功能跟上面相似，
2023-11-21 16:03:20
583
原创 css中5种属性选择器
属性名=属性值]{} 选择含有指定属性和属性值的元素。[属性名^=属性值]{} 选择属性值以指定值开头的元素。[属性名$=属性值]{} 选择属性值以指定值结尾的元素。[属性名*=属性值]{} 选择属性值含有某值的元素。[属性名]{} 选择含有指定属性的元素。
2023-11-20 15:51:46
395
原创 CSS中4种关系选择器
父元素：直接包含子元素的元素子元素：直接被父元素包含的元素祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素兄弟元素：拥有相同父元素的元素叫做兄弟元素根据以上的关系，可以使用如下选择器。
2023-11-20 15:48:54
651
原创 CSS中2种复合选择器
注意：若交集选择器中有元素选择器，必须使用元素选择器开头。语法：选择器1，选择器2，选择器3····语法：选择器1选择器2选择器n{}作用：同时选择多个选择器对应的元素。作用：选中同时符合多个条件的元素。例子：#b1,p,.red。
2023-11-20 15:47:00
325
原创 Java Script 经典案例九九乘法口诀表的打印
其中要注意的点是内层循环，内层循环（横向循环）的变量 j 一定要小于等于纵向循环 i ，因为横向的打印数是和纵向的层数是相等的，所以 j 是的值是不能超过 i 的。表分为横向打印和纵向打印，，那么就需要用到双重for循环嵌套，外层循环的作用是当这一层横向打印完毕继续打印下一行，内层循环实现横向打印。表格来包裹乘法口诀表，最为简单和简洁。最后添加css样式即可，下面附上完整代码。下面来看看Javascript部分的代码。
2023-11-07 21:03:19
231
原创 label实现轮播点击图效果
当用户点击标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；< label> 标签的 for 属性应当与相关元素的 id 属性相同。标签的作用是为鼠标用户改进了可用性，1、先了解label与input的联系。
2023-11-02 14:15:40
350
1
原创 利用transition过渡实现hover效果出现一个背景样式
创建结构li里面用超链接a包裹主体内容，兄弟标签div创建需要移出的背景样式。先引入一个基础样式base.css，再引入一个首页样式index.css。使用transition实现过渡效果，设置时间等属性。base.css就是最基本的清除默认样式代码。index.css是首页需要的样式。一、首先构建一个html结构。
2023-11-02 13:54:25
360
原创 CSS中4种常用选择器
作用：根据元素的class属性值为元素分组，它和id类似，不同的是可以重复使用。作用：根据元素的id属性值选中一个元素。作用：根据标签名来选中指定的元素。例子：p{},h1{},h3{}语法：.class属性值{}作用：选中页面中的所有元素。语法：#id属性值{}
2023-11-02 13:42:37
104
原创 CSS的语法
CSS的注释，作用和HTML注释类似，只不过它必须编写在。在一个声明块中可以写多个声明，多个声明之间使用;——声明块紧跟在选择器的后边，使用一对{}括起来，——声明块中实际上就是一组一组的名值对结构，——通过选择器可以选中页面中指定的元素，——通过声明块来指定要为元素设置的样式。声明的样式名和样式值之间使用:来连接，例如：p 就是选中页面中所有的p元素。最后一个可以省略，但一般都写上、一组一组的名值对我们称为声明，
2023-10-31 08:51:34
53
原创 HTML中音视频标签—— ＜audio ＞ ,＜video ＞
autoplay 音频文件是否自动播放 打开页面时，音乐会自动播放， 但目前为止，大部分浏览器是不可以自动播放的。音视频文件引入时，默认情况下不允许用户自己控制播放停止,IE9以下的浏览器是不支持的。除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径。controls 是否允许用户控制播放，不用给值。用来向页面中引入一个外部的音频文件。使用方式跟音频基本上一样的。loop 是否循环播放。来向页面中引入一个视频。
2023-10-30 14:01:25
652
前端期末课程设计之动态小说网站
2023-11-30
前端的简单网页设计，html+css+部分js
2023-11-30
小说网，html+css制作的静态网页
2023-10-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人