整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
据类型，又名数据元，是一组属性描述其定义、标识、表示和允许值的数据单元，今天小编将为大家带来大数据编程入门：JavaScript数据类型。
在JavaScript中，有两大种数据类型，一种是值类型，另一种是引用数据类型。
值类型（基本类型）：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
注意：Symbol是ES6引入了一种新的原始数据类型，表示独一无二的值。
JavaScript拥有动态类型
JavaScript具有动态类型。这意味着相同的变量可以用作不同的类型：
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "Miuku"; // 现在 x 为字符串
JavaScript字符串
字符串是存储字符的变量（如“Bill Gates”）。
字符串可以是引号中的任何文本，可以使用单引号或双引号：
var name="Miuku";
var name='Miuku';
可以在字符串中使用引号，只要它们与字符串周围的引号不匹配：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<script>
var fruit1="Apple";
var fruit2='Lemon';
var answer1='It\'s alright';
var answer2="He is called \"Mary\"";
var answer3='He is called "Jony"';
document.write(fruit1 + "<br>")
document.write(fruit2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>
</body>
</html>
运行结果：
JavaScript数字
JavaScript只有一种数字类型，数字可以带有小数点，也可以没有小数点：
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
通过科学（指数）计数法可以书写出极大或极小的数字：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<script>
var x1=34.00;
var x2=34;
var y=123e5;
var z=123e-5;
document.write(x1 + "<br>")
document.write(x2 + "<br>")
document.write(y + "<br>")
document.write(z + "<br>")
</script>
</body>
</html>
运行结果：
JavaScript布尔
布尔一般又称布尔逻辑，只有两个值：false或者true。
var x=true;
var y=false;
布尔常用于条件测试中。
JavaScript数组
下面将创建名为fruit的数组：
var fruit=new Array();
fruit[0]="Apple";
fruit[1]="Lemon";
fruit[2]="Orange";
或者 (condensed array):
var fruit=new Array("Apple","Lemon","Orange");
或者 (literal array):
<!DOCTYPE html>
<html>
<body>
<script>
var i;
var fruit = new Array();
fruit[0] = "Apple";
fruit[1] = "Orange";
fruit[2] = "Lemon";
for (i=0;i<fruit.length;i++)
{
document.write(fruit[i] + "<br>");
}
</script>
</body>
</html>
运行结果：
数组下标是从零开始的，因此第一个条目是[0]，第二个条目是[1]，依此类推。
JavaScript对象
对象由花括号分隔，在括号内，对象的属性以名称和值对（name:value）的形式定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
在上面的示例中显示对象（person）有三个属性：firstname、lastname以及id。
空格和换行符并不重要，声明可以跨越多行：
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
对象属性有两种寻址方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<script>
var person=
{
firstname : "John",
lastname : "Doe",
id : 5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>
</body>
</html>
运行结果：
Undefined和Null
Undefined（未定义）此值表示变量不包含值。
可以通过将变量的值设置为null来清空变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Miuku</title>
</head>
<body>
<script>
var person;
var fruit="Apple";
document.write(person + "<br>");
document.write(fruit + "<br>");
var fruit=null
document.write(fruit + "<br>");
</script>
</body>
</html>
运行结果：
声明变量类型
声明新变量时，可以使用关键字“new”来声明其类型：
var fruit=new String;
var x=new Number;
var y=new Boolean;
var animal=new Array;
var person= new Object;
在JavaScript中的变量均为对象，当声明一个变量时，就是创建了一个新的对象。
以上就是关于大数据编程入门：JavaScript数据类型的全部内容了，希望这篇文章可以帮助到大家~
内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。
多窗口和窗体：
可以打开多个浏览器窗口，每个窗口都是独立的；
一个浏览器窗口可能包含多个标签页；每个标签页都是独立的上下文，都是独立的window对象，而且相互之间互不干扰；
但是窗口也并不总是和其他窗口完全没有关系；一个窗口或标签页中的脚本可以打开新的窗口或标签页，如此，这些多窗口或标签页就可以互相操作；
打开窗口：
window.open()方法，打开一个新的浏览器窗口、标签页，导航到一个指定的URL；
语法：window.open(url,name,features,replace)；url为打开新窗口的url，name为窗口目标,features设置窗口特性参数列表，replace为Boolean值，指定是否用新窗口替换当前页面；
一般使用第一个参数，如果也省略该参数或使用空字符串，则会打开一个空页面的URL about:blank；
如果使用第二个参数，而且该参数是已有窗口或框架的名称，就会在该窗口或框架中加载指定的URL；否则弹出新窗口，并将新窗口的name命名为该参数，如果省略此参数，则会使用指定的“_blank”打开一个新的、未命名的窗口；
第二个参数也可以是：_self、_parent、_top、_blank；
窗口的名字也可作为<a>和<form>元素上target属性的值，用来表示引用的文档或提交处理的页面；
<script>
window.open("https://www.zeronetwork.cn/","myWindow");
</script>
<a href="https://www.google.cn/" target="myWindow">baidu.com</a>窗口特性属性：
第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性；如果省略，则以默认的形式呈现；
字符串格式为：设置使用键值对，且全部使用逗号分隔，而且不能有空格；
window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");显式指定这些特性，打开的应该是新窗口，而不是新标签页；这个参数是非标准的，而且HTML5也主张浏览器应该忽略它；
另外，出于安全考虑，浏览器包含对可能指定的功能的限制，如，通常不允许指定一个太小的或者位于屏幕之外的窗口，并且一些浏览器不允许创建一个没有状态栏的窗口；
第四个参数只有在设置了第二个参数命名的是一个已存在的窗口时才有用；它是一个布尔值，声明了由第一个参数指定的URL是替换掉窗口浏览历史的当前记录(true)还是应该在窗口浏览历史中创建一个新的记录(false)，默认为false；
window.open()会返回一个window对象，用于操作新创建的窗口；该引用可以操作新窗口的内容，从而就可以在一个窗口中控制另一个窗口的内容，例如向一个新开的浏览器窗口中输出内容；
var w = window.open(); // 打开一个新的空白窗口
w.document.write("<h2>零点网络</h2>");
w.alert("详情请进入https://www.zeronetwork.cn/");
w.location = "https://www.zeronetwork.cn/";某些浏览器在默认情况下可能不允许针对主浏览器窗口调整大小或移动，但不允许针对通过open()创建的窗口调整大小或移动，如：
var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");
newWindow.resizeTo(600,600);
newWindow.moveTo(200,200);注：有些浏览器默认不允许这样操作；
窗口opener属性：
opener属性是新窗口对打开它的原始窗口的引用；即指向调用window.open()的窗口或框架；但只在弹出窗口的最外层window对象(top)中有定义；
var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");
console.log(newWindow.opener === window); // true
<!-- 主窗口 -->
<input type="text" id="selectCity" placeholder="选择" />
<script>
var selectCity = document.getElementById("selectCity");
selectCity.onclick = function(){
var newWin = window.open("select.html","newWin","width=400,height=400");
}
</script>
<!-- 新窗口 -->
<select id="city">
<option value="beijing">北京</option>
<option value="nanjing">南京</option>
<option value="anhui">安徽</option>
</select>
<script>
var city = document.getElementById("city");
city.onchange = function(){
window.opener.document.getElementById("selectCity").value = city.options[city.selectedIndex].value;
window.close();
}
</script>有些浏览器(如IE8和Chrome)会在独立的进程中运行每个标签页，当一个标签页打开另一个标签页时，如果两个window对象之间需要彼此通信，那么新标签页就不能运行在独立的进程中。在Chrome中，将新创建的标签页的opener属性设置为null，即表示在单独的进程中运行新标签页。
newWindow.opener = null;
标签页之间的联系一旦切断，将没有办法恢复。
window.close()关闭窗口：
对于主窗口，如果没有得到用户的允许是不能关闭它的；但弹出窗口可以不经用户允许可以关闭自己；
窗口关闭后，窗口的引用仍然存在，可以使用window.closed属性检测，但在实际场景中没有多大用处；
function openWin(){
var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
"width=400,height=400,top=50,left=50,resizable=yes");
newWindow.document.write("<h2>零点网络</h2>");
function closeWin(){
newWindow.close();
//alert(newWindow.closed);
if(newWindow.close)
alert("已关闭");
}
setTimeout(closeWin,3000);
}
openWin();注：document对象也有close()方法，为了避免混淆，所以调用close()方法时，要显式调用，即使用window.close()；
安全限制：
大多数浏览器针对弹出窗口实施了多方面的安全限制，如：不允许在屏幕之外创建弹出窗口，不允许将弹出窗口移动到屏幕之外，不允许关闭状态栏等；不允许关闭地址栏，默认情况下不允许移动弹出窗口或调整其大小；或者部分浏览器不支持修改状态栏，始终显示地址栏等；
通常，对于open()方法只有当用户手动单击按钮或超链接时才会调用；如果尝试在浏览器初始载入时开启一个弹出窗口时，通常会被屏蔽;
弹出窗口屏蔽程序：
大多数浏览器都内置有弹出窗口屏蔽程序，如果没有内置，可以安装第三方实用工具；内置屏蔽会使window.open可能返回null，第三方会返回错误；通过需要检测其返回值；
// 内置的屏蔽程序
var newWin = window.open("https://www.zeronetwork.cn/","_blank");
if(newWin == null){
alert("弹窗被阻止！");
}
// 第三方
var blocked = false;
try{
var newWin = window.open("https://www.zeronetwork.cn/","_blank");
if(newWin == null)
blocked = true;
}catch(e){
blocked = true;
}
if(blocked){
alert("弹窗被屏蔽");
}弹出窗口通信：
主窗口向新窗口传值，直接为新窗口window对象添加成员，如：
// 主窗口
var newWin = window.open("select.html","_blank");
var person = {
name:"wangwei",
sex: true,
age: 18
}
newWin.person = person;
// 新窗口
document.write("姓名：",person.name);
document.write("性别：",person.sex);
document.write("年龄：",person.age);新窗口向主窗口传值，通过window.opener获取原始窗口的属性或者html元素；
<!-- 主窗口 -->
<div id="mydiv"></div>
<script>
var newWin = window.open("select.html","_blank");
function showDiv(str){
var mydiv = document.getElementById("mydiv");
mydiv.innerHTML = str;
}
</script>
<script>
// 新窗口
var str = "零点网络";
window.opener.showDiv(str);
window.close();
</script>通过普通的get传值；
// 主窗口
function putId(id){
window.open("select.html?id=" + encodeURIComponent(id),"putWin");
}
putId("1002");
// 新窗口
var id = location.search;
id = id.split("=");
console.log(id[1]);
document.write(decodeURIComponent(id[1]));框架窗口：
如果页面使用了框架集合(包含frameset和iframe)，则每个框架都由它自己的window对象表示，并存放在frames集合中;
与相互独立的标签页或窗口不同，框架窗口之间并不是相互独立的；
每个window对象都有一个name属性，其中包含框架的名称；
<frameset rows="100,*">
<frame src="top.html" name="topFrame" />
<frameset cols="50%,50%">
<frame src="left.html" name="leftFrame" />
<frame src="right.html" name="rightFrame" />
</frameset>
</frameset>在frames集合中,可用数字(下标从0开始,从左到右,从上到下)访问;即可以使用frames[0]表示第1个子窗口、frames[1]表示第2个子窗口；
可使用名称对框架进行访问，该名称就是该框架的name属性，如 window.frames[“topFrame”]引用;
也可以window.topFrame 使用架框的名字访问；
window.onload = function(){
console.log(frames);
var topFrame = frames[0];
console.log(topFrame);
console.log(topFrame.name);
var leftFrame = window.frames["leftFrame"];
console.log(leftFrame.name);
console.log(window.rightFrame.name);
}可使用frames.length 取得框架集合长度;
如果是内联框架，那就更简单了，如：
<iframe src="right.html" name="myFrame" width="200" height="200"></iframe>
<script>
console.log(frames);
console.log(frames[0].name);
</script>对于顶级窗口的window对象来说，可以看作为由若干个子窗口组成的窗口数组，也就是说可以把window对象当作为窗口的集合，如：
console.log(window.length);
console.log(window[0]);但在实际场景中，最好还是使用frames来代替window，因为frames显得更清晰些；
对于<iframe>元素，如果设置了id，也可以通过document.getElementById()方法获取，如：
var myframe = document.getElementById("myframe");
console.log(myframe);
myframe.src = "one.html";<iframe>元素有contentWindow属性，引用该窗体的window对象，所以此窗体的window对象就是：
var mywin = document.getElementById("myframe").contentWindow;
console.log(mywin);
mywin.document.write("是内联框架window对象");可以进行反向操作，通过window对象的frameElement属性，来获取该窗体的<iframe>元素；表示顶级窗口的window对象的frameElement属性为null，窗体中的window对象的frameElement属性不是null；
var myframe = document.getElementById("myframe");
var mywin = myframe.contentWindow;
console.log(mywin.frameElement);
console.log(mywin.frameElement === myframe);
console.log(window.frameElement);
// 在one.html会返回<iframe id="myframe" src="one.html"></iframe>
console.log(window.frameElement);尽管可以通过document.getElementById()和contentWindow属性来获取窗口中的子窗体的引用，但在实际场景中，用的还是比较少，主要还是使用frames属性来访问；
top对象：
可以使用top引用最顶层（外层）框架，就是浏览器窗口；使用它可以确保在一个框架中正确的访问另一个框架；
// 框架集页面
window.onload = function(){
console.log(frames);
console.log(top);
console.log(top === frames); // true
console.log(top === window); // true
console.log(frames === window); // true
}
// 框架页面
console.log("topFrame:",frames);
console.log("topFrame:",top);
console.log("topFrame:",top === frames); // false因此，使用top访问框架时，也可以如下：
console.log(top[0].name);
console.log(top["topFrame"].name);
console.log(top.topFrame.name);
console.log(top.frames[0].name);
console.log(top.frames["topFrame"].name);
console.log(top.frames === frames); // trueparent对象：
与top相对的另一个window对象是parent，其指的当前框架的直接上层框架，即父框架；
parent在不同的位置指不同的对象；在某些情况下，parent有可能等于top，但在没有框架的情况下，parent一定等于top（此时，它们都等于window），如：
<!-- frameset.html -->
<frameset rows="100,*">
<frame src="top.html" name="topFrame" />
<frameset cols="50%,50%">
<frame src="left.html" name="leftFrame" />
<frame src="right.html" name="rightFrame" />
</frameset>
</frameset>
<!-- right.html -->
<frameset cols="50%,50%">
<frame src="one.html" name="oneFrame" />
<frame src="two.html" name="twoFrame" />
</frameset>
// one.html中的代码
var parentFrame = window.parent;
console.log("从one.html中访问：",parentFrame.name); // rightFrame
parentFrame.frames[1].document.write("<h2>框架访问</h2>");
// top.html中的代码
var parentFrame = window.parent;
console.log("top:", parentFrame.name);
console.log("top:", parentFrame.length);
console.log("top:", parentFrame.frames.length);
console.log("top:", parentFrame === top); // true
console.log("top:", parentFrame.frames[1].name);
parentFrame.frames[1].document.write("<h2>是left页面吗？</h2>");注：除非最顶层的窗口是通过window.open()打开的，否则其window对象的name属性不会包含任何值；
self对象：
指向当前window自身，即self和window可以互换使用；
引入self的目的只是为了与top和parent对象对应起来；
对于顶级窗口，parent == self; // true
注：所有的这些对象都是window对象的属性，可以通过window.parent、window.top等形式访问；同时，这也意味着可以将不同层次的window对象连接起来，如：window.parent.parent.frames[0]；
窗口交互：
对于一个复杂的框架，窗口之间可以相互访问，它主要包括对框架自身的引用、父窗口对子窗口的引用、子窗口对父窗口及其他窗口的引用、对顶级窗口的引用；
在使用框架的情况下，浏览器中会存在多个Global对象，即每个窗口都会有自己的执行上下文，在每个框架中定义的全局变量会自动成为框架中window对象的属性；
<!-- right.html -->
<div id="myDiv"></div>
<div id="imgDiv"></div>
<script>
function showImg(){
var imgDiv = document.getElementById("imgDiv");
var img = document.createElement("img");
img.src = "images/1.jpg";
imgDiv.appendChild(img);
}
</script>
// 框架集页面
window.onload = showDiv;
function showDiv(){
var rightFrame = parent[2];
var myDiv = rightFrame.document.getElementById("myDiv");
myDiv.innerHTML = "<h2>零点网络</h2>";
}
<!-- top.html -->
<h2>Top页面</h2>
<div><button id="showBtn">显示图片</button>
<button id="closeBtn">关闭图片</button></div>
<script>
window.onload = function(){
var showBtn = document.getElementById("showBtn");
var closeBtn = document.getElementById("closeBtn");
var rightFrame = top[2];
showBtn.onclick = rightFrame.showImg;
closeBtn.onclick = closeImg;
}
function closeImg(){
var rightFrame = top.rightFrame;
var imgDiv = rightFrame.document.getElementById("imgDiv");
imgDiv.innerHTML = "";
}
</script>对于构造函数，它也是函数，所以当用构造函数和相关的原型对象定义一个自定义类时，这个类只在一个单独的窗口中定义；子窗口也可以引用这个类；
对于内置类来说，和自定义类就有所不同了；内置的类都会在所有的窗口中自动预定义，即每个窗口的window对象都包含原生类型的构造函数，因此每个框架一套自己的构造函数，这些构造函数一一对应，但并不相等；如：top.Object并不等于top.frames[0].Object，这个问题会影响到对跨框架传递的对象使用instanceof操作符；
WindowProxy对象：
window对象是客户端Javascript的全局变量；但是从技术上来看，并不是这样的；Web浏览器每次向窗口或窗体中载入新的内容，它都会开始一个新的JavaScript执行上下文，包含一个新创建的全局对象；但是当多个窗口或窗体在使用时，有一个重要的概念，尽管窗体或窗口载入了新的文档，但是引用窗体或窗口的window对象还仍然是一个有效的引用；
所以客户端Javascript有两个重要的对象；客户端全局对象处于作用域链的顶级，并且是全局变量和函数所定义的地方；事实上，全局对象会在窗口或窗体载入新内容时被替换；
而我们称之为“window对象”的对象实际上不是全局对象，而是全局对象的一个代理；每次查询或设置window对象的属性时，就会在窗口或窗体的当前全局对象上查询或设置相同的属性；
HTML5规范称这个代理对象为WindowProxy；由于它的代理行为，除了有更长的生命周期之外，代理对象表现得像真正的全局对象；如果可以比较两个对象，那么区分它们会很困难；但是事实上，没有办法可以引用到真正的客户端全局对象；全局对象处于作用域链的顶端，但是window、self、top、parent以及窗体的属性全部返回代理对象；window.open()也返回代理对象；甚至顶级函数里this的值也是代理对象，而不是真正的全局对象；
Web前端开发之Javascript-零点程序员-王唯
CSS 是什么？
CSS是Cascading Style Sheets的简称，中文称为层叠样式表。
属性和属性值用冒号隔开，以分号结尾。
CSS 四种引入方式：
1.行内式
行内式是在标签的style属性中设定CSS样式。
<div style="..."></div>2.嵌入式
嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。
<head>
...
<style type="text/css">
...此处写CSS样式
</style>
</head>3.导入式
将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。
导入式会在整个网页装载完后再装载CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此处注意.css文件的路径
</style>
</head>4.链接式
将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。
链接式会以网页文件主体装载前装载CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
样式应用顺序：
.nick {
color: yellow !important;
}基本选择器：
1.通用元素选择器
* 表示应用到所有的标签。
* {color: yellow}2.标签选择器
匹配所有使用 div 标签的元素（可以匹配所有标签）
div {color: yellow}3.类选择器
匹配所有class属性中包含info的元素。
语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>4.ID选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
语法：#ID名{样式}（ID名不能以数字开头）
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>组合选择器：
1.多元素选择器
同时匹配h3,h4标签，之间用逗号分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.后代元素选择器
匹配所有div标签里嵌套的P标签，之间用空格分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>3.子元素选择器
匹配所有div标签里嵌套的子P标签，之间用>分隔。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>4.毗邻元素选择器
匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>属性选择器：
1.[title] & P[title]
设置所有具有title属性的标签元素；
设置所有具有title属性的P标签元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>2.[title=Nick]
设置所有title属性等于“Nick”的标签元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>3.[title~=Nick]
设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>4.[title|=Nick]
设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"Nick"开头的标签元素。
例：lang属性："en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
设置属性值以指定值开头的每个标签元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>6.[title$=Nick]
设置属性值以指定值结尾的每个标签元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>7.[title*=Nick]
设置属性值中包含指定值的每个元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>伪类选择器：
1. link、hover、active、visited
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
<a href="#">Nick</a>2. before、after
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </p> 1. 颜色属性：
color
transparent
opacity
2. 字体属性:
font-style: 用于规定斜体文本
font-weight: 设置文本的粗细
font-size: 设置字体的大小
font-family：字体名称
font：简写属性
3. 文本属性:
white-space: 设置元素中空白的处理方式
direction: 规定文本的方向
text-align: 文本的水平对齐方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直对齐方式
text-indent: 文本缩进
letter-spacing: 添加字母之间的空白
word-spacing: 添加每个单词之间的空白
text-transform: 属性控制文本的大小写
text-overflow: 文本溢出样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
div {
width: 100px;
height: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁</div>
</body>
</html>text-decoration: 文本的装饰
text-shadow：文本阴影
word-wrap：自动换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
width: 150px;
height: 160px;
background-color: #FFA500;
/*边框阴影*/
box-shadow: 10px 10px 5px #888;
/*自动换行*/
word-wrap: break-word;
}
h1 {
text-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
<p>
When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
</p>
<h1>索宁</h1>
</body>
</html> a {
text-decoration: none;
/*去除a标签下划线*/
}4. 背景属性
background-color: 背景颜色
background-image 设置图像为背景
background-position 设置背景图像的位置坐标
background-repeat 设置背景图像不重复平铺
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background 简写
5. 列表属性
list-style-type: 列表项标志的类型
list-style-image：将图象设置为列表项标志
list-style-position：列表项标志的位置
list-style：缩写
1. 边框
border-style：边框样式
border-color：边框颜色
border-width：边框宽度
border-radius：圆角
border: 简写
box-shadow：边框阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border:2px solid;
border-radius:25px;
width: 140px;
}
</style>
</head>
<body>
<div>
点赞哦！dear.
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.radius1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 20px;
}
.radius2 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
border-radius: 20px 35px;
}
.radius3 {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 20px 35px 50px;
}
.radius4 {
display: inline-block;
width: 100px;
height: 100px;
background-color: green;
border-radius: 20px 35px 50px 60px;
}
</style>
</head>
<body>
<div>
<span class="radius1"></span>
<span class="radius2"></span>
<span class="radius3"></span>
<span class="radius4"></span>
</div>
</body>
</html>边框实现各种三角符号：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.triangle-one {
display: inline-block;
border-top: 50px red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-two {
display: inline-block;
border-top: 0 red solid;
border-right: 50px green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-stree {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 50px yellow solid;
border-left: 50px blue solid;
}
.triangle-four {
display: inline-block;
border-top: 50px red solid;
border-right: 0 green solid;
border-bottom: 0 yellow solid;
border-left: 50px blue solid;
}
.triangle-five {
display: inline-block;
border: 50px transparent solid;
border-top: 50px red solid;
}
.triangle-six {
display: inline-block;
border: 50px transparent solid;
border-bottom: 50px yellow solid;
}
.triangle-seven {
display: inline-block;
border: 50px transparent solid;
border-top: 60px red solid;
border-right: 0;
}
.triangle-eight {
display: inline-block;
border: 50px transparent solid;
border-left: 30px yellow solid;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="triangle-one"></div>
<div class="triangle-two"></div>
<div class="triangle-stree"></div>
<div class="triangle-four"></div>
<div class="triangle-five"></div>
<div class="triangle-six"></div>
<div class="triangle-seven"></div>
<div class="triangle-eight"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back {
width: 1000px;
height: 1000px;
margin: 0 auto;
background-color: #ddd;
position: relative;
}
.back-in {
position: absolute;
width: 1020px;
height: 45px;
left: -20px;
top: 50px;
background-color: #2F4F4F;
}
.back-img {
border: 20px solid transparent;
border-top: 10px solid dimgrey;
border-right: 0;
display: inline-block;
position: absolute;
top: 95px;
left: -20px;
}
.back-font {
line-height: 9px;
margin-left: 30px;
color: white;
}
</style>
</head>
<body>
<div class="back">
<div class="back-in"><h3 class="back-font">妹子求关注 ^.^</h3></div>
<div class="back-img"></div>
</div>
</body>
</html>2.★ 盒子模型
一个标准的盒子模型：
padding:用于控制内容与边框之间的距离;
margin: 用于控制元素与元素之间的距离;
一个参数，应用于四边。
两个参数，第一个用于上、下，第二个用于左、右。
三个参数，第一个用于上，第二个用于左、右，第三个用于下。
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子，外层还有html，
在默认情况下，body距离html会有若干像素的margin，所以body中的盒子不会紧贴浏览器窗口的边框了。
解决方法：
body {
margin: 0;
}3.★ display
4. visibility
5.★ float 浮动
让一行显示两个块级标签，会脱离文档流
clear 清除浮动：
6. clip 剪裁图像
rect 剪裁定位元素：
7. overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
8.★ position 规定元素的定位类型
9. z-index 元素层叠顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.z-index1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: -1;
}
.z-index2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
</style>
</head>
<body>
<div class="z-index1"></div>
<div class="z-index2"></div>
</body>
</html>10. outline 边框轮廓
11. zoom 缩放比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.zoom1 {
zoom: 100%;
}
.zoom2 {
zoom: 150%;
}
.zoom3 {
zoom: 200%;
}
</style>
</head>
<body>
<div class="zoom1">Nick 100%</div>
<div class="zoom2">Nick 200%</div>
<div class="zoom3">Nick 300%</div>
</body>
</html>12. cursor 鼠标的类型形状
鼠标放在以下单词上，There will be a miracle：
url: 自定义光标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
<style>
body {
cursor: url("mouse.png"), auto;
/*图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
}
</style>
</head>
<body>
<div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html> Auto: 默认
Default: 默认
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help
not-allowed
13. transform、transition 动画效果
transform 转换，变形
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
div {
border: 1px solid black;
height: 30px;
width: 30px;
background-color: yellow;
/*transform-origin: 50px 50px;*/
transform-origin: left;
transform: rotate(50deg);
/*transform: skew(50deg,50deg);*/
/*transform: translate(50px,50px);*/
/*transform: scale(2);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Transition 平滑过渡
#property 指定属性对应类型
1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；
2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；
3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；
4、integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；
5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；
6、transform list。
7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；
8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；
9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；
10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；
11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；
12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；
13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。#支持执行transition效果的属性
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer鼠标放在以下图片上，There will be a miracle：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
.img-see-2016-7-2 {
background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
background-size: 660px;
background-repeat: no-repeat;
height: 300px;
width: 600px;
transition-duration: 30s;
transition-timing-function: ease;
transition-property: background-size;
}
.img-see-2016-7-2:hover {
background-size: 2000px;
}
</style>
</head>
<body>
<div class="img-see-2016-7-2"></div>
</body>
</html>作者：suoning
原文链接：https://www.cnblogs.com/suoning/p/5625582.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
