Question

我无法定位到目前为止我想要的地方是我的代码：

<header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="canvas.html">Canvas</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
        <div id="banner">
            <div id="overlay">
                <h1>ABOUT</H1>
            </div>
        </div>


</header>

并且继承了样式表

/*navigation bar*/

nav {
    text-align: center;
}

nav ul {  
        list-style-type: none;
        margin: 0;
        padding: 0;
}

nav ul li {
    display: inline-block; 
    text-align: center;
}   

nav a {
    line-height: 100px;
    letter-spacing: 2px;
    font-size: 11px;
    color: #000000;
    display: block;
    width: 100px;
    position: relative;
    text-decoration:none
}
a:hover { 
        border-bottom: 3px solid black;
    margin-bottom: -3px;
    color:#000000; 
}

/*header*/

#banner {
    width: 1900px;
    height: 500px;
    margin-top: -100px;
    background-color: #C0C0C0;
    background-image: url('aboutheader.jpg');
}
#about{
    position: relative;
    top : 250px;
    background-color: rgba(255,255,255,0.4);
    font-size: 60px;

}

这就是我希望它看起来像http://prntscr.com/5cvrxu

目前看来是http://prntscr.com/5cvs86

Answer 1

你有一个div id =＆＃34; overlay＆＃34;这根本没有风格。你有一个#about CSS，根本没有被使用。

这是你问题的根源 - 我改变了div =＆＃34; overlay＆＃34;到id =＆＃34;关于＆＃34;开头。

不能让html看起来像我想要的

1 个答案: