Question

我正在使用Microsoft Expression Web 4编写练习网站，但是我在浏览目标网页时遇到了很多困难。我在问题下方复制了所有代码。第一个问题是我对导航菜单中与导航栏重叠的链接有悬停效果，我希望文本在导航栏中垂直居中。我在css-tricks.com上尝试了几个how-tos，浏览器显示似乎没有响应我从那里尝试的编辑。 navbar issue and overflowing image我可以手动调整它，以便通过试验和错误计算出像素，但这似乎很笨拙且无响应。有没有更好的办法？

第二个问题是标题部分的图像不适合屏幕。它溢出在右侧。它之前没有这样做，但现在它是，我没有更改#header img {}部分中的任何代码，所以我不确定发生了什么。我在这方面几乎是初学者，所以感谢你的帮助。

HTML

<head>

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>   

<div id="header">

    <div class="nav">
        <div id="menu">
            <a href="#0">Home</a>
            <a href="#0">Travel</a>
            <a href="#0">Safari</a>
            <a href="#0">Live</a>
            <a href="#0">Search</a>
        </div>


    </div>  


    <img alt="drakensburg" src="images/drakensburg.jpg" />

    <h1>Visit Africa</h1>   


</div>

</head>

CSS

 #header {
    position:relative;
    width: 100vw;
    height: 600px;
    overflow:hidden;
    right: .5em;
    bottom: 1em;

}

#header .nav {
    display:inline-block;
    height:40px;
    width:100%;
    background-color:#a41d0e;
    overflow:visible;
    z-index: 10;
}

.nav #menu a{
    display: inline;
    float:left;
    position: relative;
    vertical-align:middle;
    padding: 1em 1em 1em 1em;
    text-decoration: none;
    color: white;
}

.nav #menu a:hover {
    background-color:#7f170b;
}

Answer 1

除了链接标记之外的任何内容都不应该在您提供的文本中的<head></head>之间！我认为这是一个错误。

#header {

        width: 100vw;
        height: 600px; 
        overflow:hidden; 
    }

从技术上讲，您的标题不需要任何样式。请参阅下面的img css。如果您希望标题为600px，并让图像填充，则应将图像设置为css中的背景图像

 background-image: url('path/to/img.jpg');

或者，您可以：

 /*style your image like so. It won't ever be wider than its immediate parent container*/
      img{

       max-width: 100%; 
       height auto;
      }

以下是你的其他css，评论。

  #header .nav {

      /* no need for any display property here as it is block by default and takes up 100% of the width you probably don't need it to be inline-block either if it'll take up 100% of the width */

        height:40px;
        background-color:#a41d0e;
/*z-index is only useful for positioned elements (relative, absolute or fixed) so either give position: something to your navbar or ditch the z-index !*/

    }

就链接而言，你不需要给它们一个顶部和底部填充，只需给它们一个等于容器高度的行高，即40px。这样，链接将垂直居中，与容器的高度相同，您仍然可以使用左右填充为它们选择宽度。

        .nav #menu a{
            /*don't need display: inline as it is negated by the float anyway.
position relative alone like this doesn't serve any purpose. vertical-align middle only works for display: inline-block or table/(s)*/
            float:left;
            line-height: 40px;
            padding: 0 1em 0 1em;
            text-decoration: none;
            color: white;
        }

非常有用的链接，您可以在CSS上找到很多非常有用的解释：http://tympanus.net/codrops/css_reference/

希望这有任何帮助！

Answer 2

使用CSS属性display: flex和align-items: center将一行中的项目居中。

＆＃13;

body {
  margin: 0;
}
nav {
  display: flex;
  background-color: #a41d0e;
}
nav a {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 1em;
  text-decoration: none;
  color: white;
}
nav a:hover {
  background-color: #7f170b;
}

＆＃13;

<html>
 <body>
  <header>
    
    <nav id="menu">
      <a href="#0">Home</a>
      <a href="#0">Travel</a>
      <a href="#0">Safari</a>
      <a href="#0">Live</a>
      <a href="#0">Search</a>
    </nav>

    <img alt="drakensburg" src="images/drakensburg.jpg" />
    
    <h1>Visit Africa</h1>
    
  </header>
 <body>
<html>

＆＃13;

Answer 3

您可以使用此代码

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        nav {
            display: flex;
            background-color: #a41d0e;
        }
        nav a {
            display: flex;
            align-items: center;
            padding: 15px 35px;
            text-decoration: none;
            color: white;
        }
        nav a:hover {
            background-color: #7f170b;
        }
        .outer {
            width: 100%;
            overflow: hidden;
        }
        .inner {
            display: inline-block;
            position: relative;
            right: 0;
            left: 0;
            width: 100%;
        }
        img {
            position: relative;
            left: 0;
            right: 0;
            width: 100%;
        }
        h1 {
            text-align: center;
            position: absolute;
            left: 0;
            top:0;
            right: 0
        }
    </style>
</head>
<body>
    <header>
        <nav id="menu">
            <a href="#0">Home</a>
            <a href="#0">Travel</a>
            <a href="#0">Safari</a>
            <a href="#0">Live</a>
            <a href="#0">Search</a>
        </nav> 
        <div class="outer">
            <div class="inner">
                <img src="https://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
                <h1>Visit Africa</h1> 
            </div>
        </div>      
    </header>
</body>
</html>

2个基本的CSS问题

3 个答案: