08 2019 档案
摘要：平时在网页布局的时候总是有文字内容多了，超过溢出限制的高度，那么就会有一些图片会撑破DIV，让网页错位变乱的问题，那如何解决呢？ 这就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。 特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候
阅读全文
摘要：今天和大家分享一组代码，使用css制作进度条。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style> @keyframes test { from{left:0;} to{l
阅读全文
摘要：HTML DOM 导航 通过 HTML DOM，能够使用节点关系在节点树中导航。 ㈠HTML DOM 节点列表 getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。 示例：下面的代码选取文档中的所有 <p> 节点： <!DOCTYPE html> <html> <
阅读全文
摘要：㈠HTML DOM - 修改 修改 HTML = 改变元素、属性、样式和事件。 ①创建 HTML 内容 改变元素内容的最简单的方法是使用 innerHTML 属性。 下面的例子改变一个 <p> 元素的 HTML 内容： <!DOCTYPE html> <html> <head> <meta char
阅读全文
摘要：㈠什么是DOM？ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。 DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的
阅读全文
摘要：一. iframe是什么及作用 iframe是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架（即行内框架) . 说白了, iframe用来在页面嵌入其他页面. 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 <i
阅读全文
摘要：♠媒介类型 在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在。 media属性用于为不同的媒介类型规定不同的样式 ⑴screen 计算机屏幕（默认值） ⑵tty 电传打字机以及使用等宽字符网格的类似媒介 ⑶tv 电视类型设备（低分辨率、有限的屏幕翻滚能力） ⑷p
阅读全文
摘要：㈠分享一组很有趣的代码： 具体如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>穿墙广告</title> <style> *{ margin:0; padding:0; list-style:none; } ul{ ove
阅读全文
摘要：怎样用CSS样式表来设置DIV的透明半透明？ ㈠首先说一下设置DIV半透明的CSS代码： div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;} 说明： 1、filter：对win IE设置半透明滤镜效果，filter:alpha(O
阅读全文
摘要：波纹动画 在此运用到css的动画属性，以及背景等相关属性。 值得一说的是下面代码中一直写到的这样一行代码：filter: alpha(opacity=0~100) ，这是考虑到浏览器兼容的问题。 IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-o
阅读全文
摘要：㈠词汇说明： ㈡单词汇总 1.file,n.文件；v.保存文件 [faɪl]2.command,n.命令，指令 [kəˈmænd]3.use,v.使用，用途 [jus]4.program,n.程序 [ˈproʊgræm]5.line,n.(数据，程序)行，线路 [laɪn]6.if,conj.如果
阅读全文
摘要：㈠定义及用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 ㈡示例1 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。 1 <!DOCTYPE html> 2 <html> 3
阅读全文
摘要：㈠什么是弹性盒子？ 弹性盒子是 CSS3 的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 ● 伸缩容器：设置为display:flex
阅读全文
摘要：表单 HTML 表单用于搜集不同类型的用户输入。 ㈠Form标签 ⑴form标签简介 在HTML中，如果创建一个表单，就把各种表单标签放在<form></form>标签内部。我们常说的表单，指的是文本框，按钮，下拉列表等的统称。 form一共有五个重要属性，分别是name，action，method
阅读全文
摘要：所有浏览器 通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、FF 共用height: 100px !important; 程序代码height:100px;*height:120p
阅读全文
摘要：背景剪裁 语法：background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webkit-background-clip:text;（谷歌浏览器） 示例：从局部到全局渐变 效果图： 这是
阅读全文
摘要：超链接 ★超链接简单介绍 超链接可以说是网页中最常见的元素。超链接的英文名是hyperlink。每个网站都是由众多的网页组成，网页之间通常都是通过链接的方式相互关联的。 超链接能够让浏览者在各个独立的页面之间方便的跳转。超链接的范围很广，可以将文档中的任何文字及任何位置的图片设置为超链接。 超链接可
阅读全文
摘要：㈠表格 ⑴表格的基本结构 ①表格的基本标签有：table标签（表格），tr标签（行），td标签（单元格）。<tr>标签和<td>标签都要在表格的开始标签<table>和结束标签</table>之间才有效。 ②tr即"table row"(表格行)，td即"table data cell"(表格单元格
阅读全文
摘要：㈠HTML基本结构 一张网页就是一个HTML文档，一个HTML文档由4个基本部分组成。 ①文档声明：<!DOCTYPE html> ②html标签对：<html></html> ③head标签对：<head></head> ④body标签对：<body></body> ㈡head标签 在<head>
阅读全文
摘要：CSS padding 属性定义元素边框与元素内容之间的空白区域。 ㈠padding（填充） ⑴当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。 ⑵单独使用 padding 属性可以改变上下左右的填充。 ⑶可能的值： ⑴length 定义一个固定的填充(像素,
阅读全文
摘要：㈠background-size 属性 ⑴background-size 属性规定背景图片的尺寸。 ⑵在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许在不同的环境中重复使用背景图片。 ⑶能以像素或百分比规定尺寸。如果以百分比规定尺寸，那么
阅读全文
摘要：设计思路： 首先做一个包括图片和说明文字的简单的页面结构，然后再设置它的变换。将变换的元素，即照片和文字放在一个父容器里面，这就需要四个父容器 ，再将这四个父容器放在最外层的舞台上面进行变换，在每个父容器里面都包括两部分：一个是上面的图片，还有一个是下面的说明文字。最后采用层定位将图片和下面的说明文
阅读全文
摘要：㈠实现不等宽背景条纹 实现如上图所示的效果，代码如下： 其他效果： ⑴如果想设置等宽的渐变只需要将开始值和结束值改为互补 ⑵如果需要等宽切无过渡的渐变，开始和结束值设置为50%即可。 ⑶如果想要垂直条纹，你只需要调整background-size的x、y值即可。 ㈡瓷砖条纹背景 实现如上图所示的效果
阅读全文
摘要：㈠currentColor定义及理解 来自MDN的解释：currentColor代表了当前元素被应用上的color颜色值。 使用它可以将当前这个颜色值应用到其他属性上，或者嵌套元素的其他属性上。 你这可以这么理解，CSS里你可以在任何需要写颜色的地方使用currentColor这个变量，这个变量的值
阅读全文
摘要：今天记录学习的设计网站首页的咖啡菜单，综合运用所学习的html，css背景，文本，字体，链接，表格，盒子，选择器，定位，以及css3的阴影，圆角边框，2d变换等内容。 ㈠咖啡菜单整体样式 运用html和css知识做出来的整体效果图，如下图所示： ⑴左侧的小咖啡图片是广告位，不随页面变动而变动； ⑵表
阅读全文
摘要：主要记录两个css3 3D转换的示例 ㈠哆啦A梦 三个哆啦A梦的图片，分别让其围绕X轴，Y轴，Z轴旋转60度，鼠标放上开始发生变化。 具体代码如下图所示： 效果如下所示： ⑴鼠标放在第一个图片效果如下： ⑵鼠标放在第二个图片效果如下： ⑶鼠标放在第三个图片效果如下： ㈡纯HTML+CSS制作的旋转的
阅读全文
摘要：CSS3 允许使用 3D 转换来对元素进行格式化。 ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换。 Chrome 和 Safari 需要前缀 -webkit-。 Opera 仍然不支持 3D 转换（它只支持 2D 转换）。 ㈡rotateX() 方法
阅读全文
摘要：㈠什么是 Emmet？ 你可以使用类似于 CSS 选择器的语法来描述生成的树和元素属性中的元素位置。 ㈡嵌套运算符（Nesting Operator） 嵌套运算符用于在生成的树内定位缩写元素：它是否应该放置在上下文元素内部或附近。 ⑴子代操作符（Child）：> div 下有一个子代的 div，紧接
阅读全文
摘要：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 ㈠@keyframes 规则 ⑴浏览器支持 Firefox 支持替代的 @-moz-keyframes 规则。 Opera 支持替代的 @-o-keyframes 规则。 Safari 和
阅读全文
摘要：要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 ㈠什么是选择器？ 每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”
阅读全文
摘要：㈠原理 ⑴css 属性——Box Moel分为两种：W3C标准和IE标准盒子模型。 ⑵大多数浏览器采用W3C标准模型，而IE中采用Microsoft自己的标准。 ⑶怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。 ⑷当不对Doctype进行定
阅读全文
摘要：2D转换方法：在平面对元素进行旋转，缩放，移动，拉伸。 ㈠浏览器支持 ⑴2D转换效果有以下的浏览器支持： ⑵在编辑代码的时候要注明用哪种浏览器打开，在前面加上前缀，下面是编辑器的简写形式，以及前缀名： ㈡ transform 属性 ⑴rotate() 进行旋转的函数 ⑵scale() 进行缩放的函数
阅读全文
摘要：★★CSS 分类属性 (Classification)★★ ⑴CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。 ⑵下面是常用的属性以及描述： ★★下面用具体的示例来解释相关的属性★★ ㈠本例演示如何把元素显示
阅读全文
摘要：㈠背景色 background-color ⑴background-color 属性设置元素的背景颜色。 ⑵元素背景的范围： background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。 如果边框有透明部分（如虚线边
阅读全文
摘要：CSS 文本属性可定义文本的外观。 通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等。 ㈠缩进文本 text-indent 通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。 ⑴使用负值 比如“悬挂缩进”，即第一行
阅读全文
摘要：㈠概念 什么是 XML? ⑴XML 指可扩展标记语言（EXtensible Markup Language） ⑵XML 是一种标记语言，很类似 HTML ⑶XML 的设计宗旨是传输数据，而非显示数据 ⑷XML 标签没有被预定义，需要自行定义标签。 ⑸XML 被设计为具有自我描述性。 ⑹XML 是 W
阅读全文
摘要：有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入 外部 CSS 文件。 ㈠内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。 ㈡嵌入方式 嵌入方式指的是在 HTML 头部中的 <style
阅读全文
摘要：㈠css3的新特性实际应用 ⑴文本阴影效果，用代码编写的方式实现 ⑵鼠标悬停的动态效果 左侧三幅图片，上面初始状态是没有说明文本的，但把鼠标放在上面的时候，这个图片上面就出现了说明文字 ⑶分栏分列式排版：类似于报刊的排版方式 ⑷做一个盒子它的圆角边框，还可以做一个盒子的阴影效果，若干个盒子的旋转效果
阅读全文
摘要：详细说一下有关json的相关知识： ㈠json与xml的异同 ★与 XML 相同之处 ⑴JSON 是纯文本 ⑵JSON 具有"自我描述性"（人类可读） ⑶JSON 具有层级结构（值中存在值） ⑷JSON 可通过 JavaScript 进行解析 ⑸JSON 数据可使用 AJAX 进行传输 ★与 XML
阅读全文
