HTML和CSS文件未鏈接
[英]Html and Css files not linking
問題描述
我有以下CSS和HTML文件。
html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, th, td, article, aside, canvas, details, figcaption, figcaption, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { font-family: "HelveticaNeue", Arial, Helvetica, sans-serif } #tab-bar { background: #050405; border-bottom: 1px #441d22 solid; position: relative; } /* Clearfix to stop our floats escaping */ #tab:before, #tab-bar:after { content: "\\0020"; display: block; height: 0; overflow: hidden; } #tab-bar:active { clear: both; } /* Float our three list items so they're evenly spaced */ #tab-bar li { display: inline; float: left; width: 33.333%; } /* Set a elements as blocks */ #tab a { color: #cdcdcd; display: block; font-size: 0.875em; /* 12px / 14px */ font-weight: bold; height: 4.583em; /* 55px / 12px */ margin: 0 0.833em; /* 10px / 12px*/ overflow: hidden; padding-top: 1.428em; /* 6px / 14px */ position: relative; text-align: center; text-decoration: none; }
<!DOCTYPE html> <!--[if IEMobile 7]><html class="no-js iem7"><[endif]--> <!--[if (gt IEMobile 7)|!(IEMobile)]]><!-->html class="no-js">!--<![endif]--> <html> <head> <meta charset="utf-8" /> <title>StarTrackr</title> <link rel="stylesheet" href="screen.css" type="text/css" media="screen" /> </head> <body> <ul id="tab-bar" class="page-spots"> <li id="tab-spots"> <a href="#">Spots</a> </li> <li id="tab-sighting"> <a href="#">Add a sighting</a> </li> <li id="tab-stars"> <a href="#">Stars</a> </li> </ul><!--#tab-bar --> </body> </html>
當我運行此命令時，我得到的是三個沒有樣式（沒有背景色，邊距等）的列表項，而不是每個列表項都按照CSS樣式設置的無序列表。
問題是什么？
再次感謝您的幫助
4 個解決方案
解決方案1
0 2017-07-13 21:06:06
- 檢查screen.css是否與html文件位於同一文件夾中
- 清除瀏覽器緩存
解決方案2
0 2017-07-13 21:24:20
將浮動和寬度添加到標簽欄元素。
#tab-bar {
float: left;
width: 100%;
background: #050405;
border-bottom: 1px #441d22 solid;
position: relative;
}
另外，您缺少分號：
body {
font-family: "HelveticaNeue", Arial, Helvetica, sans-serif;
}
解決方案3
0 2017-07-13 21:52:23
添加您的代碼后，很抱歉，但我無法使其正常工作。 我認為您正在尋找類似的東西。 如果不是，請忽略此答案。 如果您需要進一步的幫助，請告訴我。
html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, th, td, article, aside, canvas, details, figcaption, figcaption, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { font-family: "HelveticaNeue", Arial, Helvetica, sans-serif; } .container { overflow: hidden; background-color: #050405; border-bottom: 2px #ccc solid; /*here you can see the border bottom, I added a red to visually see it*/ } .container a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; } .container a:hover, .dropdown:hover .dropbtn { background-color: #ccc; color: #333; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; }
<div class="container"> <a href="#home">Home</a> <a href="#sample">Sample</a> <div class="dropdown"> <button class="dropbtn">Spots</button> <div class="dropdown-content"> <a href="#">This is a long name even longer</a> <a href="#">Medium name</a> <a href="#">Short</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Add a Sighting</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Stars</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#sample">Sample 2</a> </div>
解決方案4
0 2017-07-13 23:19:03
感謝大家。 很棒的建議。 原來是處理tab a元素的部分。 它應該是標簽欄
以HTML鏈接CSS文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.