是的,你没有看错,

就在昨天,我也没能逃脱

被双11的

购物车

撞了

......


本来不打算剁手的,双11正常的度过了

但因为我的一个失误,导致了悲剧的酿成,

前因是我喝了水后,没及时把水杯拿开,就放在键盘边,

后来,不知怎么的,好像是我移动了下键盘还是怎么的...,水杯突然就倒了

......

然后大家也猜到了,我可伶的电脑屏幕啊

没办法,每天都要用它啊,这样下去,还如何愉快的玩耍呢!

在这里,祝大家1111,剁手快乐!!(啊,今天几号啊,好像过了埃~管它去,各位剁手快乐了就行 )

最后,貌似这几天不闲的我,愣是做了点闲事出来
把自己的几个单独页面改的花里胡哨的
友链更改了呈现方式(参考了无人小站,图南山以及博客本身的友链样式)
添加了友链描述。都去是你们网站里右键看的描述,
还没有链接描述或者对描述要更改的小伙伴们,请在评论中留下您的链接描述,以便及时添加。

Javascript语法规范

既然要实现静态HTML页面的某些动态效果,就要引入JavaScript。书写之前至少要了解怎样在HTML页面中引入JavaScript。这样才能知道在哪编程Javascript了!
Javascript 书写位置
JavaScript的引用共有4种,与css类似,直接嵌入到html页面中
1,页头引入(head标签内);
2,页中引入(body标签内);
2,页尾引入(html标签内以及标签外);
3,元素事件中引入(标签属性中引入);
4,引入外部JS文件;
例如:

<!DOCTYPE html>
<html>
        <!--
            脚本放置位置问题:
            理论上,可以将javascript代码放在网页的任何地方.
            如果在打开网页要立即执行脚本的话,需要放到调用它的代码之前
            对于不需要一载入页面就开始执行的javascriptdiamante,可以将器放在head中,这样一般是某个事件函数,当事件触发的时候就会执行.
            根据javascript dom编程艺术书中说法,放在body结束标签和html结束标签之间,是一个不错的做法,因为javascript往往是操作DOM树,
            这样可以确保在javascript开始执行的时候,DOM树加载完毕。
        -->
    <head>
        <meta charset="utf-8" />
        <title>javascript的引用方式</title>
<!--
<script type="text/javascript">……</script>格式是固定的,JavaScript代码必须在<script></script>标签内编写,并且必须设置type属性值为“text/javascript”。
-->
        <script type="text/javascript">
        //这里编写JavaScript程序
        </script>
    </head>

    <body>
        <script type="text/javascript">
        //这里编写JavaScript程序
        </script>
       <!--         
       文件调用:JavaScript代码写到另一个文件当中(其后缀通常为“.js”),然后用格式为“<script src="javascript.js"></script>”的标记把它嵌入到文档中
       -->
        <script src="js1.js" type="text/javascript" charset="utf-8"></script>
    </body>
        <script type="text/javascript">
        //这里编写JavaScript程序
        </script>
</html>

JavaScript的转义字符及注释

\":转双引
\':转单引
\n:转换行(不常用)
\r:转回车(不常用)
//:单行注释
/* */:多行注释

写一个简单的JavaScript程序。

程序永远的Hello, world


<script type="text/javascript">
    document.write("Hello, world");
</script>

简单的JavaScript程序


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的javascript程序</title>
    <script type="text/javascript">
        function entermes()
        {
            alert("你好!Xiaomo blog")
        }
        window.onload=entermes();
    </script>
</head>
<body>
    
</body>
</html>

JavaScript的概念

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能.
解释:
1,动态语言

动态语言,是指程序在运行时可以改变其结构:新的函数可以被引进,已有的函数可以被删除等在结构上的变化。JavaScript便是一个动态语言。除此之外如Ruby、Python等也都属于动态语言,而C、C++等语言则不属于动态语言。比如在JavaScript中可以在对象定义之后动态的为其添加属性和方法
2,脚本语言

脚本语言是为了缩短传统的编写-编译-链接-运行(edit-compile-link-run)过程而创建的计算机编程语言,只在被调用时进行解释或编译,然后执行。它的命名起源于一个脚本“screenplay”,每次运行都会使对话框逐字重复。早期的脚本语言经常被称为批量处理语言或工作控制语言。

3,弱类型

弱/强类型指的是语言类型系统的类型检查的严格程度,弱类型的语言在声明变量的时候不必进行变量类型的确定,语言的运行时会隐式做数据类型转换,对于弱类型语言来说,不同类型的变量可以进行直接运算,而强类型的则不可以。

什么是JavaScript?

JavaScript 是在互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript,就是我们通常所说的JS,是一种嵌入到HTML页面中的脚本语言,由浏览器一边解释一边执行。

为什么学习javascript?

因为在Web世界里,HTML页面是静态的(只供浏览),只有JavaScript能跨平台、跨浏览器驱动网页,与用户交互。把静态的页面转换成支持用户交互并响应相应事件的动态页面。
HTML、CSS和JavaScript的关系如下(W3c规范):
☞结构标准(网页的结构) html
☞表现标准(网页的外观) css
☞行为标准(页面的行为) js

关于JavaScript

JavaScript的组成:
ECMAScript:JavaScript的语法标准。
DOM:JavaScript操作网页上的元素的API
BOM:JavaScript操作浏览器的部分功能的API
JavaScript的组成

Javascript 使用范围:
客户端数据计算
客户端表单合法性验证
浏览器对象的调用
浏览器事件的触发
网页特殊显示效果制作
.....

JavaScript的特点:

1.解释性脚本语言,javascript不需要编译,只需要嵌入到html代码中,由浏览器逐行加载解释执行。
2.javascript是一种基于对象的语言,使用已经创建好的对象来,和面向对象的先锋需设计语言不同,javascript并不支持继承和重载。
3.语言简单,弱类型,语法和java,C语言类似,变量不需要声明和指定类型即可使用,是一种弱类型语言。
4.javascript语言相对来说比较安全,仅由浏览器执行,不允许javascript访问本地硬盘,以及操作服务器上的数据,只用来显示浏览器的网页效果和实时交互。
5.动态性,使用javascript可以在前端实现一些和服务器完全没有联系的效果,javascript采用事件驱动的方式进行,html页面的相关控件的相关事件在处触发的时候会自动执行响应的脚本或者函数。
6.运行环境一般来说是浏览器,只需要浏览器支持即可,如果不支持(或者用户禁用了javascript),浏览器会忽略掉这些javascript代码。

原理其实就是一段CSS代码,定义了一下光标,使他不再使用本地的光标!改变鼠标指针形状的方法:系统鼠标指针与自定义控件,一般我们都用系统鼠标指针,其实这已经能满足大部分群众了,通常只有为了页面看起更好看,锦上添花才会选择自定义控件。CSS文件只要在页面中引用了就可以,wordpress的直接添加到style.css中即可 ,其他的不知道可直接添加到页面底部!在此发文一篇。

例如:

a{ cursor:default;}
div{ cursor:url(url图片地址) }

css样式表(加粗为常用):

属性 效果
 crosshair  十字准星
 auto  自动
 default  默认(正常选择)
 hand、pointer  链接选择(手形)
 move  移动 
 help  帮助
 wait  等待
 text  编辑
 w-resize  水平调整(向左)
 e-resize  水平调整(向右)
 n-resize  垂直调整(向上)
 s_resize  垂直调整(向下)
 ne-resize  对角线调整(向右上)
 sw-resize  对角线调整(向左下)
 se-resize  对角线调整(向右下)
 nw-resize  对角线调整(向左上)
 url(‘光标地址’)  自定义光标

好了,直接上一段CSS代码,如果是添加到页面中的请添加<style></style>


body {
    cursor: url(光标文件.cur), auto;
}
a:hover {
    cursor: url(光标文件.cur), auto;
}

body的为全局默认光标 a:hover的则为a标签时 使用的样式,就这么简单,表情

缩写CSS样式的好处:

对于浏览者而言,缩写可以减少CSS代码量,进而减少CSS文件体积,有利于访问者更快的打开网页;对于开发者而言,CSS代码量少,阅读简洁明了;对于网站服务器而言,在相同带宽下可以承受更多的访问请求。

常用CSS样式表缩写语法总结

盒尺寸(padding、margin)
常见margin与padding边距缩写margin外边距与padding内边距是制作布局时常用到的两个属性,在传统写法上,我们通常使用以下形式:

.box{
   width:300px;
   height: 300px;
   background: #eee;
   margin-left: 20px;
   margin-right: 30px;
   margin-top: 40px;
   margin-bottom: 50px;
}

padding也是如此,而在css缩写中,可以使用缩写的编写方式,margin及padding的缩写在默认状态下需要提供4个参数,按顺序分别为上、右、下、左。例:

.box{
   width:300px;
   height: 300px;
   background: #eee;
   /*外边距连写*/
   margin:20px 30px 40px 50px;
}

注意:margin及padding的缩写比较特殊一点,方便的记忆方法是顺时针,上右下左。
通常有下面四种书写方法(这里拿margin做例子):

/*顺序*/
/*从上开始,顺时针转;margin:上 右 下 左*/
/*上下左右都相等: margin: 5px(上下左右)*/
margin: 5px;
/*上下相等, 左右相等: margin: 5px(上下) 15px(左右)*/
margin: 5px 15px 5px 15px;
/*上下不等,左右相等: margin: 5px(上) 10px(左右) 20px(下)*/
margin: 5px 10px 20px 10px
/*上下左右都不相等: margin: 20px(上)   30px(右)   40px(下)  50px(左)*/
Margin: 20px  30px   40px  50px;


边框(border)
border边框缩写border对象本身是一个非常复杂的对象,包含了四条边的不同宽度、不同颜色及不同样式,所以border对象提供的缩写形式相对来说也要丰富很多,不仅可以对整个对象进行border缩写,也可以对单独某一个边进行缩写,
对于整个对象而言,可以使用如下的格式进行缩写:

border:border-width border-style border-color 

代码示例:

.box{border:5px solid red;}

通过上面的属性,我们就可以把样式针对整个对象或者每一个边都设置不同的样式


.box{
   width: 300px;
   height: 390px;
   background: #999;
   border-top-style: solid;   /*线型*/
   border-top-color: #ff0000;     /*边框颜色*/
   border-top-width: 5px;   /*宽度*/ 
   /*边框属性连写*/
   border-top: #ff0000 solid 5px;   
   /*四个边框值相同的写法*/
   border:12px solid red;    
   /*单独边框并且设置不同的样式*/ 
   border-top: red solid 5px; 
   border-right: 12px dotted #ffc0cb;
   border-buttom: 12px dotted #191970;
   border-left: 5px dashed #00ffff;
}

注意:border缩写样式没有顺序要求,但线型(border-style)为必写项。
除了对于边框整体及4个边单独的缩写之外,border还为我们提供了对于
border-style、border-width以及border-color的单独缩写方式,语法格式如下:

border-width:top right bottom left;
border-color:top right bottom left; 
border-style:top right bottom left; 

代码示例:

.box{
   border-width:1px 2px 3px 4px;
   border-color:blue white red green; 
   border-style:solid dashed; 
}


背景(Background)
背景的属性如下:
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
背景缩写用于针对背景控制的相关属性进行缩写,其语法格式如下:
background:background-color background-image background-repeat background-attachment background-position
根据以上语法,可以缩写为一句:

.box{background:#f00 url(background.gif) no-repeat fixed 0 0;} 

注意:background属性连写的时候没有顺序要求,但url为必写项。
color颜色缩写css对于颜色代码也提供了简单的缩写模式,主要针对16进制颜色代码。
16进制代码传统写法一般使用#ABCDEF,ABCDEF分别代表6个 16进制数,css的颜色缩写必须符合一定要求,
当A与B数字相同,C与D数字相同,E与F数字相同时,可以使用颜色缩写,
例:


p{color:#ffffff;}
/* 可以缩写为*/
p{color:#fff;}
p{color:#2255bb;}
/* 可以缩写为*/
p{color:#25b;} 


字体(fonts)
字体的属性如下:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
font字体缩写字体缩写是针对字体样式的缩写形式,包含字体、字号等属性,使用方法如下:

font:font-style font-variant font-weight font-size line-height font-family 

根据以上语法,可以缩写为一句:

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意:font:后边写属性的值。一定按照书写顺序。文本属性连写文字大小(font-size)和字体(font-family)为必写项。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,
list的属性如下:
list-style-type:circle;
list-style-position:inside;
list-style-image:url(image.gif);
list列表缩写list缩写是针对list-style-type、list-style-position等用于ul的list属性,
语法格式如下:

list-style:list-style-type list-style-position list-style-image 

代码示例:
根据以上语法,可以缩写为一句

ul {list-style:disc outside none;} 


这里顺便提一句,有很多样式都涉及到了四边的问题,这里统一说明。
四边的简写一般如下:selector {property: value}
value:top | right | bottom | left

具体可以参考上面的marginborder属性!(←这里的marginborder属性可以点击噢(〃'▽'〃))
最后,偷偷告诉大家,学好css最需求的就是多看多写多实践,
那样才能学的好,记得住。٩(๑❛︶❛๑)۶