汪末末-CSDN博客

原创 CSS基础：你必须要知道的行高属性 line-height

CSS中的行高（line-height）是指网页中每行文字之间的距离，就是对于同一行内的不同内容，行高决定它们之间的间距。换一句话来说，在CSS中包括文字的每一行不是只有文字的高度，其实还有上间距、下间距，所以行高指的是文字的高度+上下间距。合理设置文字行高不仅能够让网页更加美观与整洁，还能够增加用户的视觉与阅读体验，在大段文字中，合适的行高可以让用户阅读起来更加舒适。你可能还是不明白行高是什么？下面我通过几图来仔细给大家讲一下吧！

2023-11-10 15:25:27 4274 2

原创 jQuery.js - 前端必备的Javascript库

jQuery是一个快速简洁、免费开源易用的JavaScript框架，倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，以及我们开发中常用到的操作DOM的API，优化HTML文档操作、事件处理、动画设计和Ajax交互，使更多的网页交互效果简单化。以上仅是个人见解，若有不足之处欢迎在下方评论指出

2023-11-09 13:55:20 149

原创 CSS必学：元素之间的空白与行内块的幽灵空白问题

CSS空白现象就是非常常见的问题之一，虽然它已经被发现很久，但仍然有许多新手和经验丰富的开发者们忽略了它对页面布局的影响。我们一起来看看吧！

2023-11-04 21:53:06 628

原创 CSS必学：你需要知道的盒子模型的秘密

CSS 所有的HTML 标签元素在网页中都生成了一个描述该元素在HTML文档布局中所占空间的矩形框，我们可以形象地将它看作是一个盒子，它会把各种html元素按照设计需求包裹起来，将html元素进行封装，就组成了各式各样好看的网页。简单一点来说，页面中的每一个标签，都可以看作是一个盒子，通过盒子的视角我们可以更直观地进行网页排版布局.

2023-10-24 03:15:45 311

原创 ❤️接近两万字 CSS之熟练掌握background，这一次帮你彻底弄懂背景属性❤️（建议收藏）

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin在项目中为了网页的美观，通常会给网页或者某个元素设置背景，这时就会用到 CSS中background属性来实现这个效果，这个属性是一个很基本的而且比较常用的样式，那么应该怎样来运用这个属性呢？一起来看看吧！！！background的属性的语法格式background的属性可以通过以下的参数来实现背景效果：background : background-color || backgroun

2021-09-14 01:50:47 475 1

原创一起来探索CSS中margin属性的奥秘吧！！

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin众所周知 margin属性是用来声明当前所设置或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。一直以来我认为它是一个很简单的属性，但是在最近的所做的项目中我遇到了一些关于 margin属性所涉及到的问题，下面就给大家分享一下吧！！margin 属性的简单概述说到 margin 属性，就必须先了解 css盒子模型（Box Model），因为css盒子模型是用来设计和布局的，本

2021-09-01 22:51:43 556

原创快来让你的网页色彩绚丽--linear-gradient与radial-gradient

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin随着前端技术的发展，单一的背景色已经满足不了客户的需求了，所以在前端开发中我们常常会用到一些渐变色的效果，这样可以使前端页面更加美观。那么渐变色的效果到底是怎么来的？我们应该怎么做才能实现这一效果呢？接下来就一起来看看吧！实现原理css要实现渐变，就必须使用渐变函数 linear-gradient（）来设置 background 或 background-imge 属性。那么 lin

2021-04-22 01:03:17 986 1

原创怎样给边框添加阴影？CSS3属性box-shadow帮你搞定！

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin关于box-shadow属性，有的小伙伴可能用的时候直接复制已有的，并没有仔细了解过box-shadow属性的参数分别是什么含义，最后导致阴影的样式不能按照自己的需求自由控制，让自己感到很苦恼。接下就一起来好好学习这个属性吧！！以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! ???? 后续继续更新!!...

2021-04-09 21:22:17 4564 2

原创还在用图片表示三角形与箭头吗？不会用CSS来绘制你就OUT了！！！

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin你是否还在用图片制作三角形和剪头吗？那就太out了。css可以轻松绘制出你想要的三角形与箭头，而且颜色大小可以随意改变，还不用担心失真等问题。那就一起来看看吧！！实现原理首先来看看当我们给元素添加border时，border的样子。假设代码如下：<div class="box"></div>.box{ width:100px; height:100p

2021-04-05 05:11:46 576

原创 JavaScript 语法：语法约定与程序调试

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinJavaScript 语法约定1、大小写的区分1). JavaScript的关键字，永远都是小写的；2). 内置对象，如Math和Date是以大写字母开头的；3). 对象的名称通常是小写；若是多个单词，驼峰（Camel）命名法。驼峰（Camel）命名法：开头单词小写，后面单词首字母大写。使用的很普遍，很多人习惯这种命名方法。示例：userName。2、变量、对象和函数的名称命名

2020-10-25 23:23:52 188

原创 JavaScript 语法：注释与输入 / 输出

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinJavaScript 注释JavaScript 注释用于解释 JavaScript 代码，提高代码的可读性，也可以用于在测试替代代码时阻止执行，而且JavaScript 代不会执行注释。1、JavaScript 单行注释（最常见）单行注释以 // 开头，任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。以下案例在每条代码行之前使用单行注释：<input

2020-10-24 19:22:37 484

原创 JavaScript 语法：流程控制语句

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinJavaScript流程控制语句的三种基本结构：顺序结构，选择结构，循环结构顺序结构从上到下执行的代码就是顺序结构，程序默认就是由上到下顺序执行的，也就是按照代码的先后顺序，依次执行。条件选择结构控制语句条件选择控制语句用于基于不同的条件来执行不同的动作，通常在写代码时，对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句，条件判断语句包括两类：if判断语句；switch多

2020-10-20 18:07:14 374

原创 JavaScript 语法：运算符号

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinJavaScript要进行各种各样的运算，就要使用不同的运算符号。JavaScript 算数运算符算数运算符用于对数字执行算数运算，分别有以下几种：运算符描述+加法-减法*乘法/除法%系数++递加–递减1、+、-、*、/ 这四种算数运算符跟数学中的运算方式是一致的，如下：var a=5+2;var b=6-3;

2020-10-17 05:57:31 586

原创 JavaScript 语法：数组的定义及其常用属性与方法

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin当一个程序需要用到多个数据的时候，这时我们就需要用到数组来将这些数据集合起来，以便后期调用。接下来就开始学习吧！！数组的定义方法1 、第一种数组声明方式：var 数组名 = [元素1, 元素2, …]，这种定义方式比较常用。例如：var arr=[1,2,3];var arr1=['字符串',1,null];arr – 变量名2、第二种数组声明方式：var 数组名 = new

2020-10-16 20:45:00 735

原创 JavaScript 语法：变量、数据类型及数据类型转换

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinJavaScript 语法变量赋值变量用 var 关键字，情况如下：1）先声明变量再赋值var varName; varName="你好~";var －用于声明变量的关键字varName －变量名2）同时声明和赋值变量var varName="你好~";var a=10,b=20,c=30;注意：多个变量同时声明与赋值时需要用逗号’,'隔开。3）不声明直接赋值 (

2020-10-14 20:04:38 407

原创 JavaScript 简介与引用

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin我们通常写好的HTML网页是处于一个静态的效果，在用户体验这一方面就不是很好，给人一种死板的感觉。这里我们就可以用到JavaScript来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。接下来就开始来学习JavaScript吧！！JavaScript是什么？1、 JavaScript的概念JavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为

2020-10-13 23:44:26 393

原创 CSS 样式书写顺序及规范

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin在项目中，大部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。下面就开始学习吧！！各种类型属性的书写顺序及作用书写顺序优先级第一定位属性：position display float left

2020-10-12 10:57:26 3549 1

原创 CSS 选择器权重计算与优先级

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin在讲CSS 选择器权重计算与优先级之前，我们先来了解一下CSS是用来干什么的？CSS是用来通过添加样式使网页更加美观，也就是说CSS是利用选择器来美化网页的，使用户可以在网页上更清晰地找到自己需要的东西。CSS添加样式的方式：有内部样式（内部样式就是在html文件中通过标签来添加样式）外联样式（通过标签将外部的样式css文件引入到html文件中）还有行间样式，即在元素标签中通过styl

2020-10-02 23:51:44 503

原创 CSS 单行／多行文本溢出显示省略号（...）的实现

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin我们在项目开发的过程中也许都遇到过这样的问题：我们需要实现这样一个需求，在一个父级元素中隐藏一个可能过长的文本。而这个需求可以分解为两个，一个是单行溢出省略，一个是多行溢出省略。下面我们就开始一起学习吧！实现文本超出显示省略号的常见属性1）overflow: hidden这里我们需要注意到一点：这里的overflow并不是设置为父级元素div的属性，而是给需要文本省略的标签的属性，需要和o

2020-09-30 19:09:11 888

原创 CSS 溢出overflow属性的使用

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin在CSS中，如果给一个盒子设置了固定的宽度与高度，但内容过多就会溢出盒子本身的宽度或高度。此时，就可以使用 overflow 属性来控制内容溢出时的处理方式。那么接下来就开始来学习这个属性吧！overflow 属性值如下：属性值含义visible不剪切形式也不添加转动条，也就是元素的内容在元素框之外也可见auto如果内容被剪裁，则浏览器会显示滚动条以便查看其余的

2020-09-29 01:48:44 10126

原创 CSS display属性的作用

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin网页上的每个元素都是一个矩形框。CSS中的display属性决定了矩形框的行为。display属性是我们在前端开发中常常使用的一个属性。display的属性值如下：属性值含义block块对象的默认值。用该值为对象之后添加新行none隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline内联对象的默认值。用该

2020-09-27 23:16:21 733

原创 CSS3 rgb and rgba（透明色）的使用

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin对于颜色相信大家都很敏感，眼睛所见之处都存在颜色，那在css中我们用什么来表示颜色呢？CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA)，十六进制颜色值和预定义的颜色名称。我们常使用的是RGB与RGBA。那我们就来说一下它们之间的区别吧！rgb与rgba的含义RGB 是代表Red（红色）、Green（绿色）、 Blue（蓝色）三个单词的缩写。RGBA 颜色值

2020-09-24 04:52:14 5923

原创 CSS单位px、em、rem及它们之间的换算关系

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者的区别与优势是什么？接下来我们就来学习一下吧！单位px、em、rem分别表示什么？1、 px(Pixel) 相对于显示器分辨率而言，表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（这里的像素与设备的物理像素有一定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。px的特点如下：IE无法调整

2020-09-20 23:29:53 4401 6

原创 CSS z-index属性层重叠顺序

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须遮住另一个。但是如何控制哪个元素放在上层，这就出现了z-index这个属性。z-index属性的含义一个元素在文档中的层叠顺序，用于确认元素在当前层叠上下文中的层叠级别。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index的属性值越高越靠前。元素可拥有负的 z-index 属性值。z-i

2020-09-19 21:09:47 3795 1

原创 CSS 元素居中方式总结

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin在开发过程中，很多网页需求要求我们居中一个div，比如html文档流当中的一块div，比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式，接下来就分享下一下几种常用的居中方式。1、margin:0 auto 水平居中也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。前提：已设置width值。HTML:<div class

2020-09-18 22:23:47 337

原创 CSS属性 Position的几种定位方式

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin在讲几种定位方式之前，我们先来了解一下什么是普通流(normal flow)？除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。position 属性的作用position 用于定位盒子对象，有时一个布局中几个小对象，不易用css paddin

2020-09-18 03:57:00 6965 2

原创 CSS 浮动和清除浮动方法总结

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin什么是浮动 float？标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒子高度为0。（浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开）。div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只要

2020-09-17 00:13:48 463 1

原创 animate.css 动画种类（详细）

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin以下为各种动画类型包含的不同动画效果类，仅供参考。具体可查看animate.css 官网。bounce 弹跳2. flash 闪烁3. pulse 放大，缩小4. rubberBand 放大，缩小，弹簧5. shake 左右晃动6. headShake

2020-09-16 20:30:59 1786 1

原创 animate.css 动画库的下载与使用

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinanimate.css是什么？animate.css 是一个有趣，酷炫的，跨浏览器的动画库，里面包含了许多常用的css动画。你可以将它用于你的项目中，不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。我们要使用的它的话需要把它加到自己的页面中，接着就可以在需要动画的元素标签上直接调用里面的动画，然后调节动画次数延迟等达到自己需要的效果就可以了。怎么获取 animat

2020-09-16 20:11:42 2288

原创 Bootstrap JavaScript插件：Affix插件 (affix.js)

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinAffix插件（affix.js）是一个很有用的插件，它可以让你的导航始终都固定在某个位置。一开始的时候，导航出现在页面的某个位置，当页面滚动一定距离时，无论页面如何滚动，它都固定在一个位置，就像被帖在页面上一样。使用方法1. 必须定义一个监听页面滚动的元素，它通常是 body 元素。需要给监听元素定义 data-spy=“scroll” 属性来启动滚动监听功能，还要添加 data-targe

2020-09-10 16:38:21 1260 1

原创 Bootstrap JavaScript插件：轮播插件 (carousel.js)

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinBootstrap 的轮播插件（carousel.js）是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件，它的内容可以是图片、视频、或者其他任何内容。整体结构Bootstrap中的轮播由一个 class=“carousel” 的容器定义，其中包含轮播指示器、轮播内容、轮播的控制按钮。为了确保在播放时，能够对控制按钮和轮番指示器进行正常定位，需要为容器定义一个 id。<div id=

2020-09-10 16:33:08 3006

原创 Bootstrap JavaScript插件：折叠内容插件 (collapse.js)

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin折叠插件（collapse.js）可以很容易地让页面区域折叠起来。当列表菜单的条目特别多，而页面空间有限时，使用类似于手风琴的折叠菜单可以节约页面空间，方便用户浏览。实例.collapse 隐藏内容.collapsing 在转换期间应用.collapse.in显示内容可以使用带有href属性的链接，或具有数据目标属性的按钮。在这两种情况下，都需要data-toggle=“collap

2020-09-10 16:27:29 2482

原创 Bootstrap JavaScript插件：按钮 (button.js)

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin状态提示通过自定义属性和简单的JavaScript，就可以让按钮具有状态提示功能。比如，没有点击按钮时，正常显示；点击按钮时，触发相应的状态，并显示该状态对应的文本信息。1. 加载状态要让按钮显示加载状态，首先要给按钮添加 data-loading-text 属性，它的值为加载状态要显示的文本信息，如 “Loading…”：<button type="button" id="myBu

2020-09-10 16:22:44 1199

原创 Bootstrap JavaScript插件：警告信息 (alert.js)

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin警告框插件（alert.js）为警告框组件一个关闭功能，就是点击警告框的关闭按钮，可以让警告框消失，并将它从 DOM 中删除。使用方法1. 通过data属性关闭警告框为警告框添加一个可选的.alert-dismissible类和一个关闭按钮，就可以为警告框组件提供关闭功能。关闭按钮可以使用.close的任何元素定义，不管什么元素都必须使用.close类，并包含data-dismiss="al

2020-09-10 16:04:11 980

原创 Bootstrap JavaScript插件：弹出框（popover.js）

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin弹出提示（popover.js）是工具提示的子类，它比工具提示多了一个 content 参数，是工具提示插件的拓展，并且弹出框依赖于工具提示插件tooltip.js，如果你定制了 Bootstrap，就一定要将依赖的插件编译进去。初始化。由于性能的原因，工具提示和弹出框的 data 编程接口（data api）是必须要手动初始化的。在一个页面上一次性初始化所有弹出框的方式是通过data-tog

2020-09-10 16:00:02 1350

原创 Bootstrap JavaScript插件：工具提示（tooltip.js）

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMinBootstrap 提示工具（Tooltip）插件工具可以通过鼠标移动到选定的特定的元素上时，显示出相关的提示语。当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。静态样式：用法提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是

2020-09-09 17:21:57 1431

原创 Bootstrap JavaScript插件：可切换标签 (tab.js)

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin一个可切换的标签导航包含两部分内容，一个是标签导航，一个是内容面板。每个标签都有一个对应的内容面板，当标签发生切换时，自动切换到相应的内容面板。内容面板如下：<div class="tab-content"> <div class="tab-pane active" id="tab1" role="tabpanel"> <p>第一部分</p>

2020-09-09 17:08:53 1495

原创 Bootstrap JavaScript插件：滚动监听 (scrollspy.js)

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。如下所示，滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示。用法注意：依赖 Bootstrap 的导航组件滚动监听插件依赖 Bootstrap 的导航组件用于高亮显示当前激活的链接。导航栏链接必须有可解析的id目标。例如，<a href=“#home”>home</a>必须对应于

2020-09-09 16:57:37 770

原创 Bootstrap JavaScript插件：下拉菜单 (dropdown.js)

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin下拉菜单主体结构参照 Bootstrap 组件：下拉菜单组件的使用部分，这里主要讲下拉菜单的主要效果的实现。使用通过data数据属性或JavaScript，dropdown插件通过切换父列表项上的.open类来切换隐藏的内容（下拉菜单）。在移动设备上，打开一个下拉菜单会添加一个.dropdown背景作为一个点击区域，当你在菜单外点击时，可以关闭下拉菜单。这意味着从一个打开的下拉菜单切换到

2020-09-09 16:54:08 1924

原创 Bootstrap JavaScript插件：模态框（modal.js）

作者:WangMin格言:努力做好自己喜欢的每一件事CSDN原创文章博客地址 ???? WangMin注意：模态框不支持嵌套，需要嵌套模态框的话，只能自己手动实现。模态框包含的html最好尽量作为body的直接子元素，以避免其他组件影响模态框的展现和功能。弹出层出来以后，页面的滚动条会被覆盖。模态框主体结构包含了模态框的头、体和一组放置于底部的按钮 :modal 弹出层父级modal-dialog 弹出层modal-content 弹出层的内容区域modal-header 弹

2020-09-09 16:44:35 2164

空空如也

空空如也