qq_50636169-优快云博客

原创 JS获取元素（截取掉前几个相同元素）

2021-09-13 00:27:01 458

原创 while循环语句

while循环 while （表达式） { 语句;} 当表达式为真时，就执行下面的语句；语句执行完后再判断表达式是否为真，如果为真，再次执行下面的语句…直到表达式为假时跳出循环。下面我们来看一下一个程序 <script> var sum = 0 for (var i = 1; i <= 100; i++) { while (i % 10 == 3) { continue

2021-08-15 19:41:57 284 1

1.rem 是一个相对单位。与em类似，em是父元素的字体大小，而rem的额基准是相对于html元素的字体大小。它可以通过修改HTML里面的文字大小来改变页面中的元素大小，可以整体控制。 2.媒体查询为了防止混乱，媒体查询要按照从小到大的顺序来写。 @media可以针对不同的屏幕尺寸设置不同的样式 @media媒体查询可以针对不同的媒体类型定义不同的样式可以使页面根据浏览器的宽度和高度重新渲染页面语法： @media mediatype and/not/only (media feature

2021-08-14 20:38:44 205

原创移动端flex布局

flex布局也成为弹性布局，通过给父盒子添加flex属性来控制子盒子的位置和排列方式，任何一个容器都可以指定为flex布局。当父盒子设定flex后，子盒子的float、clear和vertical-align将失效。 webkit内核的浏览器必须加上-webkit的前缀 div { display: -webkit-flex; display: flex; } flex布局父盒子常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴

2021-08-12 21:26:53 186

原创 CSS3盒子模型

1.CSS3盒子模型（box-sizing) 通过box-sizing来指定盒模型。 1.box-sizing：content-box 盒子大小为width+padding+border，与之前的盒子模型一致，是默认的。 2.box-sizing：border-box 盒子大小为width，即盒子大小不变。 2.CSS3图片模糊处理 CSS3滤镜filter，将模糊或颜色偏移等效果应用于元素。语法：filter：函数（）； 3.CSS3计算盒子宽度 calc函数语法： width：calc

2021-08-11 20:46:41 206

原创 CSS3新增选择器之属性选择器

新增选择器 css3新增了三个选择器，分别为属性选择器、结构伪类选择器、伪元素选择器。 1.属性选择器 css3属性选择器用[ ]表示,它的权重为10。 <style> /!--选择type属性是text的input标签--/ input[type="text"] { color: cadetblue; outline: none; } /!--选择有value属性的input标签--

2021-08-10 20:54:22 328

原创 css用户界面、溢出文字省略

css用户界面 1.更改鼠标样式cursor li { cursor:pointer;} default:小白（默认） point: 小手的样子 mov：移动 text:文本样式 not-allowed:禁止 2.轮廓线outline 消除表单轮廓线 input {outline: none/0;} 3.防止拖拽文本域resize text { resize: none;} 溢出文字省略 ...

2021-07-29 21:02:21 115

原创 css三角

给盒子添加上一个小三角 1.先画一个大盒子box1，再在大盒子中画一个小盒子box2 2.将box1设置相关的样式 3.使box2的宽高都为零，设置边框的粗细以及相关的样式，从而使得每边原本为梯形的边框变为三角形 4.根据所需要的三角形的形状，把另外的三边设置为透明色 5.再把这个三角形移动到相应的位置就可以了选择器 { width：0； height：0； line-height：0； font-size：0； border

2021-07-28 20:03:00 115

原创 css精灵图

精灵图（sprites）为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。其核心原理是：将页面中的一些小背景图像整合到一张大图中，这样服务器只需请求一次就好了。精灵图地使用主要针对背景图片的使用。将精灵图设置为一个大的背景图，通过移动精灵图来显示出我们想要的部分。选择器 { background-position: x y;} <style> div { /* display: inline-block; */

2021-07-28 19:28:19 177

原创 CSS元素的显示与隐藏

元素的显示与隐藏让一个元素在页面中隐藏或显示出来。 display :显示隐藏 visibility:显示隐藏 overflow：溢出显示隐藏 1.display 设置一个元素如何显示，隐藏元素后不再占有原来的位置。 display：none；隐藏对象 display： block；除了转换为块级元素外，同时还有显示元素的意思 <style> .Chinese { display: none; /* display: blo

2021-07-27 19:24:09 158 1

原创 CSS的定位、定位的叠放次序

定位是将盒子定在某一个位置，也就是摆放盒子，并按照定位的方式移动盒子。定位=定位模式+边偏移定位的模式（position): static:静态定位 relative:相对定位 absolute:绝对定位 fixed:固定定位边偏移：top、bottom、left、right. 1.static静态定位默认的定位方式即无定位选择器 { position: static;} 按照标准流的特性摆放盒子，没有边偏移在布局中很少用到 2.relative相对定位元素移动位置时

2021-07-26 20:57:18 456

原创 CSS 浮动

传统网页有三种布局方式，分别是普通流、浮动、定位。其中普通流是指将标签按照规定好的默认方式排列。接下来我们来简单介绍一下浮动。浮动（float) 浮动可以改变元素标签默认的排列方式，最初的目的是为了做文字环绕效果，其最典型的应用：可以让多个块级元素一行内排列显示。 float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一浮动框的边缘。选择器 { float: 属性值；} 属性值：none:不浮动 left:向左浮动

2021-07-25 20:58:55 127

原创 CSS 盒子模型（border、padding、margin)

CSS盒子模型 Css盒子模型本质上是一个盒子，封装周围的html元素，他包括边框、内容、外边距、内边距。 1.边框边框（border）可以设置元素的边框，他由三部分组成：边框宽度（粗细）、边框样式、边框颜色。 border: border-width boder-style border-color <style> div { width: 300px; height: 200px; /* border

2021-07-20 09:53:35 367 1

原创 CSS三大特性：层叠性、继承性、选择性

css有非常重要的三大特性，分别是层叠性、继承性和优先性。 1.层叠性当相同的选择器设置相同的样式时，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性要遵循的一定的原则：样式冲突遵循的是就近原则，即哪个样式离结构近就执行哪个（后来居上）若样式不冲突则不会发生层叠 2.继承性 css中子标签会继承父标签的某些样式，适当的继承可以简化代码，降低css的复杂性，如text-、font-、line-以及color属性等这些元素开头的都可以继承。行高的继承 body {

2021-07-19 22:18:10 284 1

原创 CSS的元素显示模式及背景

CSS的元素显示模式元素的显示模式就是元素（标签）以什么样的方式进行显示，了解他们的特点可以更好的布局网页。html元素一般分为块元素和行内元素两种类型。 1.块元素常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最典型的块元素. 块级元素的特点：独占一行高度、宽度外边距以及内边距都可以控制宽度默认是父级的宽度相当于一个盒子或者容器，里面可以放行

2021-07-18 08:56:04 209 1

原创 CSS的引入方式以及复合选择器

CSS的引入方式 css按照书写的位置划分有三种样式表，分别为行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）。 1.内部样式表内部样式表是写到html页面内部的，将所有css码抽取出来，单独放到一个<style>标签中。 <style> div { color: red; font-size: 12px; } </style> 理论上<style>标签可以放在html文档的任何地方，但一般会放在文档的&

2021-07-15 19:04:57 129 3

原创 CSS字体属性及文本属性

CSS的字体属性字体属性用于定义字体系列、大小、粗细和文字样式字体复合属性（可以更节约代码） body { font: font-style font-weight font-size/line-height font-family; } 使用font属性时，必须按照上面的语法顺序来写，不能更换顺序，各个属性之间用空格隔开不需要设置的属性可以忽略，但必须要保留font-size和font-family这两个属性，否则font将没有作用 CSS文本属性用来定义文本的外观，比如文本的颜

2021-07-14 19:05:54 166 1

原创 css的语法规范及基础选择器

CSS的语法规范 CSS规则由选择器以及一条或多条声明两部分构成 <head> <style> h { /*选择器*/ color /*属性*/: blue /*属性值*/; /*声明*/ font-size: 2px; /*声明*/ } </style> </head> 选择器用于指定CSS样式的HTML标签，

2021-07-13 18:15:49 510 1

原创 HTML 表单标签

表单标签目的是为了收集用户信息一个完整的表单是由表单域、表单控件（表单元素）和提示信息三部分构成 1.表单域<form> 目的是实现用户信息的收集和传递 <form action="ur/地址" method="提交方式" name="表单域名称"> </form> method的取值是get或post 2.表单控件 input 输入表单元素姓名 <input type="text"/> <br/> <!--text:定

2021-07-12 21:41:08 140

原创 HTML 路径、超链接标签与列表

路径目录文件：是普通文件夹，它包含一个网页的相关素材·。根目录：即打开目录文件夹的第一层。知道这些后我们就可以了解相对路径和绝对路径了。 1.相对路径：是指图片相对于HTML页面的位置图像、文件位于HTML文件的相对位置符号上一级 …/ 同级下一级 / 2.绝对路径：是指目录下的绝对位置<电脑中的某个位置>,也可以是网页地址。超链接标签它的作用是从一个页面链接到另一个页面链接 1.链接语法格式： ...

2021-07-12 17:15:48 247 2

qq_50636169的博客