主页 / user-20764187

MrMustafa022's questions

Martin Hope
MrMustafa022
Asked: 2024-11-19 06:13:49 +0800 CST
  • 3

我需要在ASP.NET Core MVC项目中使用特定的字体，因此，在 css 文件中：

样式表：

@font-face {
    font-family: "CustomFont";
    src: url(css/Custom-VariableFont_slnt.ttf);
}

但我收到错误，字体路径无效

我尝试将其改变如下：

 url(~/Custom-VariableFont_slnt.ttf);

或者

 url(https://localhost:7267/css/Custom-VariableFont_slnt.ttf);

或者

 url(../css/Custom-VariableFont_slnt.ttf);

但我总是得到同样的错误：

Failed to load resource: the server responded with a status of 404 ()
javascript
Martin Hope
MrMustafa022
Asked: 2024-10-20 00:45:01 +0800 CST
  • 5

我是网页设计和 CSS 的新手，我需要让侧边栏 div 的滚动在右侧而不是左侧

HTML 方向是从右到左

我不希望侧边栏在左侧，只希望滚动而不是侧边栏本身

我试过了，但找不到任何解决方案，我试过使用 overflow-y 和 overflow-x，但没有用

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #1a1a1a;
}

.sidebar-link {
    text-decoration: none !important;
}

    .sidebar-link:hover {
        text-decoration: none !important;
    }

.sideBar li {
    list-style-type: none;
    margin-bottom: 0px;
}

.sideBar {
    z-index: 1000;
    background: #273c75;
    position: fixed;
    top: 10px;
    left: auto;
    padding: 40px 30px;
    box-shadow: 0 10px 20px #00000030;
    border-radius: 10px;
    max-height: 1000px;
    width: 120px;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .sideBar .navLinks {
        width: 100%;
    }

        .sideBar .navLinks li {
            border-radius: 15px;
            padding: 5px;
        }

            .sideBar .navLinks li a {
                padding-right: 15px;
            }

    .sideBar .link {
        display: flex;
        height: 30px;
    }

    .sideBar .link-text {
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        transform: scaleX(0);
        transform-origin: right;
        transition: all 0.2s ease;
        font-family: CairoFont;
    }

    .sideBar .link-icon {
        color: #fff;
        flex-basis: 30px;
        font-size: 21px;
        margin-left: 15px;
    }

    .sideBar .text-muted {
        color: #ccc;
        font-size: 21px;
        padding: 10px 0px;
        font-family: CairoFont;
    }

    .sideBar .navLinks li:hover {
        background: #fff;
    }

        .sideBar .navLinks li:hover .link > * {
            color: #2C3A47;
        }

    .sideBar:hover .link-text {
        transform: scaleX(1);
    }

    .sideBar:hover {
        width: 280px;
        align-items: flex-start;
    }
<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    
    

    <nav class="sideBar">

        <p class="text-muted">Test</p>
        <ul class="navLinks">
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 1</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 2</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 3</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 4</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 5</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 6</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 7</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 8</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 9</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 10</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 11</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 12</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 13</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 14</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 15</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 16</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 17</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 18</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 19</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 20</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 21</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 22</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 23</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 24</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 25</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 26</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 27</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 28</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 29</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 30</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 31</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 32</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 33</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 34</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 35</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 36</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 37</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 38</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 39</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 40</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 41</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 42</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 43</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 44</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 45</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 46</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 47</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 48</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 49</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 50</span>
                </a>

            </li>
        </ul>

    </nav>

    <main>
        
    </main>


</body>
</html>

html