我有一個 HTML 頁面（chat.blade.php）和一個 CSS 檔案（app.css），由于某種原因，我的 CSS 代碼在 PHP run dev 命令后沒有改變頁面，可能是我沒有正確寫出路徑在 HTML 檔案中，請告訴我，因為我第一次使用 CSS。app.css（在資源檔案夾中）
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Bicyclette', sans-serif;
}
body {
background-color: #EEE;
}
input, button {
appearance: none;
border: none;
outline: none;
background: none;
}
input {
display: block;
width: 100%;
background-color: #FFF;
padding: 12px 16px;
font-size: 18px;
color: #888;
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
display: flex;
padding-top: 128px;
padding-bottom: 32px;
background-color: #8C38FF;
background-image: linear-gradient(to bottom, #8C38FF, #6317ce);
align-items: center;
justify-content: flex-end;
flex-direction: column;
box-shadow: 0px 6px 12px rgba(0, 0 ,0 , 0.15);
padding-left: 16px;
padding-right: 16px;
}
h1 {
color: #FFF;
text-transform: uppercase;
text-align: center;
margin-bottom: 16px;
}
#username {
border-radius: 8px;
transition: 0.4s;
text-align: center;
}
#username:focus {
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
}
#messages {
flex: 1 1 0%;
overflow: scroll;
padding: 16px;
}
.message {
display: block;
width: 100%;
border-radius: 99px;
background-color: #FFF;
padding: 8px 16px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
font-weight: 400;
margin-bottom: 16px;
}
.message strong {
color: #8C38FF;
font-weight: 600;
}
#message_form {
display: flex;
}
#message_input {
flex: 1 1 0%;
}
#message_send {
appearance: none;
background-color: #8C38FF;
padding: 4px 8px;
color: #FFF;
text-transform: uppercase;
}
還有我的 chat.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Чат</title>
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div class="app">
<header>
<h1>Чат</h1>
<input type="text" name="username" id="username" placeholder="Вкаж?ть ваше ?м'я">
</header>
<div id="messages"></div>
<form id="message_form">
<input type="text" name="message" id="message_input" placeholder="Написати пов?домлення...">
<button type="submit" id="message_send">Отправить сообщение</button>
</form>
</div>
<script src="./js/app.js"></script>
</body>
</html>
uj5u.com熱心網友回復：
建議：在瀏覽器中打開頁面，CTRL U查看頁面原始碼。單擊該css檔案并確保它被正確加載。您可能將其指向錯誤的目錄。
如果public/css檔案夾中有資產，則可以使用該asset函式正確參考資產
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
uj5u.com熱心網友回復：
您應該將 CSS 路徑檔案更新為 ../../public/css/app.css
../: 表示從當前位置轉到上一個檔案夾（這里是chat.blade.php）
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/352662.html
標籤：javascript php html css 拉拉维尔
上一篇：根據資料庫中的值更改div類值