css

最新推荐文章于 2023-01-07 11:14:52 发布

GY程序源

最新推荐文章于 2023-01-07 11:14:52 发布

阅读量262

点赞数

分类专栏：前端样式整理-CSS

本文链接：https://blog.csdn.net/jump_22/article/details/52945405

版权

前端样式整理-CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

样式

图片压缩工具

地址:http://spritegen.website-performance.org/

<i class="sprite sprite-arrowdown"></i>
.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-arrowdown {
    width: 66px;
    height: 58px;
    background-position: -5px -5px;
}

鼠标选中文字功能禁止，出现不能选中复制的效果

html:body {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
js:document.onselectstart = function(){return false;}

DIV宽度占满剩余空间

<style>
body{
margin:0;
        }
.stage{
position:relative;
        }
.left{
position:absolute;
            left:0;
            top:0;
            background-color:green;
            width:200px;
            height:500px;
        }
.center{
margin-left:200px;
            background-color:orange;
            height:500px;
        }
</style>
</head>
<body>
    <div class="stage">
        <div class="left"></div>
        <div class="center"></div>
    </div>
</body>
</html>

图片上下左右居中显示

<style>
.main-loading{
  z-index:2000;position:fixed;top:0;left:0;right:0;bottom:0;height:100%;background:rgba(0,0,0,.55);display:none;text-align:center;vertical-align:middle;
  span{
    height:100%;display: inline-block;vertical-align: middle;
  }
}
.main-loading img{
  display: block;width: 200px;height: 200px;display: inline-block;vertical-align: middle;
}
</style>
</head>
<body>
    <div class="main-loading"><span ></span><img src="Main/images/loading.gif" alt=""></div>
</body>
</html>

欢迎使用Markdown编辑器写博客

本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：

Markdown和扩展Markdown简洁的语法
代码块高亮
图片链接和图片上传
LaTex数学公式
UML序列图和流程图
离线写博客
导入导出Markdown文件
丰富的快捷键

快捷键

加粗 Ctrl + B
斜体 Ctrl + I
引用 Ctrl + Q
插入链接 Ctrl + L
插入代码 Ctrl + K
插入图片 Ctrl + G
提升标题 Ctrl + H
有序列表 Ctrl + O
无序列表 Ctrl + U
横线 Ctrl + R
撤销 Ctrl + Z
重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目 | 价格

——– | —

Computer | $1600

Phone | $12

Pipe | $1

可以使用冒号来定义对齐方式：

| 项目 | 价格 | 数量 |

| :——– | ——–:| :–: |

| Computer | 1600 元 | 5 |

| Phone | 12 元 | 12 |

| Pipe | 1 元 | 234 |

定义列表

Markdown　Extra　定义列表语法：

项目１

项目２

定义 A

定义 B

项目３

定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：


@requires_authorization

def somefunc(param1='', param2=0):

    '''A docstring'''

    if param1 > param2: # interesting

        print 'Greater'

    return (param2 - param1 + 1) or None

class SomeClass:

    pass

>>> message = '''interpreter

... prompt'''

脚注

生成一个脚注1.

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

行内公式，数学公式为： $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 。
块级公式：

x = - b \pm b 2 - 4 a c - - - - - - - \sqrt 2 a

$x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

更多LaTex语法请参考这儿.

UML 图:

可以渲染序列图：

或者流程图：

关于 序列图 语法，参考这儿,
关于 流程图 语法，参考这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
IE９以下不支持
IE９，１０，１１存在以下问题
1. 不支持离线功能
2. IE9不支持文件导入导出
3. IE10不支持拖拽文件导入

这里是脚注的内容. ↩

GY程序源

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css

样式鼠标选中文字功能禁止，出现不能选中复制的效果body { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; }欢迎使用Markdown编辑器写博客本Mar
复制链接

扫一扫