Fatal编程技术网
  • html/
  • Html 2个基本CSS问题

Html 2个基本CSS问题

html css

Html 2个基本CSS问题,html,css,Html,Css,我正在使用MicrosoftExpressionWeb4编写一个实践站点，但是我很难通过登录页。我已将所有代码复制到问题下方。第一个问题是，导航菜单中与导航栏重叠的链接具有悬停效果，我希望文本垂直居中于导航栏内。我在css-tricks.com上尝试了几个how-to，但浏览器显示似乎对我在那里尝试的编辑没有响应。我可以手动调整它，通过尝试和错误计算像素来确定是否合适，但这看起来笨重且无响应。有更好的办法吗 第二个问题是标题部分的图像与屏幕不匹配。它从右边溢出。它以前没有这样做，但现在是这样，而

我正在使用MicrosoftExpressionWeb4编写一个实践站点，但是我很难通过登录页。我已将所有代码复制到问题下方。第一个问题是，导航菜单中与导航栏重叠的链接具有悬停效果，我希望文本垂直居中于导航栏内。我在css-tricks.com上尝试了几个how-to，但浏览器显示似乎对我在那里尝试的编辑没有响应。我可以手动调整它，通过尝试和错误计算像素来确定是否合适，但这看起来笨重且无响应。有更好的办法吗

第二个问题是标题部分的图像与屏幕不匹配。它从右边溢出。它以前没有这样做，但现在是这样，而且我没有更改#header img{}部分中的任何代码，所以我不确定发生了什么。我基本上是个初学者，所以谢谢你的帮助

HTML

在您给出的示例中，除了link标记外，其他任何内容都不应位于
之间！我想那是个错误

#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的非常有用的解释：

希望这些都有帮助

在您给出的示例中，除了link标记之外，其他内容都不应在
之间！我想那是个错误

#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的非常有用的解释：

希望这些都有帮助

使用CSS属性
display:flex
和
align items:center
将行中的项目垂直居中

正文{
保证金：0；
}
导航{
显示器：flex；
背景色：#a41d0e；
}
导航a{
显示器：flex；
对齐项目：居中；
高度：40px；
填充：1em；
文字装饰：无；
颜色：白色；
}
导航a：悬停{
背景色：#7f170b；
}

访问非洲
使用CSS属性
display:flex
和
align items:center
将一行中的项目垂直居中

正文{
保证金：0；
}
导航{
显示器：flex；
背景色：#a41d0e；
}
导航a{
显示器：flex；
对齐项目：居中；
高度：40px；
填充：1em；
文字装饰：无；
颜色：白色；
}
导航a：悬停{
背景色：#7f170b；
}

访问非洲
您可以使用此代码

<!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>


页面标题
身体{
保证金：0；
}
导航{
显示器：flex；
背景色：#a41d0e；
}
导航a{
显示器：flex；
对齐项目：居中；
填充：15px 35px；
文字装饰：无；
颜色：白色；
}
导航a：悬停{
背景色：#7f170b；
}
.外部{
宽度：100%；
溢出：隐藏；
}
.内部{
显示：内联块；
位置：相对位置；
右：0；
左：0；
宽度：100%；
}
img{
位置：相对位置；
左：0；
右：0；
宽度：100%；
}
h1{
文本对齐：居中；
位置：绝对位置；
左：0；
排名：0；
右：0
}
访问非洲
您可以使用此代码

<!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>


页面标题
身体{
保证金：0；
}
导航{
显示器：flex；
背景色：#a41d0e；
}
导航a{
显示器：flex；
对齐项目：居中；
填充：15px 35px；
文字装饰：无；
颜色：白色；
}
导航a：悬停{
背景色：#7f170b；
}
.外部{
宽度：100%；
溢出：隐藏；
}
.内部{
显示：内联块；
位置：相对位置；
右：0；
左：0；
宽度：100%；
}
img{
位置：相对位置；
左：0；
右：0；
宽度：100%；
}
h1{
文本对齐：居中；
位置：绝对位置；
左：0；
排名：0；
右：0
}