Styles are not going into effect(样式不会生效)-6ren

Styles are not going into effect(样式不会生效)

转载作者：bug小助手更新时间：2023-10-25 15:20:57

Here is my content.php page:

以下是我的Content.php页面：

<div class="section">
    <button class="create-note">Create Note</button>
        </div>
        <div class="section">
        <div class="list-of-notes">
        <div class="intro-message add-note-message welcome-note">
            <p>Don't have any notes yet? <a href="">Add one here</a></p>
        </div>
    </div>
</div>

Here is my lists.php page:

以下是我的lists.php页面：

<?php
require_once "header.php";
?>
<div class="lists-content">
    <div class="note">
        <p class="header-note">
            <!--Add elipsis-->
        </div>
        <p class="center-note note-content"></p>
        <p class="footer-note dates">
            <!--Sorting and iltering based on modification and dates-->
        </p>
    </div>
</div>

Here is my header.php which links to all four of my stylesheets I'm using:

下面是我的header.php，它链接到我正在使用的所有四个样式表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,400;0,500;1,400;1,500&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d5b1d340c5.js" crossorigin="anonymous"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/layout.css?v=<?php echo time(); ?>">
    <link rel="stylesheet" href="css/styles.css?v=<?php echo time(); ?>">
    <link rel="stylesheet" href="css/local-styles.css?v=<?php echo time(); ?>">
    <link rel="stylesheet" href="css/responsive.css?v=<?php echo time(); ?>">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="left">
                <i class="fa-solid fa-bars" id="bars"></i>
                <h1 class="logo">Notebook</h1>
            </div>
            <div class="center">
                <input type="text" class='searchbar' placeholder='Search Notes'>
            </div>
            <div class="right">
                <div class="bell-wrapper">
                    <p class="notifications">8</p>
                    <i class="fa-solid fa-bell"></i>
                </div>
                <i class="fa-solid fa-gear"></i>
            </div>
        </div>
        <div class="sidebar" id="navbar">
            <div class="navbar-items">
            <a href="homepage.php">Home</p>
            <a href="lists.php">Lists</p>
            <a href="">Editor</p>
            <a href="">Settings</p>
            </div>
            <div class="logout-login options"></div>
        </div>
        <div class="content">

Here is my styles.css and local-styles.css:

下面是我的style es.css和local-style es.css：

.header .left {
    width:150px;
    height:100%;
    display:flex;
    align-items:center;
}

.left .fa-bars {
    color:#01000a;
    padding:12px;
    cursor:pointer;
    border-radius:2px;
    margin:10px;
}

.left .fa-bars:hover {
    background:#efefef;
}

#bars {
    display:none;
}

.left h1.logo {
    font-family:"Inter", sans-serif;
    font-weight:500;
    font-weight:bold;
    font-size:25px;
    color: rgb(1, 0, 3);
    margin:20px;
}

.header .center {
    flex:1;
    height:100%;
    display:flex;
    align-items:center;
    justify-content: center;
}

.center input.searchbar {
    border: 1px solid #f7f2f2;
    border-radius: 4px;
    padding: 15px;
    margin: 16px;
    /*width: 900px;*/
    width:100%;
    outline: none;
    box-shadow:2px 2px 12px 2px #fffcfc;
}

.center input.searchbar::placeholder {
    font-family: 'Roboto',"Poppins", sans-serif;
    color:rgb(228, 220, 220);
    font-size: 16px;
}

.content .section {
    width: 100%;
    height: 80px;
    /*background: #efefef;*/
    margin: 1px;
}

.section .create-note {
    border:none;
    outline:none;
    padding:16px;
    border-radius:2px;
    background:#efefef;
    /*cursor:pointer;*/
    font-family:"Roboto",sans-serif;
    font-size:14px;
    margin:10px;
    box-shadow:2px 2px 12px 2px #fffbfb;
    width:200px;
}

.section .create-note:hover {
    background:#5558f5;
    color:#fff;
}

.section .list-of-notes {
    width:500px;
    height:400px;
    margin-left:10px;
    position:relative;
}

.list-of-notes .intro-message > p {
    font-family:"Roboto",sans-serif;
}

.list-of-notes .intro-message a {
    font-family:"Roboto",sans-serif;
    color: rgb(124, 100, 255);
    text-decoration: none;
}


.header .right {
    width:100px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.right .bell-wrapper {
    width:40px;
    height:40px;
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.bell-wrapper .notifications {
    position:absolute;
    top:-5px;
    right:-5px;
    width:20px;
    height:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    font-family:"Roboto",sans-serif;
    padding:2px;
    font-size:14px;
    background:#5558f5;
    color:#fff;
}

.right i {
    margin:10px;
    padding:10px;
    border-radius:4px;
    cursor:pointer;
    color:#01000a;
}

.right i:hover {
    background:#efefef;
}

.sidebar .navbar-items {
    width:100%;
    height:60%;
    display:flex;
    flex-direction:column;
}

.navbar-items a {
    font-family:"Roboto",sans-serif;
    color:#01000a;
    padding:15px;
    border-radius:2px;
    margin:12px;
    text-align:center;
    cursor:pointer;
    background:#fdfdfd;
    border:1px solid #efefef;
    text-decoration:none;
}

.navbar-items a:hover {
    background:#5558f5;
    color:#fff;
    border:1px solid #5558f5;
}

.sidebar .options {
    width:100%;
    height:40%;
}

.footer p {
    font-family: 'Roboto', sans-serif;
    margin: 15px;
    color: #01000a;
}

.footer a {
    margin:15px;
    color: #01000a;
    text-decoration:none;
}

/*Lists.php*/
.lists-content {
    width:100%;
    height:100vh;
}

.lists-content .note {
    background:rgb(255, 255, 255);
    width:300px;
    height:300px;
    box-shadow:2px 2px 12px 2px #fff9f9;
    border:1px solid #efefef;
    border-radius:4px;
    display:flex;
    flex-direction: column;
}

.note > .header-note {
    width:100%;
    height:20%;
    background:red;
}

.note > .center-note {
    width:100%;
    height:60%;
    background:blue;
}

.note > .footer-note {
    width:100%;
    height:20%;
    background:red;
}

.container {
    width:100%;
    height:100vh;
    display: flex;
    flex-direction: column;
    gap:2px;
    display:grid;
    grid-template-columns:300px 1fr;
    grid-template-rows:70px 500px 1fr;
    grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
    overflow:hidden;
}

.header {
    grid-area:header;
    border-radius:2px;
    display:flex;
    border-bottom:1px solid #efefef;
}

.sidebar {
    grid-area:sidebar;
    border-radius:2px;
    background:#ffffff;
    border-right:1px solid #ebebeb;
    transition:width 0.4s;
    display:flex;
    flex-direction:column;
    position:relative;
    /*left:-300px;*/
    transition:left 0.4s;
}

.content {
    grid-area:content;
    border-radius:2px;
    position:relative;
    display: flex;
    flex-direction: column;
}

.footer {
    grid-area:footer;
    border-radius:2px;
    background: #efefef;
    border-top: 1px solid #d6d3d3;
    display:flex;
    align-items:center;
}

Does anyone know what's going on, or what would be causing this? Like theirs cursor pointer everywhere in the content section and I can't fix it and some of my styles aren't going into effect on my lists.php where I'm trying to add colored sections into my .note div.

有人知道这是怎么回事吗，或者是什么原因造成的？就像他们的光标指针一样，在内容部分到处都是，我不能修复它，我的一些样式在我的lists.php上不会生效，我正试图在我的.note div中添加彩色部分。

更多回答

Check the browser's console tab and the network tab to see if there may be any 404 errors on loading file(s). If nothing obvious there, even though I see the URL cache bust using time() calls, try clearing browser cache and reload.

检查浏览器的控制台选项卡和网络选项卡，查看加载文件时是否存在404错误(S)。如果没有什么明显的东西，即使我使用time()调用看到URL缓存崩溃，也可以尝试清除浏览器缓存并重新加载。

优秀答案推荐

更多回答

文章推荐： Using Material icon with(将材质图标用于)

go - go-go 图表库中的文本旋转
我正在使用 go 图表库 https://github.com/wcharczuk/go-chart制作条形图。我面临的问题是标签值很长，我想将文本旋转 45 度以显示完整文本我喜欢显示的日期格式是
go - `go build` 与 `go build file.go`
我在构建一个非常简单的通过 cgo 调用 c 代码的 go 程序时遇到了问题。我的设置: $: echo $GOPATH /go $: pwd /go/src/main $: ls ctest.c
go - Go 项目中是否需要 main.go？
没有 C 的背景，只有 Go 的“初学者”经验，我正在尝试弄清楚 main.go 是实际需要的还是只是一个约定。我想创建一个简单的网络 API，但有人可以为我澄清一下吗？最佳答案 main.go
go - Go 运行时怎么可能用 Go 编写？
我read从 Go 1.4 开始，Go 运行时是用 Go 本身编写的(而不是用 C)。这怎么可能？如果 Go 程序在运行时之上运行，并且运行时是 Go 程序，那么运行时是否在自身之上运行？最佳答案
go - Go 中的 "go"关键字
这是“Go 之旅”中的代码示例 Range and Close : package main import ( "fmt" ) func fibonacci(n int, c chan int
go - 在 go 模块文件 (go.mod) 中使用 "go"版本指令有何含义
给定以下 go.mod 文件: module foo go 1.12 require ( github.com/bar/baz v1.0.0 github.com/rat/cat v1
go - 使用 go run code.go 执行 Go 程序以供实际使用是最佳实践吗？
我有一个 CI/CD 管道，它需要跨平台并与几个不同的管理程序一起工作。为了不必更改 Windows 和 Linux 的构建任务，我认为 Go 将是编写一次代码并在任何地方运行的好方法。然而，考虑到
go - 为什么建议在生产环境中运行 Go 应用程序时使用 `go build` 而不是 `go run`？
我有一个 Dockerfile，用于使用 go build 编译 Go 应用程序。我进行了研究，确实建议将 go build 用于生产。但是我找不到正确的答案来解释为什么。我了解 go run 创
go - `go run hello.go` 找不到 "hello.go"文件
我尝试在命令提示符#Go lang 中运行该程序-但是当我键入运行“go run hello.go”命令时，我开始了 CreateFile hello.go:The system cannot fin
go - 在另一个 go 程序中打开一个 go 文件
我正在使用“Go 编程语言”一书学习 Go。第一章介绍os.Open用于读取文件的模块。我尝试打开如下所示的 go 文件。 f, err = os.Open("helloworld.go") 我收
go - 有没有办法在 Go 代码中获取 Go 模块的完整路径
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题？通过 editing this post 添加详细信息并澄清问题. 2年前关闭。 Improve this
go - Go Playground 和 Go 在我的机器上的差异？
为了解决我对 goroutine 的一些误解，我去了 Go 操场跑了 this code : package main import ( "fmt" ) func other(done cha
go - 如何在 go 程序中将字符串评估为 go 代码？
这个问题在这里已经有了答案: Evaluate/Execute Golang code/expressions like js' eval() (5 个回答) 1年前关闭。对于任何 go 程序，我想
go - Go os args将“.go”视为文件路径而不是字符串
这是我基本上试图从路径打印基准的代码。这意味着，如果用户输入“/some/random/path.java”，则输出将为“path”。同样，如果用户arg为“/another/myapp.c”，则输
go - 如何将一个 Go 模块嵌套在多个 Go 模块中作为本地依赖项
$ go version 1.13.3 我的文件夹结构如下: GOPATH +---src +--- my-api-server +--- my-auth-server
go - go build 是否包含二进制的非 go 文件？
这个问题在这里已经有了答案: How to embed file for later parsing execution use (4 个答案) What's the best way to bun
go - 不能在 Go 中使用 "go"作为变量名
我觉得这有点奇怪，为什么这段代码不起作用？ package main import "fmt" func main() { var i, j int = 1, 2 k
go - "go run file.go"命令后可执行文件存储在哪里？
go编译器执行完如下命令后的可执行文件存放在哪里？ $> go run file.go 最佳答案在 /tmp 文件夹中，如果您使用的是 unix 机器。如果您使用的是 Windows，则在 \Us
go - 单个 go 项目使用的 go 包的正确文件夹结构
我目前正在开始使用 Go，并且已经深入研究了有关包命名和工作区文件夹结构的注意事项。不过，我不太确定如何根据 Go 范式正确组织我的代码。这是我当前的结构示例，它位于 $GOPATH/src 中:
go - Go App 可以动态编译 Go 代码吗？
假设我有一个接受用户输入的 Lua 程序，而该输入恰好是有效的 Lua 源代码。这是在程序仍在运行时进行清理、编译和执行的。 Go 是否(或将)实现这样的事情？最佳答案我认为以下两个项目之间有足够

bug小助手

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Styles are not going into effect(样式不会生效)