自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(65)

原创 定位

定位:让盒子自由的在某个盒子内移动位置,或者固定在屏幕中的某个位置,并且可以压住其他盒子定位 = 定位模式(指定一个元素在文档中的定位方式) + 边偏移(决定该元素的最终位置)定位模式:static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 边偏移:top,right,left,bottom定位模式:1. 静态定位:static:元素默认定位方式(无定位)是在标准文档流中摆放位置,没有边偏移(没有脱

2020-08-10 15:52:15 21

原创 浮动float

很多布局效果标准流实现不了,可以利用浮动来完成。——>浮动可以改表标签默认排列方式<hr/>多个块级元素纵向排列用标准流: 多个块级元素横向排列用浮动: <hr/>float属性:用于创建浮动框,将其移到一边,直到左边缘或右边缘触及到包含快或另一个浮动框的边缘。<hr/>增加了float属性的元素:1.会脱离标准文档流(脱离标准普通流的控制(浮),移动到指定位置(动),浮动的盒子不再保留...

2020-08-08 10:31:35 38

原创 行内元素和行内块元素水平居中

行内元素和行内块元素水平居中,只需要给他们的父亲设置text-align:center

2020-08-07 22:07:56 65

原创 块元素水平居中margin

水平居中:1. 设置div盒子的宽度2. 设置margin左右为auto

2020-08-07 22:05:29 33

原创 padding

个数 意义 padding:2px 上下左右2px padding:2px 10px 上下2px 左右10px padding:2px 10px 5px 上2px 左右10px 下5px padding:2px 10px 5px 6px 上2px 右10px 下5px 左6px 当盒子没有指定width或者heigth时,padding不会撑开盒子的width或者heigth子元素默认width是父元素宽度的100%,如果没有weight属性,不增加pa

2020-08-07 21:59:02 32

原创 border / border-collapse

border上下左右边框进行设置border-top / border-right / border-bottom / border-leftborder-collapse:collapse:相邻边框合并在一起因为表格中,单元格和单元格之间如果没有cellspacing,那么两个单元格之间的边框就会粘连在一起,变成2px的边框我们需要将2px变成1px的话,就需要使用border-collapse属性,设置collapse...

2020-08-07 20:24:34 20

原创 CSS三大特性(层叠性、继承性、优先级)

1. 层叠性相同选择器(不同选择器优先级不同,如果这里是不同的选择器则不遵循就近原则)设置样式属性一样,属性值不同,此时后个样式就会覆盖(层叠)前一个冲突的样式。CSS层叠性主要解决样式冲突的问题:样式冲突,就近原则2. 继承性CSS中的继承:子标签会继承父标签中的某些样式(text-,font-,line-,color)inherited from 父标签行高的继承:line-height可以加单位,也可以不加单位不加单位的行高表示:当前元素文字大小font-size的XX

2020-08-07 17:37:56 28

原创 背景background

1. background-color:元素默认背景颜色默认值是transparent(透明的)2. background-repeat:repeat、no-repeat、repeat-x、repeat-y背景颜色在背景图片之下3. background-position:背景图片在背景中的位置background-position:x y / 方位名词 / 精确单位;background-position:center top;(无顺序)如果只指定了一个方位名词,另一个值省略,则这

2020-08-07 16:19:39 23

原创 单行文字垂直居中line-height

让文字的行高等于盒子的高度height = line-height行高line-height = 上空隙 + 文字本身高度 + 下空隙行高的上空隙和下空隙把文字挤到中间了,如果是行高<盒子高度:文字偏上;如果行高>盒子高度:文字偏下...

2020-08-07 15:39:21 23

原创 元素的显示模式:块元素、行内元素

元素的显示模式:元素(标签)以什么方式进行显示的1. 块元素独占一行、宽度高度外边距内边距都可以设置、【宽度】默认是父容器宽度100%文字类的元素内不能使用块元素:p、h1~h62. 行元素(内联元素)一行上可以显示多个、宽高设置都是无效的、默认宽度就是本身的宽度、行内元素只能收纳文本或其他行内元素a链接里不能再放链接a链接里可以放块级元素,但是给a转换成块级模式是最安全的3. 行内块元素img、input、td同时具有块元素和行内元素的特点和相邻行内元素(行内块元素

2020-08-07 15:21:08 48

原创 伪类选择器

1. 链接伪类选择器:为了保证生效,按照lvha顺序声明::link:未访问过的链接:visited:点击过的,访问过的链接:hover:鼠标放在连接上:active:鼠标点击上去的时候a链接在浏览器中有默认样式,需要单独制定a的样式一般只会制定a和a:hover的样式2. :focus伪类选择器(主要针对表单元素来说)选取获得焦点(光标)的表单元素<input>input:focus...

2020-08-07 10:57:02 16

原创 text-indent和em/rem/px【哎】

text-indent:首行缩进https://www.cnblogs.com/leejersey/p/3662612.htmlem:相对当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏

2020-08-06 16:12:27 38

原创 font

1. font-weight:粗细一般用数字来表示:400是正常,700是加粗2. font-style斜体Italic样式一般是指书写体,相比无样式的字体,通常会占用较少的高度倾斜体oblique字形一般只是常规字形的倾斜版本:font-style: oblique 0deg;一种字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有字体都做了这些,一些不常用的字体,或许就只有个正常体,如果你用 italic,就没有效果了~这时候你就要用 oblique,可以理解成 ita..

2020-08-06 11:02:08 25

原创 CSS尺寸

2020-08-06 10:50:34 18

原创 CSS类名命名规则

https://blog.csdn.net/wang414300980/article/details/79758008

2020-08-06 09:52:14 28

原创 标签的语义

h1:header标题标签p:paragraph段落标签br:break强制打断、换行strong:strong强壮的、加粗【推荐,语义更强烈】b:bold加粗em:倾斜【推荐,语义更强烈】i:incline倾斜del:delete删除【推荐,语义更强烈】s:strikethrough删除ins:下划线【推荐,语义更强烈】u:underline下划线div:division分割,区分span:span跨度,跨距img:image图像 属性:...

2020-08-05 17:57:21 53

原创 DOCTYPE、lang、meta标签

<!DOCTYPEhtml>:文档类型声明标签,不属于html标签。告诉浏览器使用哪种HTML版本来显示网页。这里是指当前页面采用HTML5版本来显示网页一定要写在文档最前面的位置,在<html>标签最前面<hr>什么语言的网站:<html lang = "en"><html lang = "zh-CN“><html lang = "fr">会显示是否需要翻译<hr>...

2020-08-05 16:45:01 33

原创 艾瑞莎啊让法国

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="

2020-08-03 18:03:31 31

原创 CSS 属性选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src=.

2020-08-03 17:15:52 39

原创 响应式导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="

2020-08-03 12:34:32 35

原创 设置了 *{padding: 0;margin: 0;} 但是没有用,仍然有padding【已解决】【蠢蛋】

@media screen and (min-width: 768px) { *{ padding: 0; margin: 0; } .container { width: 750px; /* background-color: aqua; */ margin: 0 auto; } .container ul li { float: left; /* display: inli

2020-08-03 11:55:54 125

原创 display:inline-block元素之间产生空隙

https://blog.csdn.net/qq_32614411/article/details/82223624@media screen and (min-width: 768px) { *, *::before, *::after { margin: 0px; padding: 0px; } .container { width: 750px; background-color: aqua;

2020-08-03 11:22:38 39

原创 将 需要获取className的方法 封装成函数

<!-- 将ul里的li中含有class = "box"的li的背景颜色设置为红色1. 获取含有class = "box"的li2. 设置背景颜色为红色 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

2020-08-02 22:28:35 22

原创 设置元素的属性:使用./[]/setAttribute方法

<!-- 设置元素的属性:使用./[]/setAttribute方法 点击按钮,将text里的值变换为其他值1. 获取按钮和文本框2. 按钮添加onclick事件,当点击时,文本框的value值变为其他--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device

2020-08-02 21:52:27 63

原创 首尾节点和兄弟节点

<!-- 首尾节点和兄弟节点:将ul中的第一个li的背景颜色设置为红色1. 获取ul和li2. 将ul的firstChild.style.backgroundColor = "red"3. 兼容性问题也要考虑到 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=

2020-08-02 21:19:04 46

原创 使用offsetParent

<!-- 使用offsetParent距离该子元素最近的进行过定位的父元素(position:absolute relative fixed),如果其父元素中不存在定位则offsetParent为:body元素 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

2020-08-02 20:04:34 28

原创 点击li里的隐藏超链接,将ul里的li隐藏

<!-- 点击li里的隐藏超链接,将ul里的li隐藏1. 使用for获取ul的子节点,当点击隐藏按钮时,li消失 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&

2020-08-02 19:46:25 34

原创 将ul里的li背景颜色变红(使用dom的方法)

<!-- 将ul里的li背景颜色变红(使用dom的方法) 获取ul的子节点,将li背景颜色设置为红色--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu

2020-08-02 19:31:51 85

原创 手风琴

<!-- 手风琴:1. 一个横向ul有序列表,鼠标移到其中的li时,li的宽度增加2. 在ul里,鼠标移出li时,li宽度变为正常3. 当鼠标在ul外时,所有li宽度正常 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial

2020-07-31 19:28:14 35

原创 闭包案例

https://blog.csdn.net/qq_42833001/article/details/87252890https://www.cnblogs.com/csuwujing/p/8021913.html异步,同步任务立即执行函数(方法(i))(调用前面的方法,所以可以写参数i)var obutton = document.getElementsByTagName("button");for (var i = 0; i < obutton.length; i++) { obu

2020-07-31 17:30:35 20

原创 作用域链和预解析的案例

//问1——>123 function f1() { var num = 123; function f2() { console.log(num); } f2(); } var num = 456; f1(); //相当于 function f1() { var num; function f2() { console.log(num); } num = 123; .

2020-07-31 16:17:11 23

原创 JavaScript作用域链的配置机制

作用域链是 JavaScript 提供的一套解决标识符的访问机制:JavaScript 规定每一个作用域都有一个与之相关联的作用域链。作用域链用来在函数执行时求出标识符的值。在对标识符进行求值的过程中:该链中包含多个对象,就会从【链首的对象】开始,然后依次查找后面的对象,直到在某个对象中找到与标识符名称相同的属性。如果在作用域链的顶端(全局对象)中仍然没有找到同名的属性,则返回 undefined 的属性值。(在每个对象中进行属性查找的时候,还会使用该对象的原型域链。在一个执行上下文,与其关联的作用.

2020-07-31 15:54:21 22

原创 移出outer,所有div颜色最亮

<!-- 鼠标放在其中一个div上时,颜色最亮在outer里,但移出这个div时,和颜色最低移出outer,所有div颜色最亮--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt

2020-07-31 09:44:06 43

原创 实现全选,反选,不选

<!-- 实现全选,反选,不选1. 获取若干个checkbox和3个button按钮2. 在3个button按钮中添加onclick事件3. checkbox选择:checked = "true"(checked = "checked"可不可以?)4. 全选:选择所有checkbox,将其值设置为checked = "true"5. 不选:选择所有checkbox,将其值设置为checked = "false"6. 反选:手动check某些checkbox,使用if判断语句:if(che

2020-07-30 15:06:51 21

原创 点击按钮将8个div盒子都设置为红色

<!-- 点击按钮将8个div盒子都设置为红色:1. 获取button和div对象2. button上绑定点击onclick事件3. 使用for循环来得到所有的div,将他们背景设置为红色:for(var i = 0;i < odiv.length; i++){ odiv[i].style.backgroundColor = "red"; }4. 顺序我要试试看 --><!DOCTYPE html><html lang="en">

2020-07-30 10:57:20 33

原创 选项卡:选择一个按钮改变div的背景颜色

<!-- 选项卡:选择一个按钮改变div的背景颜色1. 获取三个button按钮和一个div2. 最先给div设置基本背景颜色3. 3个button设置onclick事件4. 点击按钮之后,div.style.cssText={background-color:选定颜色}--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta

2020-07-30 09:46:54 43

原创 js获取元素CSS值

https://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/https://m.jb51.net/article/89961.htm

2020-07-30 08:55:49 40

原创 点击更多按钮,出现div,再次点击,div消失

<!-- 点击更多按钮,出现div,再次点击,div消失1. 获取button按钮和div2. div首先时display:none3. 给button添加onclick事件4. 判断:if(div是display:none){ 点击button之后: div是display:block} else{ 点击button之后: div是display:none}--><!DOCTYPE html><html lang="en"

2020-07-30 01:56:53 66

原创 点击按钮,输入框内的文字就会发生变化

<!-- 点击按钮,输入框内的文字就会发生变化1. 获取button按钮和input输入框2. 为button添加onclick事件3. 将文字赋值给input.value中 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

2020-07-30 01:01:16 15

原创 改变外部样式link标签,来改变整个页面的效果

<!-- 改变外部样式link标签,href中css的链接,来改变整个页面的效果1. 获取页面的按钮和link标签2. 给两个按钮分别装上onclick事件3. 在onclick事件中改变href属性的值--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

2020-07-30 00:52:13 24

空空如也

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除