月落星辰

落霞与孤鹜齐飞，秋水共长天一色。

2022-10-13
glyphicon和font awesome字体图标的混合使用导致样式混乱

原则上字体文件的混合使用不会出现混乱，或页面出现乱码标识，框框等问题，如果出现了这种问题，可以从以下几种方式去排查。

1).对应css文件引用路径不对
2).只是引用了css，却没有添加对应的fonts文件夹【字体文件】
3). css文件与字体文件的相对路径不对
4).网站中自定义了全局 font,或font-family 导致 字体文件显示不出来

阅读更多

2022-10-13
HTML5的主要功能构成

HTML5主要以下功能构成：

Canvas (2D和3D)
Channel消息传送
Cross- document消息传送
Geolocation
MathML
Microdata
Server-Sent Events
Scalable Vector Graphics (SVG)
WebSocket API及协议
Web Origin Concept
Web Storage
Web SQL database
Web Workers
XMLHttpRequest Level 2

阅读更多

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
Abp生成模板项目

1.通过官网选择前后端语言，这里我后台语言选的是“ASP.NET Core”,前端语言选的是“Vue.js”

2.在“Choose your project’s name”栏输入项目名；“邮箱”选填可不填。

3.点击“Create my project!”便可生出abp模板项目后下载。

4.打开生成的文件夹，有个版本号（我这里是6.5.0）的文件夹，里面的文件夹“aspnet-core”也就是后台项目，可通过vs打开开发；而“vue”文件夹就是前端项目源文件，可通过vscode或Hbuilder等软件开发。

后台项目文件夹各项目的主要作用：

src路径下
.Application：应用服务层
.Core：领域层
.EntityFrameworkCore：基础层
.Migrator：abp数据库迁移项目
.Web.Core、.Web.Host：展现层
test路径下
.Tests：单元测试

阅读更多
浏览 次 |

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

container-narrow --> ▲