这是您的问题的解决方案,只需将“ref”更改为“rel”,您就可以开始了。 一切都是正确的,因为你的外部样式表因“ref”而无法加载。要加载任何外部css文件,请使用“rel”而不是“ref”。我附上了一段代码供您参考。我希望,它解决了你的问题。
<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> <style> section.pricing { background: #9CECFB; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #0052D4, #65C7F7, #9CECFB); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #0052D4, #65C7F7, #9CECFB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .pricing .card { border: none; border-radius: 1rem; transition: all 0.2s; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); } .pricing hr { margin: 1.5rem 0; } .pricing .card-title { margin: 0.5rem 0; font-size: 0.9rem; letter-spacing: .1rem; font-weight: bold; } .pricing .card-price { font-size: 3rem; margin: 0; } .pricing .card-price .period { font-size: 0.8rem; } .pricing ul li { margin-bottom: 1rem; } .pricing .text-muted { opacity: 0.7; } .pricing .btn { font-size: 80%; border-radius: 5rem; letter-spacing: .1rem; font-weight: bold; padding: 1rem; opacity: 0.7; transition: all 0.2s; } /* Hover Effects on Card */ @media (min-width: 992px) { .pricing .card:hover { margin-top: -.25rem; margin-bottom: .25rem; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3); } .pricing .card:hover .btn { opacity: 1; } } </style> <body> <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! --> <section class="pricing py-5"> <div class="container"> <div class="row"> <!-- Free Tier --> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body"> <h5 class="card-title text-muted text-uppercase text-center">Free</h5> <h6 class="card-price text-center">$0<span class="period">/month</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li> <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited Private Projects</li> <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated Phone Support</li> <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain</li> <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- Plus Tier --> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body"> <h5 class="card-title text-muted text-uppercase text-center">Plus</h5> <h6 class="card-price text-center">$9<span class="period">/month</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li> <li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li> <li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status Reports</li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- Pro Tier --> <div class="col-lg-4"> <div class="card"> <div class="card-body"> <h5 class="card-title text-muted text-uppercase text-center">Pro</h5> <h6 class="card-price text-center">$49<span class="period">/month</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong></li> <li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free Subdomains</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> </div> </div> </section> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> </body>