2019 年 8月随笔档案 - Cloud%

HTML DOM方法

摘要：一、HTML DOM的作用 HTML DOM方法是我们可以在节点（html元素）上执行的动作。 HTML DOM属性是我们可以在节点（html元素）设置和修改的值。编程接口：可以通过JavaScript（以及其他编程语言）对HTML DOM进行访问。所有HTML元素被定义为对象Object，而阅读全文

posted @ 2019-08-31 20:33 Cloud% 阅读(569) 评论(0) 推荐(0)

DOM简介

摘要：一、DOM概念什么是DOM？DOM即Document Object Model，文档对象模型，是HTML和XML文档的编程接口，DOM是W3C(万维网联盟的标准) HTML DOM定义了访问和操作HTML文档的标准方法。DOM用树结构来表达HTML文档（DOM树） W3C文档对象模型（DOM）是中阅读全文

posted @ 2019-08-31 14:07 Cloud% 阅读(1199) 评论(1) 推荐(1)

iframe/frameset/frame的区别

摘要：一、iframe用法二、frame用法三、frameset用法四、区别对比 iframe 一、iframe属性的用法 <iframe>标签规定一个内联框架。内联框架可以在当前的HTML文档中插入框架，框架内可以链接另一个页面它是一个围堵标记，但围着的字句只有在浏览器不支援 iframe 标阅读全文

posted @ 2019-08-29 18:56 Cloud% 阅读(2287) 评论(3) 推荐(0)

CSS伪元素选择器和属性选择器

摘要：伪元素能使用伪元素来选择元素中的一些特殊位置一、给段落定义样式 :first-letter 首字母（只能用于块元素） :first-line 第一行 1、为p元素中的第一个字符设置颜色为黄色，字体为30px p:first-letter{color:yellow;font-size:30px;} 阅读全文

posted @ 2019-08-28 20:19 Cloud% 阅读(1614) 评论(1) 推荐(0)

css伪类选择器

摘要：伪类选择器伪类是专门用来表示元素的一种特殊状态，比如说常见的 a 元素的一些特殊状态（原始状态的超链接，访问过的超链接，运行中的超链接等等），当我们需要为这些处在特殊状态的元素设置样式的时候就可以使用伪类选择器来定义。动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体阅读全文

posted @ 2019-08-27 20:57 Cloud% 阅读(692) 评论(0) 推荐(0)

@media 媒体查询

摘要：一、@media媒体查询用途媒体查询Media Queries，可以根据不同的设备为其实现不同的样式。@media可以根据不同的屏幕尺寸设置不同的样式，页面布局分别适应移动端、pc端等，在调整浏览器的大小，页面会根据媒体的宽度和高度来重新布置样式。 CSS2中使用的@media媒体查询在很多设备上阅读全文

posted @ 2019-08-26 20:47 Cloud% 阅读(12551) 评论(0) 推荐(2)

cursor属性

摘要：cursor属性作用：定义鼠标指针放在一个元素边界范围内时所用的光标的形状属性值在cursor中我们最常用到的属性是default 和 pointer： default：默认值，显示一个箭头光标的样式。 pointer：光标呈现为指示链接的指针（小手的效果）看一下cursor：default 阅读全文

posted @ 2019-08-25 21:27 Cloud% 阅读(3461) 评论(1) 推荐(0)

HTML和CSS实现的透明登录框效果

摘要：实现代码 HTML部分 CSS样式表部分来看一下最终展现的效果，这是一个动态的效果：初始状态输入中的状态，登录框中的username和password有一个动态过渡上浮的效果：想知道具体是什么效果，可以自己动手尝试一下~ 如果对其中的属性有不了解的地方，可以参考下面的注解版代码哦。其中有涉阅读全文

posted @ 2019-08-24 22:33 Cloud% 阅读(14945) 评论(2) 推荐(3)

CSS背景和CSS3背景background属性

摘要：css背景属性用于定义HTML元素的背景背景属性既可以为单个的单元设置背景，也可以为整个页面设置背景，可以对上述二者的任意组合设置背景，段落、文字、不同状态的链接、图像、内容区域修改其背景样式。设置背景有很多属性可以利用。将在下文中详细解释这些属性的用法。 css属性定义背景效果 backgrou 阅读全文

posted @ 2019-08-23 22:08 Cloud% 阅读(1011) 评论(1) 推荐(0)

层定位layer

摘要：一、如何实现层定位position属性二、相对定位relative 三、绝对定位absolute 四、元素堆叠z-index 一、实现层定位的方法 position属性实现层定位，把元素分出层次形成一种嵌套关系，而嵌套在里面的元素则称之为子层，外面包裹的元素称为父层。 position属性属性规定阅读全文

posted @ 2019-08-21 22:44 Cloud% 阅读(919) 评论(1) 推荐(0)

CSS定位机制之浮动定位float

摘要：一、浮动定位实现的效果二、使用float实现浮动定位三、使用clear属性清除浮动定位四、浮动定位的应用（布局）一、浮动定位实现的效果（一）、块元素（div）在文档流中默认垂直排列，如果希望块元素在页面中水平排列，可以使块元素脱离文档流（使用float使元素浮动）元素浮动脱离文档流之后，阅读全文

posted @ 2019-08-20 19:53 Cloud% 阅读(1175) 评论(0) 推荐(0)

HTML和CSS实现图片翻转效果

摘要：实现图片翻转，首先来分析一下我们希望实现的是怎样的翻转效果？又该如何去实现呢？一、希望实现的效果页面上的图片在光标悬停在上面的时候会发生翻转效果，翻转过后显示出背面的说明文字。鼠标没有悬停在上面的效果鼠标悬停在其中一张图片上的效果：二、实现方法每幅图片的翻转效果都是沿着Y轴进行反转的，可阅读全文

posted @ 2019-08-20 10:17 Cloud% 阅读(15028) 评论(0) 推荐(0)

高度塌陷问题以及如何解决高度坍塌问题

摘要：我们在进行页面布局的时候可以发现元素在脱离文档流后，就会出现高度塌陷问题。一、什么是高度塌陷？通过下面的例子了解什么是高度塌陷。在页面中设置一个盒子box，其中在嵌套一个子元素小盒子box1。box设置边框宽度，而高度不去设置（高度会由内容撑开）但是当我们向盒子里面添加内容的时候<div c 阅读全文

posted @ 2019-08-18 22:57 Cloud% 阅读(3385) 评论(1) 推荐(0)

解决高度坍塌问题（二）

摘要：我们了解完高度坍塌问题之后，那么如何去解决高度坍塌问题呢？解决高度问题的方法一：解决问题的原理：根据W3C标准，元素都有一个隐含的属性（Block Formatting Context）简称BFC,块级格式化环境，该属性可以设置打开或是关闭，当开启BFC后，元素将会具有如下特性： 1.父元素的垂阅读全文

posted @ 2019-08-18 22:54 Cloud% 阅读(2315) 评论(0) 推荐(1)

Sublime Text 3快捷键

摘要：控制类 Ctrl+Shift+P：打开命令面板 Ctrl+P：搜索项目中的文件Ctrl+G：跳转到第几行Ctrl+W：关闭当前打开文件Ctrl+Shift+W：关闭所有打开文件Ctrl+Shift+V：粘贴并格式化Ctrl+D：选择单词，重复可增加选择下一个相同的单词Ctrl+L：选择行，重复可依次阅读全文

posted @ 2019-08-17 18:52 Cloud% 阅读(222) 评论(2) 推荐(1)

使用HTML和CSS来实现为文字设置图片底纹

摘要：先看一下最终实现的效果图中的hello是文本而不是图片那么如何实现这种效果呢？ HTML部分：创建一个h1标签，标签内容为（hello）。通过link标签链接外部样式表style.css。 style.css部分： 1、主体body部分的统一样式设置：消除主体部分margin和paddin 阅读全文

posted @ 2019-08-16 14:11 Cloud% 阅读(4792) 评论(2) 推荐(1)

css3 中的2D转换

摘要：一、CSS3转换通过转换实现对对元素进行旋转、缩放、移动、拉伸的效果；这种原来必须要通过JS或者图片处理才可以实现的效果，现在都可以通过CSS3来完成。 2D转换采用transform属性来实现效果。二、transform属性的取值 rotate()函数是可以进行旋转的函数 scale()函数阅读全文

posted @ 2019-08-15 23:23 Cloud% 阅读(399) 评论(0) 推荐(0)

css3中的过渡效果和动画效果

摘要：一、CSS3 过渡（一）、CSS3过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果。实现过渡效果的两个要件：规定把效果添加到哪个 CSS 属性上规定效果的时长定义动画的规则过渡transition （作用）将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值” （二）阅读全文

posted @ 2019-08-15 22:50 Cloud% 阅读(14696) 评论(1) 推荐(1)

CSS3文本阴影、边框阴影

摘要：CSS3添加阴影一、使用text-shadow属性为文本添加阴影二、使用box-shadow属性为边框添加阴影一、为文本添加阴影 text-shadow 使用text-shadow，可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。（有继承性）浏览器兼容：IE、阅读全文

posted @ 2019-08-13 21:06 Cloud% 阅读(45750) 评论(1) 推荐(0)

理解厂商前缀 -webkit- / -moz- / -ms- / -o-

摘要：CSS3规范如果想要达到W3C的推荐标准状态还需要不断改进。浏览器则通常在W3C开发标准的过程中就会体现这些特性。这样，标准在最终敲定之前就能知道哪些地方还能进一步改进。在包含某个特性的的初始阶段，浏览器通常会使用厂商前缀实现这类特征，这样每个浏览器都可以引入自己的CSS属性支持方式，从而可以获取阅读全文

posted @ 2019-08-13 14:49 Cloud% 阅读(754) 评论(0) 推荐(0)

css3圆角边框

摘要：圆角边框一、border-radius属性简介为元素添加圆角边框，可以对元素的四个角进行圆角设置（属性不具有继承性）二、border-radius定义方法 border-radius属性有两种定义方法：border-radius可以一次性对四个角设置相同的值(简写属性)，也可对4个角分别设置圆阅读全文

posted @ 2019-08-12 20:15 Cloud% 阅读(4587) 评论(0) 推荐(0)

内联元素的盒子模型与文档流定位padding属性

摘要：内联元素的盒子模型 1、内联元素不能设置width宽度和高度height span{width:200px ; height:200px} 与 span{width:100px ; height:100px} 表现效果相同，由此可见内联元素不可以设置高度和宽度 2、内联元素可以设置水平方向的内边距p 阅读全文

posted @ 2019-08-11 23:48 Cloud% 阅读(489) 评论(1) 推荐(1)

margin属性以及垂直外边距重叠问题

摘要：盒子的margin属性盒子的外边距margin 指的是当前盒子与其他盒子之间的距离，环绕在盒子周围的空白区域，属于不可见的区域，，不会影响到可见框的大小，而是会影响到盒子的位置。 margin属性可以用来指定盒子外边框的大小，有两种方法设置外边距：第一种单独属性分别设置四个方向的外边距，第二种是使阅读全文

posted @ 2019-08-10 23:21 Cloud% 阅读(1568) 评论(0) 推荐(0)

CSS盒子模型与怪异盒模型

摘要：盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。盒子模型分为两种第一种是W3c标准的盒子模型（标准盒模型）、第二种IE标准的盒子模型（怪异盒模型）当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用阅读全文

posted @ 2019-08-09 20:51 Cloud% 阅读(23235) 评论(0) 推荐(2)

CSS盒子模型中的Padding属性

摘要：CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域，不可见。如果想调整盒子的大小可以调整内容区，内边距，边框。 CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。有两种方法可以设置盒子内边框的大小，阅读全文

posted @ 2019-08-08 23:13 Cloud% 阅读(3717) 评论(0) 推荐(0)

css盒子模型中的border属性

摘要：认识border属性我们可以通过boder属性来为元素设置边框；元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。值得注意的一点是：为元素设置边框时必须指定三个样式(边框的样式，宽度，颜色)，三者缺一不可。每个边框阅读全文

posted @ 2019-08-07 19:22 Cloud% 阅读(4376) 评论(0) 推荐(1)

CSS盒子模型（框模型）

摘要：一、如何理解盒子模型盒子模型（框模型）是css部分非常重要的一部分知识，CSS在处理网页的时候，认为每个元素都处在一个不可见的盒子中。盒子模型的构想，把所有的元素都想象成盒子，那么对网页进行布局的时候就可以理解为对盒子进行排列。至于要将相应的盒子摆放到网页相应的位置中即可完成页面布局。 CSS 盒阅读全文

posted @ 2019-08-07 13:11 Cloud% 阅读(345) 评论(0) 推荐(1)

HTTP状态码

摘要：一、HTTP状态码当浏览者访问一个网页的时候，浏览者的浏览器会向网页所在的服务器发出请求。当浏览器接受并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的头部信息（server header）用以相应浏览器的请求。二、最常遇到的状态码 200 请求成功 301 资源（网页等）被永久转移阅读全文

posted @ 2019-08-05 19:35 Cloud% 阅读(308) 评论(0) 推荐(0)

HTML中的表单<form>标签

摘要：一、HTML表单 HTML 表单用于搜集不同类型的用户输入。 HTML 表单包含表单元素，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。关于表单的更多内容可以参考https://www.cnblogs.com/nyw1983/p/11874993.html 二、HTM 阅读全文

posted @ 2019-08-04 23:37 Cloud% 阅读(3887) 评论(0) 推荐(1)

HTML中表格table标签的实例

摘要：一、表格有边框,第一行居中对齐二、表格没有边框三、表格有水平标题四、表格有垂直标题五、合并行单元格 colspan合并单元格六、表格有单元格边距(内边距) 七、表格没有单元格间距八、表格有单元格间距阅读全文

posted @ 2019-08-03 23:43 Cloud% 阅读(2471) 评论(1) 推荐(1)

奇偶选择器：使用odd和even属性实现表格单双行颜色相间和不同

摘要：一、奇偶选择器表格在呈现数据的时候我们为了方便观看，而隔行显示不同的颜色，虽然可以用用类选择器 class实现这种效果，但是未免太过麻烦，为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器，这就是奇偶选择器。【class选择器】 <style type="text/css"> .tr1 阅读全文

posted @ 2019-08-02 18:05 Cloud% 阅读(3715) 评论(0) 推荐(0)

JSON对象

摘要：一、对象(object)的格式 JSON对象在大括号({ })中书写。对象可以包含多个字符串，value可以是合法的JSON数据类型（字符串，数字，对象，数组，布尔值或null） key 和 value中使用冒号 ( : )分割 "url":"www.baidu.com" 每个kay / valu 阅读全文

posted @ 2019-08-01 22:12 Cloud% 阅读(286) 评论(0) 推荐(0)