堆棧內存溢出
  簡體   English   中英

如何樣式 html5 ul 鏈接與 css？

[英]how to style html5 ul links with css?

 原文  2020-04-16 04:13:30  2   1    html/ 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...&#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>

1 個解決方案

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

將a顏色從藍色更改為紅色，這是您要問的嗎？

代碼也有幾個問題：

  1. <h4>的開始和結束標記不正確。
  2. 我看到table有不需要的代碼，我不確定您的代碼中是否使用了該代碼。
  3. 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 html5：css樣式： <ul><li> 與 <p> 用於鏈接列 HTML5：如何包含<p>和<ul>相同邊框樣式的標簽 HTML UL CSS邊框樣式 html ul style CSS for bullet 鏈接不起作用（HTML5 / CSS） 我該如何設定兩種不同的風格 <ul> HTML和CSS中的標簽？ UL導航鏈接無法正常工作-HTML / CSS 不確定如何從復制的HTML5，CSS，JS中指定樣式 如何使用純 CSS 將 HTML5 進度元素設置為圓形/餅圖 如何僅使用 HTML5 和 CSS 創建這種樣式的導航欄？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM