如何样式 html5 ul 链接与 css？

Question

trying to change default color of list items in ul.试图更改 ul 中列表项的默认颜色。 css style.ul_useful has greyed out a:link just before code block where i thought i had changed color to white, which is what i need. css style.ul_useful 在代码块之前的链接变灰了，我认为我已经将颜色更改为白色，这是我需要的。 tried using class in ul, and in list items in ul to no avail.尝试在 ul 中使用 class 并在 ul 中使用列表项无济于事。 any help appreciated.任何帮助表示赞赏。

first, here is stylesheet styles_p0.css:首先，这里是样式表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;
}

here is html:这是 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...&#128526;</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 &copy; 2020 Joe Mac Inc. All rights reserved.</p>
          </div>
        </footer>
    </section>
   </body>
</html>

Answer 1

Changed the a color from blue to red, is this what you're asking?将a颜色从蓝色更改为红色，这是您要问的吗？

There are couple of issues with code as well:代码也有几个问题：

The start and end tag of <h4> is incorrect. <h4>的开始和结束标记不正确。
I see there unwanted code for table I am not sure that is used in your code.我看到table有不需要的代码，我不确定您的代码中是否使用了该代码。
There is not class called .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. There is not class called .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.?:&#128526.</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 &copy; 2020 Joe Mac Inc. All rights reserved.</p> </div> </footer> </section> </body>

如何样式 html5 ul 链接与 css？

问题描述

1 个解决方案

解决方案1
0 2020-04-16 04:22:33

如何样式 html5 ul 链接与 css？

问题描述

1 个解决方案

解决方案1 0 2020-04-16 04:22:33

解决方案1
0 2020-04-16 04:22:33