[英]how to style html5 ul links with css?
试图更改 ul 中列表项的默认颜色。 css style.ul_useful 在代码块之前的链接变灰了,我认为我已经将颜色更改为白色,这是我需要的。 尝试在 ul 中使用 class 并在 ul 中使用列表项无济于事。 任何帮助表示赞赏。
首先,这里是样式表styles_p0.css:
body{
padding-top:5rem;
background:url(/Users/king/proj_0/images/nylon_string_original.JPG);
background-size: cover;
overflow: hidden;
font-family: Arial sans-serif;
color: #ffffff;
{box-sizing: border-box;}
}
div {
font-family: Palatino, serif;
padding: 3px;
text-align: center;
}
h3 {
margin-top: 2%;
margin-bottom: 0;
}
p {
margin-bottom: 0;
}
table {
margin: 1% auto 0 auto;
border: 2px solid #ffffff;
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
}
th {
background-color: lightgray;
}
ul {
list-style:none;
}
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
/* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
/* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
/* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
/* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
/* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
/* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
/* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
/* styles */
}
.header_p {
text-align:center;
font-family: Arial sans-serif;
text-shadow:5px 5px 10px #ffffff;
}
.join {
padding:2px;
margin-top: -20px;
text-align: center;
}
.p > div {
text-align: center;
}
.row > div {
padding: 2px;
}
.section_d {
padding: 2px;
font-family: Palatino, serif;
text-align:center;
}
.ul_useful {
/* unvisited link */
a:link {
color: white;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: white;
}
}
#footer_p {
padding-top:2px;
padding-left:4px;
padding-right: 2px;
margin-top: 2%;
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
#Joe { /* image of joe */
width:auto;
height:auto;
padding:0px;
margin-right:2%;
margin-top:2%;
margin-bottom:0;
border:2px solid #ffffff;
}
#why_play {
margin-top: 0;
}
这是 html:
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="images/favicon_nylon.ico" type="image/x-icon" />
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- My styles for project0 -->
<link rel="stylesheet" href="styles_p0.css">
<title>Finger Style Guitar Club</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a class="navbar-brand" href="index.html">Home</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="chart.html">Chart</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div>
<h1>Finger Style Guitar Club</h1>
<h2>Drop That Pick!</h2>
<p class="header_p">It's gonna happen anyway...😎</p>
</div>
<section>
<div class="container">
<div class="row">
<div class="col">
<h4 id="why_play">Connect with Joe</h3>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<img id="Joe" src="images/jam_smile_fgc175p.jpg" alt="Joe Mac">
</div>
<div class="col">
<h4>Useful Links:</h3>
<ul class="ul_useful">
<li class="ul_useful"><a href="https://www.jazzguitar.be/blog/walking-bass-lines/">Walking Bass Lines for Guitar</a></li>
<li class="ul_useful"><a href="https://www.fundamental-changes.com/walking-basslines-on-guitar/">Building Walking Bass Lines</a></li>
<li class="ul_useful"><a href="https://www.musicradar.com/tuition/guitars/acoustic-guitar-lessons-walking-basslines-489588">Acoustic Bass Lines</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p id="footer_p">Copyright © 2020 Joe Mac Inc. All rights reserved.</p>
</div>
</footer>
</section>
</body>
</html>
将a
颜色从蓝色更改为红色,这是您要问的吗?
代码也有几个问题:
<h4>
的开始和结束标记不正确。table
有不需要的代码,我不确定您的代码中是否使用了该代码。.ul_useful
in your HTML to render the color, you just defined only in CSS but not used in HTML, you may have to look into that. body { padding-top: 5rem; background: url(/Users/king/proj_0/images/nylon_string_original.JPG); background-size: cover; overflow: hidden; font-family: Arial sans-serif; overflow:auto; color: #ffffff; { box-sizing: border-box; } } div { font-family: Palatino, serif; padding: 3px; text-align: center; } h3 { margin-top: 2%; margin-bottom: 0; } p { margin-bottom: 0; } table { margin: 1% auto 0 auto; border: 2px solid #ffffff; border-collapse: collapse; width: 50%; } th, td { border: 1px solid #ffffff; padding: 5px; text-align: center; } th { background-color: lightgray; } ul { list-style: none; } li a { color: red; /*changed from blue to red*/ } /* Smartphones (portrait and landscape) ---------- */ @media screen and (min-width: 320px) and (max-width: 480px) { /* styles */ } /* Smartphones (portrait) ---------- */ @media screen and (max-width: 320px) { /* styles */ } /* Smartphones (landscape) ---------- */ @media screen and (min-width: 321px) { /* styles */ } /* Tablets, iPads (portrait and landscape) ---------- */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* styles */ } /* Tablets, iPads (portrait) ---------- */ @media screen and (min-width: 768px) { /* styles */ } /* Tablets, iPads (landscape) ---------- */ @media screen and (min-width: 1024px) { /* styles */ } /* Desktops and laptops ---------- */ @media screen and (min-width: 1224px) { /* styles */ } /* Large screens ---------- */ @media screen and (min-width: 1824px) { /* styles */ }.header_p { text-align: center; font-family: Arial sans-serif; text-shadow: 5px 5px 10px #ffffff; }.join { padding: 2px; margin-top: -20px; text-align: center; }.p>div { text-align: center; }.row>div { padding: 2px; }.section_d { padding: 2px; font-family: Palatino, serif; text-align: center; }.ul_useful { /* unvisited link */ a:link { color: white; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: white; } } #footer_p { padding-top: 2px; padding-left: 4px; padding-right: 2px; margin-top: 2%; text-align: center; text-shadow: 5px 5px 10px #ffffff; color: #FFFF00; } #Joe { /* image of joe */ width: auto; height: auto; padding: 0px; margin-right: 2%; margin-top: 2%; margin-bottom: 0; border: 2px solid #ffffff; } #why_play { margin-top: 0; }
<head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="shortcut icon" href="images/favicon_nylon.ico" type="image/x-icon" /> <.-- Bootstrap core CSS --> <link href="../../dist/css/bootstrap:min.css" rel="stylesheet"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <.-- My styles for project0 --> <link rel="stylesheet" href="styles_p0.css"> <title>Finger Style Guitar Club</title> </head> <body> <nav class="navbar navbar-expand-lg fixed-top navbar-dark"> <a class="navbar-brand" href="index.html">Home</a> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar1"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item active"> <a class="nav-link" href="chart.html">Chart</a> </li> <li class="nav-item active"> <a class="nav-link" href="contact;html">Contact</a> </li> </ul> </div> </div> </nav> <div> <h1>Finger Style Guitar Club</h1> <h2>Drop That Pick:</h2> <p class="header_p">It's gonna happen anyway.?:😎.</p> </div> <section> <div class="container"> <div class="row"> <div class="col"> <h4 id="why_play">Connect with Joe</h4> <a href="https.//twitter.com/share.ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a> <script async src="https://platform:twitter.com/widgets.js" charset="utf-8"></script> <img id="Joe" src="images/jam_smile_fgc175p:jpg" alt="Joe Mac"> </div> <div class="col"> <h4>Useful Links.</h4> <ul class="ul_useful"> <li class="ul_useful"><a href="https.//www:jazzguitar.be/blog/walking-bass-lines/">Walking Bass Lines for Guitar</a></li> <li class="ul_useful"><a href="https.//www;fundamental-changes.com/walking-basslines-on-guitar/">Building Walking Bass Lines</a></li> <li class="ul_useful"><a href="https.//www.musicradar.com/tuition/guitars/acoustic-guitar-lessons-walking-basslines-489588">Acoustic Bass Lines</a></li> </ul> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <p id="footer_p">Copyright © 2020 Joe Mac Inc. All rights reserved.</p> </div> </footer> </section> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.