Question

对于我的示例，我是从新的Marvel App网站复制样式和结构。我想要完成他们拥有元素的方式＆＃39; house＆＃39;他们的标志和他们的导航。从你的来源和我的来源可以看出，这种方法似乎有很多元素在起作用。我想知道两件事：

1。）导致我复制的代码无法模仿Marvel的方式的原因是什么？我做错了什么？

2.。）这可以用更少，更易于管理的代码来简化吗？

出于练习目的，我复制的代码如下所示，以及指向代码集的链接。

HTML

<div class="header-bar-wrapper headroom headroom--top" id="header">

  <div class="height-100 pageWrap">
    <nav class="navHeight">
      <a href="#" class="float-left height-100">
        <div class="display-table height-100">
          <div class="display-tableCell verticalAlign-middle">
            <svg version="1.1" id="Layer_1" class="display-block" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#00E06A;}
</style>
<rect class="st0" width="100" height="100"/>
</svg>

          </div>
        </div>
      </a>
      <div class="navigation-links"> 
        <div class="display-table height-100">
          <div class="display-tableCell verticalAlign-middle">
            <div class="breakPointM-inline breakPoint-textAlign-right">
              <div class="navigation-link-wrapper wrapper-one breakPointM-marginRight-m breakPointL-paddingRight-s">
                <a href="#" class="link navigation-link link link--light">Features</a>
              </div>
               <div class="navigation-link-wrapper wrapper-one breakPointM-marginRight-m breakPointL-paddingRight-s">
                <a href="#" class="link navigation-link link link--light">Pricing</a>
              </div
                  <div class="navigation-link-wrapper wrapper-one breakPointM-marginRight-m breakPointL-paddingRight-s">
                <a href="#" class="link navigation-link link link--light">Blog</a>
              </div
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

CSS

.header-bar-wrapper {
  min-height: 70px;
  z-index: 200;
  top: 0;
  left: 0;
  height: 10%;
  width: 100%;
  display: block;
  background-color: black;
}

.pageWrap:after, .breakPointM-inline:after {
  content: "";
  display: table;
  width: 100%;
  clear: both;
}

.pageWrap:before, .breakPointM-inline:before {
  content: "";
  display: table;
  width: 100%;
}

.pageWrap {
  margin-left: auto;
  margin-right: auto;
}

.navHeight {
  height: 100%;
}

.float-left {
  float: left;
}

.height-100 {
  height: 100%;
}

.width-90, .pageWrap {
  width: 90%;
}

.display-block {
  display: block;
}

.display-table {
  display: table;
  width: 100%;
}

.display-tableCell {
  display: table-cell;
}

.verticalAlign-middle {
  vertical-align: middle;
}

.navigation-links {
  z-index: 300;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  float: right;
  position: relative;
}

.breakPointM-inline {
  font-size: 16px;
}

.navigation-link-wrapper {
  transform: translateY(0);
  margin-bottom: 0;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  position: relative;
}

.breakPointM-marginRight-m {
  margin-right: 20px;
}

CodePen

Answer 1

大部分时间直接从其他网站复制和粘贴代码是一个可怕的想法，主要是出于以下几个原因：

1。您没有获得必要的技能来解决复制和粘贴无法解决的问题。

2.您无法深入了解代码的准确程度，也无法正确地看到他们使用哪个框架来构建给定的网站。

3。关于你的问题1，如果你必须复制整个源代码而你想知道什么是不对的......你所做的一切都是错的。

4。在我看来，它可以做得更容易管理的代码，因为“表”可怕的过时。

我希望我的回答在某种程度上有所帮助。

Answer 2

我用这个玩过一点，只支持HTML5和CSS3。不要忘记粘贴到codepen或jsfiddle，在实际浏览器上本地测试它。

我为您的徽标图片着色了绿色区域您会注意到我在CSS中所做的事情只是使用CSS转换简单地将锚标记置于列表项元素内：translate。并将列表项浮动到nav元素的右侧。让我知道你的想法。

HTML

<head>
<title> Alternative </title>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>

<body>

<header>

<div id="logo"></div>
<nav>
<ul>
<li> <a href="#">Home</a>    </li>
<li> <a href="#">About</a>   </li>
<li> <a href="#">Contact</a> </li>
</ul>

</nav>
</header>

</body>

CSS

* {
    margin:0;
    padding:0;
}

html, body {

    width:100%;
    height:100%;
}

header {

    height:15%;
    position:relative;
}
#logo {

    background-color:green;
    width:20%;
    height:100%;
    float:left;
}

nav {
    width:80%;
    height:100%;
    float:left;

}

li {
    width:20%;
    float:right;
    height:100%;
    position:relative;
    list-style-type:none;

}

a {
    text-decoration:none;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

如何垂直对齐父元素

2 个答案:

HTML

CSS