个人中心
gpt4 book ai didi

html - 更改脚本后 Css 代码意外停止运行

转载 作者：行者123 更新时间：2023-11-28 02:31:10 25 4
gpt4 key购买 nike

我已附上我的代码副本。如果有人可以帮助我理解，请告诉我如何解决这个问题，我的文章没有格式化或无法正常工作。它们过去看起来像灰色/深灰色框，位于屏幕中间，格式很好。现在它甚至不会改变页面上任何内容的背景颜色。谢谢!- 卡尔

header
{
    text-align:center;
    text-shadow: 2px 2px 3px grey;
    color: white;
    padding: 20px 0px 0px 0px;
    border-bottom: DarkCyan;
    position: fixed;
    border-bottom: 2px solid white;
    top: -10;
    height: 150px;
    left: -10;
    width: 105%;
    z-index:5;
}
header a
{
    text-decoration: none;
    text-align:center;
    text-shadow: 2px 2px 5px grey;
    font-weight: bold;
    font-size: 40px;
    font-family: Tahoma, Geneva, sans-serif;
    line-height: 100%;
    color: white;
    word-spacing: 3px;
    letter-spacing: -1;
    font-variant: small-caps;

}
p.articleheader
{
    font-weight: bold;
    font-size: 35px;
    font-family: Tahoma, Geneva, sans-serif;
    line-height: 150%;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 3px grey;
    word-spacing: 3px;
    letter-spacing: -1;
    font-variant: small-caps;
}
article.art1class
{
    text-align:center;
    color: silver;
    padding: 0px 20px 0px 20px;
    background-color: darkslategray;
    border-bottom: 2px solid white;
    border-top: 2px solid white;
    height: 650px;
    position: relative;
    width: 75%;
    max-width: 850px;
    margin: 0 auto;
}
ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-weight: bold;
    font-size: 15px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    background-color: midnightblue;
    position: fixed;
    top: 162;
    lefT: -0;
    width:100%;
    z-index:5;

}
ul.menu li {
    float: left;
}
ul.menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-bottom: 2px solid white;
    -moz-transition: background-color .3s ease-in;
    -webkit-transition: background-color .3s ease-in;
    -o-transition: background-color .3s ease-in;
    transition: background-color .3s ease-in;
}

ul.menu li a:hover {
    background-color: purple;
    color: white;
    -moz-transition: background-color 0.01s;
    -webkit-transition: background-color 0.01s;
    -o-transition: background-color 0.01s;
    transition: background-color 0.01s;
}
<HTML>
<HEAD>
    <LINK rel="stylesheet" type="text/css" href="CSS/styles.css">
    <TITLE>Multicultural Festival - Home</TITLE>
</HEAD>
<BODY>
    <HEADER>
        <a name="top" href="#home"><H1>Multicultural Festival</H1></a>
    </HEADER>

    <ul class="menu">
        <li style="width:25%"><a href="Home.html">Home</a></li>
        <li style="width:25%"><a href="Events.html">Events</a></li>
        <li style="width:25%"><a href="Location.html">Location</a></li>
        <li style="width:25%"><a href="Contact.html">Contact</a></li>
    </ul>
    <br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br>
    <ARTICLE class="art1class">
        <p class="articleheader">#1 Samsung Galaxy S7 Edge</p>
        <hr>
        <p>
            Last year's Galaxy S6 Edge was a good phone,
            but not brilliant. It was the same as the Samsung Galaxy S6,
            but had a curved screen - and that was it. It was the same size, power and camera,
            and that wasn't enough.
            Fast forward to today and the S7 Edge takes all the great looks of the S6 Edge,
            makes the phone even curvier and combines it with the superb power and feature set of the S7.
            The camera is just brilliant, the mix of metal and glass is really nice to hold, and even the
            Touchwiz overlay is turning into something more usable than before.
            Battery life improvements are hugely welcomed, and while the price is higher,
            it's now affixed to a phone that offers simply the best in nearly every department,
            so many will be happy with the outlay.
        </p>
        <hr>
    </ARTICLE>
    <br>
    <br><br><br><br><br><br><hr><br><br><br><br><br><br>
    <br>
</BODY>
<FOOTER>
    <NAV>
        All Copyright reserved to Cale &copy; Creation Date: 08/06/2018<br>
        <a href="home.html">Home</a> | <a href="#home">Home</a> | <a href="brands.html">Brands</a> | <a href="contact.html">Contact</a>
    </NAV>
</FOOTER>
</HTML>

最佳答案

我刚刚在我的文本编辑器中运行了上面的代码，它运行良好。 CSS 完全按照您在描述中定义的方式工作。我认为问题出在您的 CSS 文件的链接上。再次检查地址并检查大写/小写错误

Image showing the Proper Style

我什至更改了背景颜色并且它起作用了。

代码:

<HTML>
    <HEAD>
        <LINK rel="stylesheet" type="text/css" href="style.css">
        <TITLE>Multicultural Festival - Home</TITLE>
    </HEAD>
    <BODY>
        <HEADER>
            <a name="top" href="#home"><H1>Multicultural Festival</H1></A>
        </HEADER>

        <ul class= "menu">
          <li style="width:25%"><a href="Home.html">Home</a></li>
          <li style="width:25%"><a href="Events.html">Events</a></li>
          <li style="width:25%"><a href="Location.html">Location</a></li>
          <li style="width:25%"><a href="Contact.html">Contact</a></li>
        </ul>
        <br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br>
        <ARTICLE class="art1class">
        <p class="articleheader">#1 Samsung Galaxy S7 Edge</p>
        <hr>
                <p>Last year's Galaxy S6 Edge was a good phone, 
                but not brilliant. It was the same as the Samsung Galaxy S6, 
                but had a curved screen - and that was it. It was the same size, power and camera,
                and that wasn't enough.
                Fast forward to today and the S7 Edge takes all the great looks of the S6 Edge,
                makes the phone even curvier and combines it with the superb power and feature set of the S7.
                The camera is just brilliant, the mix of metal and glass is really nice to hold, and even the
                Touchwiz overlay is turning into something more usable than before. 
                Battery life improvements are hugely welcomed, and while the price is higher, 
                it's now affixed to a phone that offers simply the best in nearly every department, 
                so many will be happy with the outlay.
</p>
        <hr>
        </ARTICLE>
        <br>
        <br><br><br><br><br><br><hr><br><br><br><br><br><br>
        <br>
            </BODY>
        <FOOTER>
            <NAV>
                All Copyright reserved to Cale &copy; Creation Date: 08/06/2018<br>
                <a href="home.html">Home</a> | <a href="#home">Home</a> | <a href="brands.html">Brands</a> | <a href="contact.html">Contact</a>
            </NAV>
        </FOOTER>
</HTML>

CSS:

header
{
    text-align:center;
    text-shadow: 2px 2px 3px grey;
    color: white;       
    padding: 20px 0px 0px 0px;
    border-bottom: DarkCyan;
    position: fixed;
    border-bottom: 2px solid white;
    top: -10;
    height: 150px;
    left: -10;
    width: 105%;
    z-index:5;
}       
header a
{
    text-decoration: none;
    text-align:center;
    text-shadow: 2px 2px 5px grey;
    font-weight: bold;
    font-size: 40px;
    font-family: Tahoma, Geneva, sans-serif;
    line-height: 100%;
    color: white;
    word-spacing: 3px;
    letter-spacing: -1;
    font-variant: small-caps;

}
p.articleheader
{
    font-weight: bold;
    font-size: 35px;
    font-family: Tahoma, Geneva, sans-serif;
    line-height: 150%;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 3px grey;
    word-spacing: 3px;
    letter-spacing: -1;
    font-variant: small-caps;
}
article.art1class
{
    text-align:center;
    color: silver;          
    padding: 0px 20px 0px 20px;
    background-color: darkslategray;
    border-bottom: 2px solid white;
    border-top: 2px solid white;
    height: 650px;
    position: relative;
    width: 75%;
    max-width: 850px;
    margin: 0 auto;
}
ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-weight: bold;
    font-size: 15px;
    font-family: "Comic Sans MS", cursive, sans-serif;
    background-color: midnightblue;
    position: fixed;
    top: 162;
    lefT: -0;
    width:100%;
    z-index:5;

}
ul.menu li {
    float: left;
}
ul.menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-bottom: 2px solid white;
    -moz-transition: background-color .3s ease-in;
    -webkit-transition: background-color .3s ease-in;
    -o-transition: background-color .3s ease-in;
    transition: background-color .3s ease-in;
}

ul.menu li a:hover {
    background-color: purple;
    color: white;
    -moz-transition: background-color 0.01s;
    -webkit-transition: background-color 0.01s;
    -o-transition: background-color 0.01s;
    transition: background-color 0.01s;
}

关于html - 更改脚本后 Css 代码意外停止运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50664745/

25 4 0
文章推荐： javascript - Uncaught TypeError : recognition. addEventListener is not a function?JS语音识别错误
文章推荐： c++ - 删除指针 vector 时调试断言失败 C++
文章推荐： c++ - 空结构元素的 OpenCV 腐 eclipse /膨胀错误输出？
文章推荐： html - HTML 格式的 CDN 引用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com