如何解决为什么我的CSS代码不影响我的html代码？
我试图弄清楚为什么预览我的代码时没有应用我的CSS。我已经检查了文件树，并确保所有内容都已链接，但是它只是显示为纯文本。我正在使用html / css / bootstrap 3.0.2和jquery CDN。我也尝试过更改链接的顺序，但是我似乎无济于事。我包括了一部分代码，以便尽可能清楚地了解正在发生的事情。任何帮助或建议，我们将不胜感激。
====================================================================
Fonts
====================================================================
***/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url('font-awesome.css');
/***
====================================================================
Reset
====================================================================
***/
* {
margin:0px;
padding:0px;
border:none;
outline:none;
}
/***
====================================================================
Global Settings
====================================================================
***/
body {
font-family: 'Open Sans',sans-serif;
font-size:14px;
color:#353535;
line-height:1.6em;
font-weight:500;
background:#ffffff;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration:none;
cursor:pointer;
color:#000000;
}
a:hover,a:focus,a:visited{
text-decoration:none;
outline:none;
}
h1,h2,h3,h4,h5,h6 {
position:relative;
margin:0px;
background:none;
}
h1 {
font-size:24px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
p{
font-size:14px;
line-height:1.6em;
}
/***
====================================================================
Sidebar
====================================================================
****/
#sidebar{
position:fixed;
left:0px;
top:0px;
width:250px;
height:100%;
padding:0px 20px;
border-right:2px solid #cccccc;
z-index:10;
}
#sidebar .mCSB_inside > .mCSB_container{
margin-right:12px !important;
}
#sidebar .mCS_no_scrollbar .mCSB_container{
margin-right:0px !important;
}
#sidebar .menu-Box{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
overflow:auto;
padding:0px 0px 30px;
background:rgba(0,0.80);
transition:all 1000ms ease;
-moz-transition:all 1000ms ease;
-webkit-transition:all 1000ms ease;
-ms-transition:all 1000ms ease;
-o-transition:all 1000ms ease;
}
#sidebar .menu-Box .logo{
position:relative;
text-align:center;
margin-bottom:35px;
padding:30px 20px 10px;
}
#sidebar .menu-Box .logo img{
position:relative;
display:inline-block;
max-width:100%;
}
#sidebar .menu-Box .sticky-menu{
position:relative;
}
#sidebar .menu-Box .sticky-menu > ul{
position:relative;
display:block;
margin:0px;
padding:0px;
border-top:1px solid rgba(255,255,0.20);
}
#sidebar .menu-Box .sticky-menu > ul > li{
position:relative;
display:block;
padding:3px 0px;
border-bottom:1px solid rgba(255,0.20);
font-size:20px;
color:#ffffff;
text-align:right;
}
#sidebar .menu-Box .sticky-menu > ul > li > a{
position:relative;
display:block;
padding:7px 30px 7px 0px;
color:#ffffff;
font-size:13px;
font-weight:600;
line-height:20px;
text-transform:uppercase;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
#sidebar .menu-Box .sticky-menu > ul > li a .fa{
position:absolute;
right:-10px;
top:0px;
width:24px;
text-align:right;
color:#ffffff;
opacity:0;
font-size:12px;
display:block;
line-height:34px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
#sidebar .menu-Box .sticky-menu > ul > li.current a .fa,#sidebar .menu-Box .sticky-menu > ul > li:hover a .fa{
right:6px;
opacity:1;
}
#sidebar .menu-Box .sticky-menu > ul > li > a:hover,#sidebar .menu-Box .sticky-menu > ul > li.current > a,#sidebar .menu-Box .sticky-menu > ul > li.current-menu-item > a{
color:#cccccc;
}
#sidebar .copyright{
position:fixed;
left:0px;
bottom:5px;
width:250px;
height:30px;
font-size:13px;
color:#ffffff;
line-height:30px;
text-align:center;
}
#sidebar .copyright a{
color:#ffffff;
}
/*** <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.2.min.js" integrity="sha256-Ls0pXSlb7AYs7evhd+VLnWsZ/AqEHcXBeMZUycz/CcA=" crossorigin="anonymous"></script>
<title>Grest fitness| Homepage</title>
<!-- Stylesheets -->
<link href="style.css/css/bootstrap.css" rel="stylesheet">
<link href="style.css/css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]
<[if lt IE 9]><script src="js/respond.js"></script>
<body class="hidden-bar-wrapper">
<div class="page-wrapper">
<!-- Preloder -->
<div id="preloder" class="preloader">
<div class="loader"></div>
</div>
<!-- Εnd Preloader -->
<!-- Main Header-->
<header class="main-header header-style-one">
<!--Header-Upper-->
<div class="header-upper">
<div class="outer-container">
<div class="inner-container clearfix">
<!-- logo Box -->
<div class="logo-Box">
<div class="logo"><a href="index.html"><img src="https://via.placeholder.com/180x78" alt="" title=""></a></div>
</div>
<!-- logo -->
<div class="mobile-logo pull-left">
<a href="index.html" title=""><img src="https://via.placeholder.com/230x46" alt="" title=""></a>
</div>
<!-- Header Social Box -->
<div class="header-social-Box clearfix">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-linkedin"></a>
</div>
<div class="outer-Box clearfix">
<!-- Hidden Nav Toggler -->
<div class="nav-toggler">
<div class="nav-btn"><button class="hidden-bar-opener">Menu</button></div>
</div>
<!-- / Hidden Nav Toggler -->
</div>
<div class="nav-outer clearfix">
<!--Mobile Navigation Toggler-->
<div class="mobile-nav-toggler"><span class="icon"><img src="images/icons/burger.svg" alt="" /></span></div>
<!-- Main Menu -->
<nav class="main-menu navbar-expand-md">
<div class="navbar-header">
<!-- Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li><a href="index.html">Home</a></li>
<li class="dropdown"><a href="#">About Us</a>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="tiMetable.html">Time Table</a></li>
<li><a href="commingsoon.html">Comming Soon</a></li>
<li><a href="body-builder.html">Section Page 01</a></li>
<li><a href="body-builder-2.html">Section Page 02</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Trainers</a>
<ul>
<li><a href="trainer.html">Trainer 01</a></li>
<li><a href="trainer-2.html">Trainer 02</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Shop</a>
<ul>
<li><a href="shop-left.html">Shop Left Sidebar</a></li>
<li><a href="shop-right.html">Shop Right Sidebar</a></li>
<li><a href="shop-single.html">Product Single</a></li>
<li><a href="shopping-cart.html">Shopping Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Blog</a>
<ul>
<li><a href="blog.html">Our Blog</a></li>
<li><a href="blog-classic.html">Blog Classic</a></li>
<li><a href="blog-detail.html">Blog Detail One</a></li>
<li><a href="blog-detail-two.html">Blog Detail Two</a></li>
<li><a href="not-found.html">Not Found</a></li>
</ul>
</li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<!--End Header Upper-->解决方法
我认为您错过了CSS第一行中的评论。参见：
/***
====================================================================
Fonts
====================================================================
***/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url('font-awesome.css');
/***
====================================================================
Reset
====================================================================
***/
* {
margin:0px;
padding:0px;
border:none;
outline:none;
}
/***
====================================================================
Global Settings
====================================================================
***/
body {
font-family: 'Open Sans',sans-serif;
font-size:14px;
color:#353535;
line-height:1.6em;
font-weight:500;
background:#ffffff;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration:none;
cursor:pointer;
color:#000000;
}
a:hover,a:focus,a:visited{
text-decoration:none;
outline:none;
}
h1,h2,h3,h4,h5,h6 {
position:relative;
margin:0px;
background:none;
}
h1 {
font-size:24px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
p{
font-size:14px;
line-height:1.6em;
}
/***
====================================================================
Sidebar
====================================================================
****/
#sidebar{
position:fixed;
left:0px;
top:0px;
width:250px;
height:100%;
padding:0px 20px;
border-right:2px solid #cccccc;
z-index:10;
}
#sidebar .mCSB_inside > .mCSB_container{
margin-right:12px !important;
}
#sidebar .mCS_no_scrollbar .mCSB_container{
margin-right:0px !important;
}
#sidebar .menu-box{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
overflow:auto;
padding:0px 0px 30px;
background:rgba(0,0.80);
transition:all 1000ms ease;
-moz-transition:all 1000ms ease;
-webkit-transition:all 1000ms ease;
-ms-transition:all 1000ms ease;
-o-transition:all 1000ms ease;
}
#sidebar .menu-box .logo{
position:relative;
text-align:center;
margin-bottom:35px;
padding:30px 20px 10px;
}
#sidebar .menu-box .logo img{
position:relative;
display:inline-block;
max-width:100%;
}
#sidebar .menu-box .sticky-menu{
position:relative;
}
#sidebar .menu-box .sticky-menu > ul{
position:relative;
display:block;
margin:0px;
padding:0px;
border-top:1px solid rgba(255,255,0.20);
}
#sidebar .menu-box .sticky-menu > ul > li{
position:relative;
display:block;
padding:3px 0px;
border-bottom:1px solid rgba(255,0.20);
font-size:20px;
color:#ffffff;
text-align:right;
}
#sidebar .menu-box .sticky-menu > ul > li > a{
position:relative;
display:block;
padding:7px 30px 7px 0px;
color:#ffffff;
font-size:13px;
font-weight:600;
line-height:20px;
text-transform:uppercase;
transition:all 300ms ease;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li a .fa{
position:absolute;
right:-10px;
top:0px;
width:24px;
text-align:right;
color:#ffffff;
opacity:0;
font-size:12px;
display:block;
line-height:34px;
transition:all 500ms ease;
-moz-transition:all 500ms ease;
-webkit-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
}
#sidebar .menu-box .sticky-menu > ul > li.current a .fa,#sidebar .menu-box .sticky-menu > ul > li:hover a .fa{
right:6px;
opacity:1;
}
#sidebar .menu-box .sticky-menu > ul > li > a:hover,#sidebar .menu-box .sticky-menu > ul > li.current > a,#sidebar .menu-box .sticky-menu > ul > li.current-menu-item > a{
color:#cccccc;
}
#sidebar .copyright{
position:fixed;
left:0px;
bottom:5px;
width:250px;
height:30px;
font-size:13px;
color:#ffffff;
line-height:30px;
text-align:center;
}
#sidebar .copyright a{
color:#ffffff;
}
/*** <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.2.min.js" integrity="sha256-Ls0pXSlb7AYs7evhd+VLnWsZ/AqEHcXBeMZUycz/CcA=" crossorigin="anonymous"></script>
<title>Grest Fitness| Homepage</title>
<!-- Stylesheets -->
<link href="style.css/css/bootstrap.css" rel="stylesheet">
<link href="style.css/css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]
<[if lt IE 9]><script src="js/respond.js"></script>
<body class="hidden-bar-wrapper">
<div class="page-wrapper">
<!-- Preloder -->
<div id="preloder" class="preloader">
<div class="loader"></div>
</div>
<!-- Εnd Preloader -->
<!-- Main Header-->
<header class="main-header header-style-one">
<!--Header-Upper-->
<div class="header-upper">
<div class="outer-container">
<div class="inner-container clearfix">
<!-- Logo Box -->
<div class="logo-box">
<div class="logo"><a href="index.html"><img src="https://via.placeholder.com/180x78" alt="" title=""></a></div>
</div>
<!-- Logo -->
<div class="mobile-logo pull-left">
<a href="index.html" title=""><img src="https://via.placeholder.com/230x46" alt="" title=""></a>
</div>
<!-- Header Social Box -->
<div class="header-social-box clearfix">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-linkedin"></a>
</div>
<div class="outer-box clearfix">
<!-- Hidden Nav Toggler -->
<div class="nav-toggler">
<div class="nav-btn"><button class="hidden-bar-opener">Menu</button></div>
</div>
<!-- / Hidden Nav Toggler -->
</div>
<div class="nav-outer clearfix">
<!--Mobile Navigation Toggler-->
<div class="mobile-nav-toggler"><span class="icon"><img src="images/icons/burger.svg" alt="" /></span></div>
<!-- Main Menu -->
<nav class="main-menu navbar-expand-md">
<div class="navbar-header">
<!-- Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li><a href="index.html">Home</a></li>
<li class="dropdown"><a href="#">About Us</a>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="timetable.html">Time Table</a></li>
<li><a href="commingsoon.html">Comming Soon</a></li>
<li><a href="body-builder.html">Section Page 01</a></li>
<li><a href="body-builder-2.html">Section Page 02</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Trainers</a>
<ul>
<li><a href="trainer.html">Trainer 01</a></li>
<li><a href="trainer-2.html">Trainer 02</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Shop</a>
<ul>
<li><a href="shop-left.html">Shop Left Sidebar</a></li>
<li><a href="shop-right.html">Shop Right Sidebar</a></li>
<li><a href="shop-single.html">Product Single</a></li>
<li><a href="shopping-cart.html">Shopping Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Blog</a>
<ul>
<li><a href="blog.html">Our Blog</a></li>
<li><a href="blog-classic.html">Blog Classic</a></li>
<li><a href="blog-detail.html">Blog Detail One</a></li>
<li><a href="blog-detail-two.html">Blog Detail Two</a></li>
<li><a href="not-found.html">Not Found</a></li>
</ul>
</li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<!--End Header Upper-->
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
