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.