-2
私はこれをしばらく見てきましたが、私はそれを理解できません。クラスのハイライトは黄色のテキストをハイライト表示することになっており、コールにはまったく反応していないようです。残りのCSSファイルの書式設定は正しく動作しています。それはおそらく単純なものですが、私はこれ以上の頭を叩いています。ここに私のファイルです。クラス。ハイライトが動作しないCSS
index2.html
<!DOCTYPE html>
<html>
<head>
<title>Github Hub</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/site2.css" />
</head>
<body>
<div class="container">
<header>
<nav>
<ul>
<li><a href="/index.html">Home</a>
</li>
<li><a href="/contact.html">Contact</a>
</li>
<li><a href="/about.html">About</a>
</li>
</ul>
</nav>
<div>
<img src="img/logo.gif" class="bordered-image" />
</div>
<div>This is a site to search Github for interesting projects.</div>
</header>
<section id="main">
<p>
In this
<em>sample site</em>, we'll show a list of <a href="http://github.com">Github</a> projects
<span>and the data</span>about
<strong>those projects</strong>.</p>
<form action="http://wilder.azurewebsites.net/echo" method="POST" class="bordered-image simple-form">
<label for="searchPhrase">Search Phrase:</label>
<input type="text" name="searchPhrase" id="searchPhrase" />
<br/>
<input type="checkbox" name="useStars" id="useStars" checked="true" />
<label for="useStars">Use Stars?</label>
<br/>
<label for="langChoice">Language:</label>
<select name="langChoice" id="langChoice">
<option>All</option>
<option>JavaScript</option>
<option selected>C#</option>
<option>Java</option>
<option>Ruby</option>
</select>
<br/>
<input type="submit" value="search" />
</form>
<div id="results" class="bordered-image">
This is where results will live...eventually.
</div>
</section>
<section id="secondary">
<h3>Additional Resources</h3>
<p>Visit the <span class=”highlight”>Resources</span> section of our website for additional help. </p> <h3>Contact Information</h3> <p>Please contact the <span class=”highlight”>author</span> for additional resources at [email protected] </p>
</section>
<footer>
© 2014 Shawn Wildermuth LLC
</footer>
</div>
</body>
</html>
と私のCSSファイル
site2.css
/* site2.css */
header, footer {
background-color: lightgray;
border: solid 1px black;
/*font-family: 'Times New Roman', serif;*/
}
footer {
padding: 10px;
border-radius: 3px;
}
body {
font-family: Segoe UI, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: darkgreen;
}
a {
color: green;
}
html, body {
padding: 0;
margin: 0;
}
.bordered-image {
border: solid 1px #444;
border-radius: 2px;
}
#main {
border: solid 1px #ccc;
border-radius: 5px;
color: #202020;
margin: 20px 0;
padding: 5px;
}
#secondary {
border: solid 1px #ccc;
border-radius: 5px;
color: #ff0000;
}
h3 {
color: #0066ff;
letter-spacing: 7px;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
#results {
padding: 2px;
width: 600px;
display: inline-block;
vertical-align: top;
}
.simple-form {
padding: 2px;
width: 300px;
display: inline-block;
vertical-align: top;
/* position: absolute;
bottom: 5px;
right: 5px;
*/}
.simple-form label {
font-weight: bold;
}
.simple-form input[type=text],
.simple-form select,
.simple-form input[type=password],
.simple-form textarea {
width: 150px;
}
.simple-form input[type=submit] {
background-color: green;
color: white;
border-radius: 15px;
padding: 3px;
margin-top: 5px;
}
.container {
width: 989px;
margin: 0 auto;
background-color: white;
padding: 5px;
}
header nav {
float: right;
margin-right: 5px;
}
header nav li {
display: inline;
font-size: 12px;
}
「クラス=に" " 変更クラス=」ハイライトを二重引用符を使用してハイライトクラス – Bhavik
を包むあなたの二重引用符をチェック私はそれを見て何度も気付いたことはありませんか？ありがとうございました！ –