未在laravel的查看頁面上獲得CSS和JS效果

我創建了一個小型導航欄，我從網站下載。我已經在粘貼的welcome.blade.php HTML和我已經把CSS公共文件夾中未在laravel的查看頁面上獲得CSS和JS效果

<!doctype html> 
<html lang=''> 
<head> 
    <meta charset='utf-8'> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="public/css/styles.css"> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="script.js"></script> 
    <title>CSS MenuMaker</title> 
</head> 
<body> 

<div id='cssmenu'> 
<ul> 
    <li class='active'><a href='#'>Home</a></li> 
    <li><a href='#'>Products</a></li> 
    <li><a href='#'>Company</a></li> 
    <li><a href='#'>Contact</a></li> 
</ul> 
</div> 

</body> 
<html>

這是我的CSS代碼

@import url(http://fonts.googleapis.com/css?family=Raleway); 
#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#cssmenu { 
    width: auto; 
    border-bottom: 3px solid #47c9af; 
    font-family: Raleway, sans-serif; 
    line-height: 1; 
} 
#cssmenu ul { 
    background: #ffffff; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu.align-center > ul { 
    font-size: 0; 
    text-align: center; 
} 
#cssmenu.align-center > ul > li { 
    display: inline-block; 
    float: none; 
} 
#cssmenu.align-right > ul > li { 
    float: right; 
} 
#cssmenu.align-right > ul > li > a { 
    margin-right: 0; 
    margin-left: -4px; 
} 
#cssmenu > ul > li > a { 
    z-index: 2; 
    padding: 18px 25px 12px 25px; 
    font-size: 15px; 
    font-weight: 400; 
    text-decoration: none; 
    color: #444444; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    margin-right: -4px; 
} 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li:hover > a, 
#cssmenu > ul > li > a:hover { 
    color: #ffffff; 
} 
#cssmenu > ul > li > a:after { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1; 
    width: 100%; 
    height: 120%; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    content: ""; 
    -webkit-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    -webkit-transform: perspective(5px) rotateX(2deg); 
    -webkit-transform-origin: bottom; 
    -moz-transform: perspective(5px) rotateX(2deg); 
    -moz-transform-origin: bottom; 
    transform: perspective(5px) rotateX(2deg); 
    transform-origin: bottom; 
} 
#cssmenu > ul > li.active > a:after, 
#cssmenu > ul > li:hover > a:after, 
#cssmenu > ul > li > a:hover:after { 
    background: #47c9af; 
}

但是當我運行的頁面頁面不顯示任何效果，只是以普通字體列出的白頁菜單。我知道這是一件簡單的事情，但作爲新的laravel請幫助我

來源

2017-08-04 Zubair Nazer Oliyat

請提供足夠的細節來弄明白像laravel版本和您正在使用像仙丹 –

任何工具，我用laravel最新版本 –

使用laravel的助手爲js和css文件，並且最好將腳本包含在body標籤之後。試試這個：

<!doctype html> 
    <html lang=''> 
    <head> 
     <meta charset='utf-8'> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="{{asset('css/styles.css')}}"> 
     <title>CSS MenuMaker</title> 
    </head> 
    <body> 

    <div id='cssmenu'> 
    <ul> 
     <li class='active'><a href='#'>Home</a></li> 
     <li><a href='#'>Products</a></li> 
     <li><a href='#'>Company</a></li> 
     <li><a href='#'>Contact</a></li> 
    </ul> 
    </div> 
    </body> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
     <script src="{{asset('js/script.js')}}"></script> 
    <html>

來源

2017-08-04 09:58:30

未在laravel的查看頁面上獲得CSS和JS效果

回答

相關問題