mynormalize1.2.0

mynormalize>1.2.0
1.7k 词
mynormalize

mynormalize样式#

时间：2023-3-10

readme

自定义颜色#

  • --dark
  • --fontgrey
  • --bggrey
  • --lightgrey
  • --pink
  • --red
  • --yellow
  • --purple
  • --lightgreen
  • --green

icomoon字体图标#

注意路径

                
css

                /*icomoon字体图标引入,注意路径*/
                @font-face {
                    font-family: 'icomoon';
                src: url('../fonts/icomoon.eot?rgzkco');
                src: url('../fonts/icomoon.eot?rgzkco#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?rgzkco') format('truetype'), url('../fonts/icomoon.woff?rgzkco') format('woff'), url('../fonts/icomoon.svg?rgzkco#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;
                font-display: block;
            
                
css

                /*使用*/
                .fonticon::after {
                font-family: "icomoon";
                content: '\e902';
                font-size: 28px;
                color: green;
                }

iconfont字体图标#

注意路径

                
css

                @font-face {
                font-family: 'iconfont';
                src: url('../iconfont/iconfont.woff2?t=1678453781276') format('woff2'),url('../iconfont/iconfont.woff?t=1678453781276') format('woff'),url('../iconfont/iconfont.ttf?t=1678453781276') format('truetype');
                }

使用方法 官网详解 

                
css

                .iconfont {
                font-family: "iconfont" !important;
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                }
            
                
html

                
                <span class="iconfont">&#xe628;</span>

或者使用after伪元素的方式使用

注意：上述的 &#xe628; 那是字符实体编码，其中 &# 是开头用以标明这是字符实体，x表示这是十六进制。 而CSS的 content 接受的也是16进制的 Unicode编码，如此一来 就可以直接写成：\e628

                
css

                [class^="lan"]::before {
                font-family: 'iconfont';
                position: absolute;
                right: 100%;
                padding-left: 10px;
                font-size: 16px;
                border-radius: 0 0 0 5px;
                background-color: rgba(255, 255, 255, 0.6);
                }
                .lan-css {
                color: var(--purple);
                }
                .lan-css::before {
                content: '\e700';
                }

标题标签#

1mynormalize#

2mynormalize#

3mynormalize#

4mynormalize#

5mynormalize#
6mynormalize#

a标签(链接)#

mynormalize

p标签#

mynormalize

strong标签(加粗)#

mynormalize

代码块(pre)#

                
html

                mynormalizeEmmet: pre.code_block>span{content}

prismjs代码块#

const teacher2 = {
    uname: 'mike',
    sayBye: () => console.log(this), // window
    sayHi: function() {
        let i = 10
        const count = () => console.log(this); // teacher2
        count()
    }
}

使用方法

<!-- 引入资源 -->
<link rel="stylesheet" href="./components/prism.css">
<script src="./components/prism.js"></script>
<!-- html -->
<pre><code class="language-语言类型">相应代码内容</code></pre>
<!-- 若需要行号，在pre或body(推荐)上加line-numbers类即可 -->

button按钮#

img图片#

img图片(普通)#

img图片(图片名含特定词cut)#

列表#

ul li无序列表#

  • mynormalize
  • mynormalize

ol li有序列表#

  1. mynormalize
  2. mynormalize

table表格#

表格题
表头项 表头项
mynormalize mynormalize
mynormalize· mynormalize 
            
html

                Emmet: table>caption{表格题目}+(thead>tr>th*2{表头项})+tbody>tr*2>td*2

iframe内联框架#

input表单#

clearfix清除浮动#

清除浮动

未清除浮动

shadow阴影#

无阴影

有阴影

整体层次结构#

div1

div2

div3

div4(小卡片)

div4(普通的，较大)

tips要点#

mynormalize.css是我个人使用的统一样式文件

flex布局#

row方向#

column列方向#

blockquote引用块#

普通引用#

mynormalize.css：个人使用的统一样式文件

步骤，长文段块#

mynormalize.css：个人使用的统一样式文件

del删除线#

原价998，今天只要198!!!

code词语高亮块#

mynormalize.css

sidebar侧边导航#

                
html

                <!-- 在文档开头添加以下语句 -->
                <div class="mask"></div>
                <aside class="sidebar"></aside>
                <!-- 文档末引入js文件 -->
                <script src="./mynormalize.js"></script>
                <script src="./trans-animate.js"></script>

注意警示块note#

mynormalize

返回顶部按钮backtop#

                
html

                <div class="backtop"></div>

直达底部按钮godown#

                
html

                <div class="godown"></div>