一半的 CSS 未顯示
[英]Half of CSS Not Being Displayed
問題描述
我已經看完這段代碼了。 我根本找不到我犯錯的地方，但是只有一部分 CSS 正在處理我的頁面。 從字面上看，從圖像向下，但我找不到任何問題。 甚至梯度處理正確。 具有諷刺意味的是，例如，頁腳實際上是在這里處理的。 有任何想法嗎？
@charset "UTF-8"; .navbar-nav>.li>.a { font-family: 'Arial'; font-weight: bold; color: #000000; font-size: 2px; } .navbar-default { border-color: #000000; } .nav.navbar-nav a:hover { color: #206E38; } .dropdown-menu .dropdown .dropdown-toggle a { font-family: 'Arial'; font-weight: bold; font-size: 12px; letter-spacing: ; } .banner { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,206e38+100&1+0,0.52+43,1+100 */ background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(159,193,169,0.52) 43%, rgba(32,110,56,1) 100%); /* FF3.6-15 */ background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#206e38',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .ptobigtitle { font-family:'Anton', sans-serif; padding: 10px; } .ptosubtitle { font-family: 'Quicksand', sans-serif; font-variant: small-caps; padding-left: 50px; } .navbar-btn { float: right; } .btn-default { background-color: #206E38; color:#FFF; } .jumbotronimg { float: right; width: 250px; height: 321px; } .learnmorebtn { margin-left: 500px; } .articleheadline{ font-family: 'Anton', sans-serif; font-size: 20px; background: #A1C2AB; color: #000; letter-spacing: 2px; padding: 5px; max-width: 400px; margin: 0 auto; margin-left: auto; margin-right: auto; margin-top: 10px; border-style: solid; border-width: 1px; } .info{ bottom: 30px; text-align: center; } .rightinfo{ bottom: 67px; text-align: center; } .footer{ position: fixed; left: 0; bottom: 0; width: 100%; background-color: #CDCDCD; } .bottomfooter { color:#FFF; font-family: 'Arial'; font-size: 10px; } .mailsignup{ background: #CDCDCD; font-family: 'Arial'; font-size: 8px; } .footerheading{ font-family: 'Anton', sans-serif; font-size: 12px; font-weight: bold; text-align: center; letter-spacing: 1px; text-decoration: underline; }.form-inline{ background: #CDCDCD; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shongum Elemantary School - Parent Teacher Organization</title> <link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.min.css" /> <script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script> <script type="text/javascript" src="bootstrap/3/js/bootstrap.min.js"></script> <script type="text/javascript" src="ScriptLibrary/dmxBootstrap3Navigation.js"></script> <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap/3/css/dmxBootstrap3Forms.css" /> <script type="text/javascript" src="bootstrap/3/js/dmxBootstrap3Forms.js"></script> <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"> <script type="text/javascript"> function dmxBootstrap3ComponentsAction(type, target, action) { // v1.0 var evt = jQuery.event.fix(window.event || arguments.callee.caller.arguments[0]), args = Array.prototype.slice.call(arguments, 2); jQuery(target)[type](action); evt.preventDefault(); } </script> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body id="index" data-spy="scroll" data-target=".nav-container" is="dmx-app"> <nav class="navbar navbar-default navbar-fixed-top navbar-left" role="navigation"> <div class="nav-container container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs3-navbar-collapse"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <img src="images/ShongumSkyhawkBird_Green_Brand.png" alt="Shongum Elementary School" class="skyhawk_navimage" width="45" height="56"></div> <div class="collapse navbar-collapse" id="bs3-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Programs <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Classes <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Kindergarden</a></li> <li><a href="#">1st Grade</a></li> <li><a href="#">2nd Grade</a></li> <li><a href="#">3rd Grade</a></li> <li><a href="#">4th Grade</a></li> <li><a href="#">5th Grade</a></li> </ul> </li> <li><a href="#">Store</a></li> <li><a href="#">News/Calendar</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">RSD<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <button type="button" class="btn btn-default navbar-btn" onClick="dmxBootstrap3ComponentsAction('modal','#modal','show')">Membership Sign-Up</button> </div> </div> </nav> <div class="jumbotron banner"> <img src="images/ShongumSkyhawkBird_bg.png" alt="Shongum Elemtary School - Skyhawks" class="img-responsive jumbotronimg img-rounded" id="jumbotronimg"/> <h1 class="ptobigtitle">Shongum Elementary School</h1> <h2 class="ptosubtitle">Parent Teacher Organization </h2> <a class="btn btn-primarybtn-lg btn-default learnmorebtn" href="contentPages/about.php">Learn more »</a> </div> <div id="modal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Membership Sign-Up</h4> </div> <div class="modal-body"> <p>To become a member of the PTO, please fill out the below form.<br> Thanks so much for joining and making Shongum a success! </p> <form id="form" method="post" role="form"> <div class="form-group"> <label for="input" class="control-label">Input</label> <input type="text" class="form-control" name="input" id="input" placeholder="Text"> </div> <div class="form-group"> <label for="input2" class="control-label">Input 2</label> <input type="text" class="form-control" name="input1" id="input2" placeholder="Text"> </div> <div class="form-group"> <label for="input3" class="control-label">Input 3</label> <input type="text" class="form-control" name="input3" id="input3" placeholder="Text"> </div> <div class="form-group"> <label for="input4" class="control-label">Input 4</label> <input type="text" class="form-control" name="input4" id="input4" placeholder="Text"> </div> <div class="form-group"> <label for="input5" class="control-label">Input 5</label> <input type="text" class="form-control" name="input5" id="input5" placeholder="Text"> </div> <div class="form-group"> <label for="input6" class="control-label">Input 6</label> <input type="text" class="form-control" name="input6" id="input6" placeholder="Text"> </div> <div class="form-group"> <label for="input7" class="control-label">Input 7</label> <input type="text" class="form-control" name="input7" id="input7" placeholder="Text"> </div> <div class="form-group"> <label for="input8" class="control-label">Input 8</label> <input type="text" class="form-control" name="input8" id="input8" placeholder="Text"> </div> <div class="form-group"> <label for="input9" class="control-label">Input 9</label> <input type="text" class="form-control" name="input9" id="input9" placeholder="Text"> </div> <div class="form-group"> <label for="select" class="control-label">Select</label> <select class="form-control" name="select" id="select"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="form-group"> <label for="select2" class="control-label">Select 2</label> <select class="form-control" name="select" id="select2"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="form-group"> <label for="select3" class="control-label">Select 3</label> <select class="form-control" name="select" id="select3"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="form-group"> <label for="select4" class="control-label">Select 4</label> <select class="form-control" name="select" id="select4"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </form> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Submit Form</button> </div> </div> </div> <div class="col-lg-4 info"> <h2 class="articleheadline">This Heading will be controlled by db</h2> <p>This content will be controlled by dB.</p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> <div class="col-lg-4 info"> <h2 class="articleheadline">This Heading will be controlled by db</h2> <p>This content will be controlled by dB. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> <div class="col-lg-4 rightinfo"> <h2 class="articleheadline">This Heading will be controlled by db</h2> <p>This content will be controlled by dB. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> <footer class="footer"> <div class="container-fluid"> <div class="row"> <div class="col-lg-4"> <h2 class="footerheading">OFFICERS</h2> <p> </p> </div> <div class="col-lg-4"> <h2 class="footerheading">Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> </div> <div class="col-lg-4"> <!-- Begin MailChimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:12px 'Anton',sans-serif; width:500px;} /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id="mc_embed_signup"> <form action="https://ShongumPTO.us14.list-manage.com/subscribe/post?u=94f392b8b8898807cb75b5931&id=07d0e3a6fb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate> <div class="mailsignup" id="mc_embed_signup_scroll"> <label class="footerheading" for="mce-EMAIL">Subscribe to the PTO mailing list</label> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"> <input type="text" name="b_94f392b8b8898807cb75b5931_07d0e3a6fb" tabindex="-1" value=""> </div> <div class="clear"> <input type="submit" value="Subscribe" name="subscribe" class="button"> </div> </div> </form> </div> <!--End mc_embed_signup--> </div> <div class="col-lg-12"> <p class="bottomfooter">Shongum Elementary School - PTO™️</p> </div> </div> </footer> </body> </html>
1 個解決方案
解決方案1
1 已采納 2018-08-23 00:38:17
我相信問題只是你的 CSS 中有太多錯誤。 並不是樣式表的一部分沒有被應用，而是您的許多規則編寫不正確，以至於它們沒有按照您的意圖設置元素樣式。 例如，這個選擇器
.navbar-nav>.li>.a {
不選擇任何東西，因為它只會選擇類“a”的元素，這些元素是“li”類元素的直接后代，而“li”類元素又是“navbar-nav”類元素的直接后代，並且在你的 HTML。 你可能是說
.navbar-nav > li > a
它選擇<a>元素，這些元素是<li>元素的直接后代，而這些元素是類“navbar-nav”的元素的直接后代，盡管您可能還有其他意思（我們不知道您想要做什么）那種風格）。 您只需要檢查並修復 CSS 中的所有錯誤。 如果您遇到問題並且無法弄清楚為什么事情不起作用，您應該就您遇到的個別問題提出更具體、更具體的問題（查看SO 的指南和這篇博客文章，了解如何提出問題的提示）。
多張圖片（xml-> javascript-> CSS）被覆蓋，僅顯示1張圖片
[英]Multiple images (xml -> javascript -> CSS) being overwritten, only 1 image being displayed
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.