奶盖不加糖-优快云博客

原创仿京东三角效果案例

下面的效果是如何实现的呢？案例：<head> <style> div { /*相对定位*/ position: relative; width: 200px; height: 100px; background-color: pink; margin: 100px auto; }

2021-02-22 14:19:36 292

原创 CSS 边框可以模拟三角效果

CSS 三角是怎么来的了？做法如下：<head> <style> div { /*我们用css 边框可以模拟三角效果*/ width: 0; height: 0; border-top: 10px solid red; border-right: 10px solid green; border-bottom: 1

2021-02-22 13:07:10 285

原创 CSS的margin负值运用：压住盒子的相邻框，实现淘宝商品页面的边框操作

margin负值之美负边距+定位：水平垂直居中。一个绝对定位的盒子，利用父级盒子的 50%，然后往左（上）走自己宽度的一半，可以实现盒子水平垂直居中。压住盒子的相邻框如淘宝的商品页面：案例： <style> div { /*浮动的盒子是紧贴在一起的*/ float: left; width: 200px; height: 300px; bor

2021-02-21 23:38:24 420

原创 CSS中为什么会出现滑动门技术，它具体应用在哪里？

滑动门为了便各种特殊形状的背景能够适应元素文本内容的多少，出现了CSS滑动门的技术。它从新角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵（主要是背景位置）和盒子padding 撑开宽度，以便适应不同数字的导航栏。一般经典布局都是这样的：...

2021-02-21 22:29:23 241

精灵图为什么需要精灵图一个网页中往往会应用很多很小的背景图片作为修饰，当网页中图片过多的时，服务器就会频繁地接送和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称为CSS Sprites 、CSS雪碧）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。精灵图（sprites）的使用使用精灵图核心：精灵技术主要针对于背景图片使用。就是把多个小图片

2021-02-20 22:30:56 312

原创 CSS溢出文字省列号显示怎么做？

溢出文字省列号white-space 设置或检索对象文本显示方式。通常我们用于强制一行显示内容。white-space ：normal ; 默认处理方式white-space : nowrap ; 强制在同一行显示所有文本，直到文本结束或者遇到br 标签对象换行。tex-overflow 文字溢出设置或检索是否使用一个省略标记（…）标示对象内文本溢出tex-overflow : clip; 不显示省略标记（…），而是简单的裁切。tex-overflow : ellipsis; 当对象

2021-02-20 15:33:28 257

原创 CSS中该怎么垂直居中？怎么去除图片底侧空白缝隙？

vertical-align 垂直对齐有宽度的块级元素居中对齐，是margin : 0 auto;让文字居中对齐，是 text-align ： center;vartical-align 垂直对齐，它只针对于行内元素或者行内块元素。vertical-align : baseline | top |middle | bottom设置或检索对象内容的垂直方式。注意：vertical-align 不影响块级元素中的内容对齐，它只针对于行内块元素或者行内块元素。特别是行内块元素，通常用来控

2021-02-20 14:28:46 257

原创 CSS用户界面样式:鼠标样式cursor ,轮廓线 outline ,防止拖拽文本域resize ,用户界面样式总结

文章目录CSS用户界面样式鼠标样式cursor轮廓线 outline防止拖拽文本域resize用户界面样式总结CSS用户界面样式所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。更改用户的鼠标样式。表单轮廓等。防止表单域拖拽鼠标样式cursor设置或检索在对象移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白、默认pointer小手move移动text文本not-allowed禁止案例：

2021-02-20 12:13:12 275

原创 CSS之定位中绝对定位的子绝父相说法有误，子绝原来不一定父相

借知乎的回答如下解释：首先，我想告诉你的是，如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。...

2021-02-20 10:30:19 1166

原创 CSS元素的显示与隐藏：display 属性， visibility 属性， overflow 溢出

元素的显示与隐藏类似网站的广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。本质：让一个元素在页面中隐藏或者显示出来。display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏display 属性display 属性用于设置一个元素应如何显示。display:none ;隐藏对象display:block ；除了转换为块级元素之外，同时还有显示元素的意思。display 隐藏元素后，不再占有原来的位置。后面应用及其广泛，搭配JS可以做很多的

2021-02-19 21:28:53 935

原创 CSS之定位：边偏移静态定位static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性定位sticky，子绝父相的由来,绝对定位的盒子居中, 堆叠顺序

为什么需要定位？某一个盒子可以自由的在一个盒子内移动位置，并且压住其他盒子。当我们滚动窗口的时候，盒子的是固定屏幕的某个位置的。为什么需要定位以上效果，标准流或者浮动都无法实现，此时需要定位来实现。所以：浮动可以让多个盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。定位组成：定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位 = 定位模式 +边偏移。定位模式

2021-02-18 21:55:30 1882 2

原创 CSS之浮动：什么是浮动，float 属性，float之浮漏特点，（浮动元素与父盒子，兄弟盒子的关系），清除浮动的方法：额外标签法，父级添加overflow，使用after,使双伪元素

浮动(float)传统网页布局的三种方式网页布局的本质———用CSS来摆放盒子。把盒子摆放到相应位置。CSS提供了三种传统布局方式（简单来说，就是盒子如何进行排列顺序);普通流（标准流）浮动定位标准流（普通流/文档流）所谓标准流；就是标签按照规定好默认方式排列。块级元素会独占一行，从上到下顺序排列。常用元素：div ,hr ,p ,h1-h6 ,ul ,ol ,dl ,from ,table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span ，a

2020-12-14 23:48:11 1410 4

原创 javascript之基础:数据类型:变量的数据类型,分类,简单数据类型(Number,String,Boolean,Undefined,null）,检测变量的数据类型typeof,数据类型的转换

数据类型1.为什么需要数据类型？在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义不同数据类型。简单来说，数据类型就是数据的类别型号，比如姓名‘K.D’，年龄18，这些数据类型都是不一样的。2.变量的数据类型变量是用来存储值所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说是动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会自动被确

2020-12-14 15:52:41 647

原创 JavaScript 之基础：变量：什么是变量？变量在内存中存储，变量的使用，更新变量，同时声明多个变量，声明变量的特殊情况，变量命名规范，交换变量

什么是变量？白话：变量就是一个装东西的盒子。通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。|—| |----| |—||bob| |true| |35 ||—| |----| |—|变量在内存中存储本质：变量是程序在内存中申请的一块用来存放数据的空间。类似于我们酒店的房间，一个房间可以看作一个变量。|—————————————————||| 内存 || || |6|

2020-12-13 13:54:41 730

原创 JS注释

JS注释<script> //1.单行注释 ctrl + / /*2.多行注释默认的快捷键 shif + alt +a 2.多行注释 vscode 中修改多行注释的快捷键: ctrl + shift + / */</script>

2020-12-13 12:25:14 113

原创 CSS中圆角边框、盒子阴影、文字阴影具体运用

圆角边框在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。语法：border-radius:length;其中每一个值都可以为数值或百分比的形式。技巧：让一个正方形变成圆圈语法：border-radius:50%；案例：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

2020-12-05 21:59:24 389

原创新闻列表综合案例：知识点：边框，去掉列表默认的样式，清除内外边距等

知识点回顾：边框border 可以设置元素的边框。边框有三部分组成：边框宽度（粗细) , 边框样式 , 边框颜色。语法：border : border-width || border-style || border-color边框样式 border-style可以设置如下值none: 没有边框即忽略所有边框的宽度（默认值）。solid: 边框为单实线（最为常用）。dashed: 边框为虚线。 dotted: 边框为点线。去掉列表默认的样式以为无序列表和有序列表前面默认的列表样式，

2020-12-05 14:51:26 781

原创练习：新浪导航栏

新浪导航栏的核心就是因为里面的数字不一样多，所以不方便给宽度，还是给padding，撑开盒子<head> <title>新浪导航栏</title> <style> .nav { height: 41px; background-color: #fcfcfc; /*上边框 3像素实线*/ border-top: 3px solid

2020-11-18 01:00:20 411

原创 js淘宝点击关闭二维码案例

案例：淘宝点击关闭二维码当鼠标点击二维码关闭按钮的时候，则关闭整个二维码。案例分析：核心思路：利用样式的显示和隐藏完成，display:none 隐藏元素 display：block显示元素点击按钮，就让这个二维码盒子隐藏起来即可。例子：<head> <style> .box { position: relative; width:74px; height: 88px;

2020-11-15 00:17:44 1102

javascript 输入和输出语句

javascript 输入和输出语句属性作用window.alert()写入警告框alert(msg)浏览器弹出警示框document.write()写入 HTML 输出innerHTML写入 HTML 输出console.log(msg)写入 HTML 元素console.log(msg)写入浏览器控制台（浏览器控制台打印输出信息）prompt(info)浏览器弹出输入框，用户可以输入例子：<head> &

2020-11-14 22:12:20 1021

原创初识js：渲染引擎和js引擎；js的组成： ECMAScript， DOM， BOM

浏览器执行js的简介浏览器分为两部分：渲染引擎和js引擎。渲染引擎：用来解析 HTML 与 CSS，俗称内核，比如chrome的 blink，老版本的 webkit。js 引擎：也称为js解析器。用来读取网页的javaScript代码，对其处理后运行，比如chrome浏览器V8。浏览器本身不会执行js代码。而通过内置 javaScript 引擎（解释器）来执行 JS 代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 javascript 语言归为脚本语言，

2020-11-14 20:51:17 870

原创 js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作

操作元素JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性改变元素内容element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉element.innerHTML起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行...

2020-11-14 17:54:53 6753

原创 js事件基础：事件概述，事件的组成，执行事件的步骤，常见的鼠标事件

文章目录事件基础事件概述事件的组成：执行事件的步骤常见的鼠标事件事件基础事件概述JavaScript使我们有能力创建动态页面，而事件基础是可以被JavaScript侦测到的行为。简单理解：触发—响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某个按钮时产生一个事件，然后去执行某些操作。事件的组成：事件源：获取对象，谁被触发了事件类型：用什么来触发事件处理程序：做了什么事，一般通过一个匿名函数赋值的方法来完成。例子：&

2020-10-08 14:54:37 867

原创 js中如何获取页面的元素？根据 ID 获取，根据标签签名获取，通过 HTML5 新增的方法获取，特殊元素获取

如何获取页面的元素DOM在我们实际开发中主要用来操作元素。我们应该如何获取页面的元素呢？获取页面元素可以使用以下几种方式根据 ID 获取根据标签签名获取通过 HTML5 新增的方法获取特殊元素获取根据 ID 获取使用 getElementById() 方法带有ID的元素对象。语法：//先找到文档document//2.get 获得 element 元素 by 通过驼峰命名法var element = document.getElementById(id);参数：

2020-10-07 22:41:36 7597

原创笔记：什么是DOM？？

什么是 DOM？文档对象模型 (Document Object Model,简称 DOM),是W3C组织推荐的处理可扩展语言 (HTML或者 XML)的标准编程接口。W3C已经定义一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。文档：一个页面就是一个文档，DOM中使用 document 表示元素：页面中的所有标签都是元素，DOM中使用 element 表示节点：网页中的所有标签都是节点（标签、属性、文本、注释等），DOM中是使用 node 表示DOM把以上内容都看做

2020-10-07 15:40:21 304

原创笔记：API 和 Web API

APIAPI (Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力，而又无须访问源码，或理解内部工作机制的细节。简单理解：API是给程序员提供的一种工具，以便能更加轻松的实现想要完成的功能。比如手机充电的接口我们要实现充电这个功能：我们不关心手机内部怎么存电不关心充电线怎么制作只知道拿着充电线插进充电的接口就可以充这个充电接口就是一个API。Web APIWe

2020-10-07 15:16:08 523

原创 CSS盒子模型：盒子模型( Box Model)组成，边框，表格的细线边框，内边距（padding) 边框会影响盒子的实际大小，外边距 (margin) 外边距合并，清除内外边距

盒子模型：页面布局要学习三大核心：盒子模型，浮动和定位页面布局过程：1.先准备好相关的网页元素，网页元素基本都是盒子Box。2.利用CSS设置好盒子的样式，然后摆放到相应位置。3.往盒子里面装内容。网页布局的核心本质：就是利用CSS摆盒子。盒子模型( Box Model)组成所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容。...

2020-10-07 14:29:49 1400 1

原创五彩导航栏：行内转换模式，文字水平居中，背景图片，链接伪类选择器

五彩导航栏要巩固的内容：链接属于行内元素，但是此时需要宽度和高度，因此需要模式转换。里面文字需要水平居中，因此需要单行文字垂直居中的代码。链接里面需要设置背景图片。因此需要用到背景的相关属性设置。鼠标经过变化背景图片，因此需要用到链接伪类选择器。<head> <title> 五彩导航栏 </title> <style> /*后代选择器*/ .nav a { /*转换为行内块*/ dis

2020-09-26 15:43:24 552

原创 CSS的背景：背景颜色，背景图片，背景平铺，背景图片的位置，背景图像固定（背景附着），背景复合写法，背景色半透明

CSS的背景通过CSS的背景属性，可以给页面元素添加背景样式。背景属性可以设置颜色、背景图片、背景图片位置、背景图像固定等。背景颜色background-color属性定义了元素的背景颜色。background-color:颜色值；一般情况下元素背景颜色默认值是transparent （透明），我们也可以手动指背景颜色为透明色。background-color:transparent;例子：<head> <style> div { wid

2020-09-22 00:24:12 917

原创链接a转换为块级元素之小练习：简洁版小米侧边栏

简洁版小米侧边栏案例的核心思路分为两步：把链接 a 转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度。鼠标经过 a 链接设置背景颜色。<head> <title>简单版小米侧边栏</title> <style> a { /*转换为块级元素*/ display:block; /*宽高*/ width: 230px; height: 40px; /*背景颜

2020-09-20 16:54:37 1729

原创 CSS的元素显示模式：块元素，行内元素，行内块级级元素，元素的显示模式转换（转换为块元素，转换为行内，元素转换为行内块）

文章目录CSS的元素显示模式块元素行内元素行内块级级元素元素显示模式的总结元素的显示模式转换CSS的元素显示模式作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显示，比如 <div>自己占一行，比如一行可以放多个 <span>。HTML元素一般分为块元素和行内元素两种类型。块元素常见的块元素有<h>~<h6>、<p>、<div>、&l

2020-09-20 16:15:26 1073

原创 CSS的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等

CSS复合选择器什么是复合选择器？在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进线组合形成的。符合选择器可以更加准确、更高效的选择目标元素(标签)。符合选择器是由两个或多个基础选择器，通过不同的组合而成的。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。后代选择器后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是外层标签写在前面，内标签写在后面，中间用空格分隔。当标签发生嵌套时，内层

2020-09-20 13:40:07 17883

原创 CSS的引入方式：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）

CSS引入方式内部样式表：内部样式表（内嵌样式表）是写到 html 页面内部。是将所有的CSS代码抽取出来，单独放到一个 <style>标签中。<head> <style> div { color: red; font-size: 12px; } </style></head><body> <div>开心</div></body>&

2020-09-14 16:02:21 16585

原创 CSS的文本属性：文本的颜色、对齐文本、装饰文本、文本的缩进、行间距等

CSS文本属性CSS Text （文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本的缩进、行间距等。文本的颜色color 属性定义文本的颜色。<head> <style> div { color: pink; } </style></head><body> <div>该睡觉啦，啊啊啊啊</div></body>表示属性

2020-09-13 06:05:47 970

原创 CSS字体属性：字体系列、字体大小、字体粗细、文字样式、字体复合属性

CSS字体属性CSS Fonts (字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。字体系列CSS使用 font-family 属性定义文本的字体系列。<head> <style> p {font-family: "微软雅黑";} div {font-family: ARIAL,"Microsoft Yahei","微软雅黑";} </style></head><body&

2020-09-13 05:01:06 96499 1

原创基础选择器：标签选择器、类选择器、类选择器-多类名、id 选择器、 *通配符选择器

文章目录CSS基础选择器CSS基础选择器的作用选择器的分类标签选择器类选择器类选择器-多类名id 选择器id 选择器和类选择器的区别*通配符选择器基础选择器的总结：CSS基础选择器CSS基础选择器的作用选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选标签用的。以上CSS做了两件事：1.找到所有 h1 标签，选择器（选对人）。2.设置这些标签的样式，比如颜色为红色（做对事）。选择器的分类选择器分为基础选择器和复合选择器两大类。基础选择器是由单个选

2020-09-12 21:17:44 2682

原创 CSS基本简介及书写规范

文章目录HTML的局限性CSS简介总结：CSS的语法规范CSS代码风格样式格式书写紧凑格式展开格式样式大小写空格规范HTML的局限性HTML非常单纯，只关注内容的语义。比如<h1>表明是一个大标题，<p>表明这是一个段落，<img>表明这有个图片，<a>表示此处有来链接。很早的时候，世界的网站虽然有很多，但是他们有一个共同特点：丑。虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐。CSS简介CSS的主要使用场景就是美化网页，布局页面的。

2020-09-12 16:02:50 450 2

原创青春不常在，抓紧谈恋爱小案例,表格标签、列表标签、表单标签的综合练习

表格标签，列表标签,表单标签的综合练习知识点表格<table> </table>是用于定义表格的标签。<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。<td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。表单元素input 是输入的意思，而在表单元素中标签用于收集用户信息。在标签中，

2020-09-12 13:50:22 2413

原创 HTML基本语法之表单标签：表单的组成，表单域，表单控件元素（表单元素），input表单元素， label标签，表单控件（表单元素）， select表单元素， textarea表单元素

文章目录表单标签表单的组成表单域常用属性：表单控件元素（表单元素）input表单元素label标签表单控件（表单元素）select表单元素textarea表单元素表单元素几个总结点表单标签为什么需要表单?使用表单目的是为了收集用户信息。在我们网页中，我们需要跟用户进行交互，收集用户资料，此时就需要表单。表单的组成在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。表单域表单域是一个包含表单元素的区域。在HTML标签中，<from>标签

2020-09-10 17:42:25 1589 2

空空如也

空空如也