HTML5

2022-10-13
响应式导航

以下是实现HTML5响应式导航的一个示例：

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<head>
    <title>响应式导航</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            margin: 0;
        }

        .topnav {
            overflow: hidden;
            background-color: #333;
        }

            .topnav a {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

                .topnav a:hover {
                    background-color: #ddd;
                    color: black;
                }

            .topnav .icon {
                display: none;
            }

        @media screen and (max-width: 600px) {
            .topnav a:not(:first-child) {
                display: none;
            }

            .topnav a.icon {
                float: right;
                display: block;
            }

            
            .container {
                display: inline-block;
                cursor: pointer;
            }

            
            .bar1, .bar2, .bar3 {
                width: 35px;
                height: 5px;
                background-color: #333;
                margin: 6px 0;
                transition: 0.4s;
            }

            .change .bar1 {
                -webkit-transform: rotate(-45deg) translate(-9px, 6px);
                transform: rotate(-45deg) translate(-9px, 6px);
            }

            .change .bar2 {
                opacity: 0;
            }

            .change .bar3 {
                -webkit-transform: rotate(45deg) translate(-8px, -8px);
                transform: rotate(45deg) translate(-8px, -8px);
            }
        }

        @media screen and (max-width: 600px) {
            .topnav.responsive {
                position: relative;
            }

                .topnav.responsive .icon {
                    position: absolute;
                    right: 0;
                    top: 0;
                }

                .topnav.responsive a {
                    float: none;
                    display: block;
                    text-align: left;
                }
        }
    </style>
    <script type="text/javascript">
        function myFunction(iconid) {
            iconid.classList.toggle("change");
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</head>
<body>
    <div class="topnav" id="myTopnav">
        <a href="#home">主页</a>
        <a href="#news">新闻中心</a>
        <a href="#contact">联系我们</a>
        <a href="#about">关于</a>
        <a href="javascript:void(0);" style="font-size:15px;" class="icon">
            <!--&#9776;-->
            <div class="container" onclick="myFunction(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
        </a>
    </div>
    <div style="padding-left:16px">
        <h2>标题</h2>
        <p>内容</p>
    </div>
</body>
阅读更多

2022-10-13
路径中的点“./”、“../”、“/”代表的含义

./ 代表当前目录

../ 代表上一层目录

/ 代表根目录

阅读更多

2022-10-13
sessionStorage和localStorage的区别与用法

二者都是用于浏览器存储，多用于用来存储网站一些需要页面交互的隐秘信息。
当然主流浏览器和高版本的IE浏览器是支持这两种用法的，为了代码的严谨性我们可以加一个判断：

 if (!window.sessionStorage) {
              this.$message("浏览器不支持sessionStorage，请联系管理员解决");
            }
阅读更多

2022-09-28
后端返回的数据会带一个换行符（“↵”），前端如何根据该符号进行换行展示

方法一：textarea赋值

　　当我们拿到后端返回的数据时，直接通过v-model绑定给textarea，就会有默认的换行，但是它不能随内容高度增加textarea高度实现自适应，如果用JS来实现的话，相对麻烦一点。

方法二：使用v-html输出文本

　　“↵”符号在html中会识别别为\r,\n等转义字符，所以我们可以使用\r\n去替换（.replace(/(\r\n|\n|\r)/gm, ‘ < br /> ‘)）

代码示例

1
$ <span v-html="detail.replace(/(\r\n|\n|\r)/gm, '<br />')"></span>
阅读更多
浏览 次 |

© 2023 南疆 with help from Hexo and Twitter Bootstrap. Theme by Freemind.

container-narrow --> ▲