部分CSS无法加载HTML的问题
[英]Issue with part of CSS not loading HTML
问题描述
****** UPDATE ********
谢谢您的帮助。 这非常令人沮丧。
为了尝试向您展示我遇到的问题，我刚刚创建了2个页面来显示发生的情况。
http://www.kolosse.org/stack/border
http://www.kolosse.org/stack/fail
边界部分是我要去的。 还不完整，只是一个开始。 奇怪的是，使用CSS。 但直接插入表格标记中。
失败是我所看到的。 下面的大多数代码（部分）来自组成“ fail”的文件。
希望这有助于说明问题所在，并且您可以看到我不是的生活。
******结束更新********
我正在一个网站上工作，但在某些部分中我的CSS无法加载时遇到了问题。 该网站的大多数都很棒。 我正在使用引导程序进行响应。 但是有一个地方给我带来麻烦。 我有大约10个不同的页面都可以工作，所有页面都从CSS提取，而这是从CSS提取的页面，仅此部分除外。 这是HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="The Krewe of Kolosse based in Dothan, AL" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Mardi gras, mardi, gras, dothan, alabama, parade, gra" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<title>******* | Member Directory</title>
</head>
<body id="directoryP">
<!-- header -->
<div class="header">
<div class="container">
<div class="logo">
<a href="index"><img src="../images/logo.png" class="img-responsive" alt="" /></a>
</div>
<div class="header-right">
<div class="header-top">
<ul>
<li><a href="{facebook group}"><i class="fb"> </i></a></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul class="cl-effect-15">
<li id="home"><a href="index" data-hover="HOME">HOME</a></li>
<li id="calendar"><a href="calendar" data-hover="CALENDAR">CALENDAR</a>
</li>
<li id="ball"><a href="ball" data-hover="BALL">BALL</a></li>
<li id="directory"><a href="directory" data-hover="MEMBER DIRECTORY">MEMBER DIRECTORY</a></li>
<li id="members"><a href="../index" data-hover="LOGOUT">LOGOUT</a></li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<div class="clearfix"> </div>
<!-- script-for-nav -->
<script>
$( "span.menu" ).click(function() {
$( ".head-nav ul" ).slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
</div>
</div>
<!-- header -->
<!-- content -->
<div class="content-top">
<div class="contact">
<div class="container">
<div class="contact-main">
<h3>MEMBER DIRECTORY</h3>
<div class="member-top">
<table class="member-top">
<tbody>
<tr>
<td class="member-top" width="75px"><h5>Member Number</h5></td>
<td class="member-top" width="110px"><h5>First Name</h5></td>
<td class="member-top" width="110px"><h5>Last Name</h5></td>
<td class="member-top" width="250px"><h5>Business</h5></td>
<td class="member-top" width="110px"><h5>Phone</h5></td>
<td class="member-top" width="220px"><h5>Email</h5></td>
<td class="member-top" width="75px"><h5>Year<br>Joined</h5></td>
<td class="member-top"><h5>Notes</h5></td>
<td class="member-top" width="75px"><h5>Status</h5></td>
</tr>
<tr class="member-data">
<td class="member-data">1</td>
<td class="member-data">******</td>
<td class="member-data">******</td>
<td class="member-data">******</td>
<td class="member-data">(***) ***-****</td>
<td class="member-data">****@*****.com</td>
<td class="member-data">****</td>
<td class="member-data">*******</td>
<td class="member-data">*****</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- content -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="soc">
<div class="social">
<ul>
<li><a href="{facebook group}"><i class="facbk"> </i></a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="foot-bottom">
<div class="col-md-4 flick">
<h4>SNAPSHOTS</h4>
<ul>
<li><img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img4.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img6.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img9.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img10.jpg" class="img-responsive" alt=""></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-4 flick1">
<h4>POPULAR POSTS</h4>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>Smile King!</p>
</div>
<div class="clearfix"></div>
</div>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>The Lovely Ladies!</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 flick">
<h4>EMAIL US</h4>
<div class="flick-form_grid">
<form method="post" action="{domain}/html_float_send">
<input type="text" name="name" maxlength="50" class="textbox" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" name="email" maxlength="80" class="textbox" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
<input type="text" name="phone" maxlength="80" class="textbox" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
<input type="text" name="comments" maxlength="1000" class="textbox" value="Comments" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">
<div class="smt">
<input type="submit" value="email">
</div>
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="foot-left">
<div class="foot-nav">
<ul>
<li><a href="{domain}/index" data-hover="HOME" title="Home Page">HOME</a></li>
<li><a href="{domain}/calendar" data-hover="CALENDAR" title="About Me">CALENDAR</a></li>
<li><a href="{domain}/index" data-hover="LEAVE" title="Members Only">LEAVE</a></li>
</ul>
</div>
</div>
<div class="foot-right">
<p>Copyrights © 2017 ******** All rights reserved | Website by ***** | <a href="{domain}/legal" title="Privacy Policy">Privacy Policy</a> | <a href="{domain}legal" title="Terms and Conditions">Terms & Conditions</a> </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- footer -->
</body></html>
该代码用于创建表。 显示来自mysql的数据。 问题是表格格式。 CSS格式没有结束。 我在CSS中创建了各种类（请参见下文），但是当我查看站点时，所有格式都不会生效。 在Chrome浏览器中，我使用了更多工具->开发人员工具，然后看那里有什么代码，该网站是从bootstrap css中提取的，而不是从css中提取的。
.member-top table {
color: #f0f0f0;
align: left;
border-spacing: .8em;
border-collapse: collapse;
padding: 10em;
width: 100%;
border: 1em;
}
.member-top tr {
text-align: center;
padding: 10em;
}
.member-top td {
text-align: center;
padding: 10em;
}
.member-data tr {
text-align: center;
padding: 10em;
}
.member-data td {
text-align: left;
padding: 10em;
}
我知道10em的值相当大。 但是在这一点上，我正在使用该大小的值来查看是否进行了任何更改。
上面是呈现页面的代码。 它不会创建我想要的边界或空间。
下面是有效的代码。
.member-top table { color: #f0f0f0; align: left; border-spacing: .8em; border-collapse: collapse; padding: 10em; width: 100%; border: 1em; } .member-top tr { text-align: center; padding: 10em; } .member-top td { text-align: center; padding: 10em; } .member-data tr { text-align: center; padding: 10em; } .member-data td { text-align: left; padding: 10em; }
<!DOCTYPE HTML> <html> <head> <meta name="description" content="The Krewe of Kolosse based in Dothan, AL" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Mardi gras, mardi, gras, dothan, alabama, parade, gra" /> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); } </script> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <title>******* | Member Directory</title> </head> <body id="directoryP"> <!-- header --> <div class="header"> <div class="container"> <div class="logo"> <a href="index"><img src="../images/logo.png" class="img-responsive" alt="" /></a> </div> <div class="header-right"> <div class="header-top"> <ul> <li><a href="{facebook group}"><i class="fb"> </i></a></li> <div class="clearfix"></div> </ul> </div> <div class="head-nav"> <span class="menu"> </span> <ul class="cl-effect-15"> <li id="home"><a href="index" data-hover="HOME">HOME</a></li> <li id="calendar"><a href="calendar" data-hover="CALENDAR">CALENDAR</a></li> <li id="ball"><a href="ball" data-hover="BALL">BALL</a></li> <li id="directory"><a href="directory" data-hover="MEMBER DIRECTORY">MEMBER DIRECTORY</a></li> <li id="members"><a href="../index" data-hover="LOGOUT">LOGOUT</a></li> <div class="clearfix"> </div> </ul> </div> </div> <div class="clearfix"> </div> <!-- script-for-nav --> <script> $("span.menu").click(function() { $(".head-nav ul").slideToggle(300, function() { // Animation complete. }); }); </script> <!-- script-for-nav --> </div> </div> <!-- header --> <!-- content --> <div class="content-top"> <div class="contact"> <div class="container"> <div class="contact-main"> <h3>MEMBER DIRECTORY</h3> <div class="member-top"> <table align="left" cellspacing="5" cellpadding="8" width="100%" border="2" bordercolor="#777777"> <tbody> <tr> <td width="75px"> <h5>Member Number</h5> </td> <td width="110px"> <h5>First Name</h5> </td> <td width="110px"> <h5>Last Name</h5> </td> <td width="250px"> <h5>Business</h5> </td> <td width="110px"> <h5>Phone</h5> </td> <td width="220px"> <h5>Email</h5> </td> <td width="75px"> <h5>Year<br>Joined</h5> </td> <td class="member-top"> <h5>Notes</h5> </td> <td width="75px"> <h5>Status</h5> </td> </tr> <tr> <td>1</td> <td>******</td> <td>******</td> <td>******</td> <td>(***) ***-****</td> <td>****@*****.com</td> <td>****</td> <td>*******</td> <td>*****</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!-- content --> <!-- footer --> <div class="footer"> <div class="container"> <div class="soc"> <div class="social"> <ul> <li><a href="{facebook group}"><i class="facbk"> </i></a></li> <div class="clearfix"></div> </ul> </div> </div> <div class="foot-bottom"> <div class="col-md-4 flick"> <h4>SNAPSHOTS</h4> <ul> <li><img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt=""></li> <li><img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt=""></li> <li><img src="./Directory-failed_files/img4.jpg" class="img-responsive" alt=""></li> <li><img src="./Directory-failed_files/img6.jpg" class="img-responsive" alt=""></li> <li><img src="./Directory-failed_files/img9.jpg" class="img-responsive" alt=""></li> <li><img src="./Directory-failed_files/img10.jpg" class="img-responsive" alt=""></li> <div class="clearfix"></div> </ul> </div> <div class="col-md-4 flick1"> <h4>POPULAR POSTS</h4> <div class="flick2"> <div class="flick-left"> <div class="portfolio-wrapper "> <img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt=""> <ul class="social-ic"> </ul> </div> </div> <div class="flick-right"> <p>Smile King!</p> </div> <div class="clearfix"></div> </div> <div class="flick2"> <div class="flick-left"> <div class="portfolio-wrapper "> <img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt=""> <ul class="social-ic"> </ul> </div> </div> <div class="flick-right"> <p>The Lovely Ladies!</p> </div> <div class="clearfix"></div> </div> </div> <div class="col-md-4 flick"> <h4>EMAIL US</h4> <div class="flick-form_grid"> <form method="post" action="{domain}/html_float_send"> <input type="text" name="name" maxlength="50" class="textbox" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}"> <input type="text" name="email" maxlength="80" class="textbox" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"> <input type="text" name="phone" maxlength="80" class="textbox" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}"> <input type="text" name="comments" maxlength="1000" class="textbox" value="Comments" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}"> <div class="smt"> <input type="submit" value="email"> </div> </form> </div> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="foot-left"> <div class="foot-nav"> <ul> <li><a href="{domain}/index" data-hover="HOME" title="Home Page">HOME</a></li> <li><a href="{domain}/calendar" data-hover="CALENDAR" title="About Me">CALENDAR</a></li> <li><a href="{domain}/index" data-hover="LEAVE" title="Members Only">LEAVE</a></li> </ul> </div> </div> <div class="foot-right"> <p>Copyrights © 2017 ******** All rights reserved | Website by ***** | <a href="{domain}/legal" title="Privacy Policy">Privacy Policy</a> | <a href="{domain}legal" title="Terms and Conditions">Terms & Conditions</a> </p> </div> <div class="clearfix"> </div> </div> </div> <!-- footer --> </body> </html>
当我对表设置进行硬编码时，它可以工作。
1 个解决方案
解决方案1
0 已采纳 2017-05-23 18:21:32
我的HTML代码的一部分正在内部加载 <title>出于某种原因
[英]Part of my HTML code is loading inside the <title> element for some reason
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.