SKILLNULL, Author at SKILL.NULL

让textarea完全显示文章并且不滚动、不可拖拽、不可编辑

1

2

3

4

5

6

7

8

9

10

11

textarea {

　　width: 100%;

　　border: none;

　　outline: none;

　　resize: none;

　　overflow: hidden;

　　padding-bottom: 100%;

　　background-color: inherit;

}

2018-12-03by SKILLNULL HTML&CSS 阅读(8791)评论(0)

浏览器滚动条样式更改

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

::-webkit-scrollbar { // 滚动条整体部分

width: 6px;

height: 8px;

}

::-webkit-scrollbar-track { // 外层轨道

background-color: #eee;

border-radius: 4px;

}

::-webkit-scrollbar-track-piece { // 内层滚动槽

background-color: #eee;

border-radius: 4px;

}

::-webkit-scrollbar-thumb { // 滚动的滑块

background: rgba(32, 33, 36, 0.3);

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: rgba(32, 33, 36, 0.4);

width: 10px;

}

::-webkit-scrollbar-corner { // 边角

display: none;

}

::-webkit-scrollbar-button { // 滚动条两端的按钮

display: none;

}

注：目前仅Chrome下生效

2021-07-06by SKILLNULL HTML&CSS 阅读(9273)评论(0)

PHP获取当前位置

如果想动态的获取当前栏目所处的位置，就要关联到数据库，下面是例子：

栏目表（category）：

涉及到二级目录。

（1）首先在你的首页导航栏，还有首页所出现的链接后面，为栏目加上catid，就像这样：。

当然，子页公用的导航栏也是要加上的。

（2）然后在控制[……]

2018-12-03by SKILLNULL PHP 阅读(10568)评论(0)

ThinkPHP动态版本控制

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

动态版本控制可以根据时间戳来实现，但是这样的话，每次打开页面都会重新下载加了版本控制的文件，如果你的页面自身打开本来就慢的话，

这样一来，无疑会带来很差的用户体验。

　　但是如果在每个引用文件后面都手动加上版本，如果页面比较多的话，这很明显是个很蠢的做法，所以我们可以这样做：

　　（1）在入口文件定义公共模块：

　　　　　　　　 define('COMMON_PATH','./Common/');

　　　　　然后将Home文件夹下的Common剪切出来，放在和入口文件同目录。

　　（2）在Common-->Conf-->config.php中配置一个数组：

　　　　　　　　　　<?php

　　　　　　　　　　　　return array(

　　　　　　　　　　　　//CSS版本控制

　　　　　　　　　　　　'cssVersion' => '1.0',

　　　　　　　　　　　　'cssVersionid' => '1.0',

　　　　　　　　　　　　//JS版本控制

　　　　　　　　　　　　'jsVersion' => '1.0',

　　　　　　　　　　　　'jsVersionid' => '1.0',

　　　　　　　　　　　　);

（3）在控制器中引入　　　　　　

　　　　　　　　<?php

　　　　　　　　　　namespace Home\Controller;

　　　　　　　　　　use Think\Controller;

　　　　　　　　　　class IndexController extends Controller {

　　　　　　　　　　　　public function index(){

　　　　　　　　　　　　/* 版本控制 */

　　　　　　　　　　　　$config = require(COMMON_PATH.'Conf/config.php');

　　　　　　　　　　　　this−>assign(′cssVersionid′,config['cssVersionid']);

　　　　　　　　　　　　this−>assign(′jsVersionid′,config['jsVersionid']);

　　　　　　　　　　　　/* 页面显示 */

　　　　　　　　　　　　$this->display();

　　　　　　　　　　　　　　}

　　　　　当然所有的assign必须放在$this->display();前面。在thinkPHP3.2.3中，你也可以这样写：

　　　　　　　　<?php

　　　　　　　　　　namespace Home\Controller;

　　　　　　　　　　use Think\Controller;

　　　　　　　　　　class IndexController extends Controller {　　　

　　　　　　　　　　　　　　public function __construct(){ /* 版本控制 */

　　　　　　　　　　　　　　　　　parent::__construct();

　　　　　　　　　　　　　　　　 $config = require(COMMON_PATH.'Conf/config.php');

　　　　　　　　　　　　　　　　　this−>assign(′cssVersionid′,config['cssVersionid']);

　　　　　　　　　　　　　　　　　this−>assign(′jsVersionid′,config['jsVersionid']);

　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　public function index(){

　　　　　　　　　　　　　　　/* 页面显示 */

　　　　　　　　　　　　　　　$this->display();

　　　　　　　　　　　　　　　}

　　（4）这时候就可以在HTML页面引入了

　　这样一来，每次有更新的话，只需要手动在config.php更改版本就行了，而且可以只更新CSS或JS其中一个。

2018-12-03by SKILLNULL PHP 阅读(9819)评论(0)

图片加载失败显示默认图片占位符

为网站的图片加上加载失败的默认占位符会让网站看起来更专业、更严谨。

<img src=”__PUBLIC__/img/simple/simplelove.png” onerror=”onerror=null;src=’__PUBLIC__/img/defaultpic.jpg'”&gt[……]

2017-08-14by SKILLNULL HTML&CSS 阅读(9321)评论(0)

JS根据不同浏览器(分辨率)调用不同css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

根据不同浏览器：

var version = navigator.userAgent;

if (version.indexOf("MSIE") > 1) {

document.write("<link href='ie.css' rel='stylesheet' type='text\/css'\/>");

} else if (version.indexOf("Chrome") > 1) {

document.write("<link href='chrome.css' rel='stylesheet' type='text\/css'\/>");

} else if (version.indexOf("Firefox") > 1) {

document.write("<link href='ff.css' rel='stylesheet' type='text\/css'\/>");

}

</script>

根据不同分辨率：

if (screen.width == 1024){

document.write("<link href='css/css1.css' rel='stylesheet' type='text\/css'\/>");

}else {

document.write("<link href='css/css2.css' rel='stylesheet' type='text\/css'\/>");}

</script>

2018-12-03by SKILLNULL JavaScript 阅读(8326)评论(0)

为 placeholder 自定义样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

textarea::-webkit-input-placeholder{

　　padding: 1em;

}

textarea::-moz-placeholder{

　　padding: 1em;

}

<span style="color: #339966;">同理，input的定义方法为：</span>

input::-webkit-input-placeholder{

　　padding: .2em;

}

input::-moz-placeholder{

　　padding: .2em;

}

2017-08-14by SKILLNULL HTML&CSS 阅读(8193)评论(0)

关于HTML5在动画制作工具Animatron的一些问题

Animatron是国外一款在线HTML5动画制作工具，网址：www.animatron.com 当然，想使用的话，是需要FQ的。

用animatron制作好的动画是可以下载为代码和GIF的，这时候付费玩家自然又是充满优越感的，因为付费玩家可以下载普通玩家下不到的部分。

下载下来的文件夹[……]

2018-12-03by SKILLNULL HTML&CSS 阅读(9038)评论(0)

在HTML中禁止文字的复制

很简单，只需在<body>中添加如下代码：

1

2

3

4

5

6

7

<body oncontextmenu='return false'

ondragstart='return false'

onselectstart='return false'

onselect='document.selection.empty()'

oncopy='document.selection.empty()'

onbeforecopy='return false'

onmouseup='document.selection.empty()'>

2018-12-03by SKILLNULL HTML&CSS 阅读(7384)评论(0)

JS返回上一页

<button onclick=”javascript:history.go(-1);”>返回上一页</button>

<button onclick=”javascript:history.back(-1);”>返回上一页</button>[……]

2017-08-14by SKILLNULL JavaScript 阅读(7624)评论(0)

2026年三月
一	二	三	四	五	六	日
« 2月
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31