Question

下午好

我已经使用HTML和CSS几周了，最近遇到了一个我不知道如何解决的问题。在添加背景图像之前，联系人ID正常工作并且CSS正确加载。但是在页面类中添加图像后，CSS联系人ID不再起作用。同样，在元素检查器中，联系人ID的属性也不存在。因此，我不确定是否错过了HTML和CSS链接之间的内容，或者我是否以错误的顺序对其进行了编码。下面的代码是联系人ID停止工作之后的代码。

.pages {
    background-image: url("img/background.png");
}

#contact {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1px;
    background-color: #171717;
    text-align: right;          
}

.sidebar {
   font-family: 'Yanone Kaffeesatz', sans-serif;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   background-color: #212121;
   width: 100px;
   transition: all ease 0.5s;
}

ul {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  list-style: none;
  padding: 0;
  margin: 0;
}

li, a {
  text-decoration: none;    
  position: relative;
  display: block;
}

i.fa {
  display: block;
  text-align: center;
  padding: 30px 10px;
  font-size: 30px;
  background-color: #565656;
  color: #212121;
  z-index:1;
}

span {
  color: #fff;
  font-size: 18px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  display: block;
  height: 100%;
  padding: 0px 10px;
  text-align: center;
  z-index: -1;
  background-color: #000000;
  transition:all ease 0.5s;
  line-height: 90px;
  &::after {
    content:"";
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 45px solid transparent;
    border-left-color: #000;
    height: 0;
    width: 0;
  }
}

&:hover {
  i.fa {
    background-color: #000;
  }

  span {
    left: 100%;
  }
}

<!DOCTYPE html>
<html>
<head>
    <title>sidebar</title>
    <link rel="stylesheet" 
    href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
    integrity="sha384- 
    mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
    crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" 
    rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="sidebar">
        <ul>
            <li><a href="#"><i class="fa fa-graduation-cap"></i> 
            <span>Opleiding</span></a></li>
            <li><a href="#"><i class="fa fa-briefcase"></i> 
            <span>Werkervaring</span></a></li>
            <li><a href="#"><i class="fa fa-lightbulb"></i> 
            <span>Vaardigheden</span></a></li>
        </ul>
    </div>

    <div class="pages">

    </div>

    <div class="footer">
        <a href="#" id="contact">contact</a>

    </div>

</body>
</html>

感谢您的时间，希望你们的男女都可以帮助我。顺便说一句，英语不是我的母语，所以我希望我能清楚地解释它。

Answer 1

Dirk van Houten

我会考虑使用CSS网格，希望它会更有条理

如果您认为网格适合您，那么它确实可以避免使用位置和副作用。

示例：

/* grid instead position: */

body {
margin:0;
  display: grid;
  height: 100vh;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr 20px;
}
.sidebar {
  display: flex;
  align-items: center;
}
.footer {
  grid-row: 2;
  grid-column: 1 / span 3;
}
.pages {
  overflow: auto;
}

/* end grid system */


/* position and coordonates, so transform are removed from codes */
.pages {
  background-image: url("http://dummyimage.com/50x50");
}
#contact {
  padding: 1px;
  background-color: #171717;
  text-align: right;
}
.sidebar {
  font-family: "Yanone Kaffeesatz", sans-serif;
  background-color: #212121;
  width: 100px;
  transition: all ease 0.5s;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 100%;
  overflow: visible;
}
.sidebar a {
  position: relative;
}
li,
a {
  text-decoration: none;
  z-index: 1;
  display: block;
}
i.fa {
  display: block;
  text-align: center;
  padding: 30px 10px;
  font-size: 30px;
  background-color: #565656;
  color: #212121;
  z-index: 1;
}
a span {
  color: #fff;
  font-size: 18px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  margin: auto;
  display: block;
  height: 100%;
  padding: 0px 10px;
  text-align: center;
  z-index: -1;
  background-color: #000000;
  transition: all ease 0.5s;
  line-height: 90px;
}
a span::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 45px solid transparent;
  border-left-color: #000;
  height: 0;
  width: 0;
  overflow: hidden;
}
:hover i.fa {
  background-color: #000;
}
a:hover span {
  left: 100%;
}

<link rel="stylesheet" 
    href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
    integrity="sha384- 
    mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
    crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" 
    rel="stylesheet">

<div class="sidebar">
        <ul>
            <li><a href="#"><i class="fa fa-graduation-cap"></i> 
            <span>Opleiding</span></a></li>
            <li><a href="#"><i class="fa fa-briefcase"></i> 
            <span>Werkervaring</span></a></li>
            <li><a href="#"><i class="fa fa-lightbulb"></i> 
            <span>Vaardigheden</span></a></li>
        </ul>
    </div>

    <div class="pages">
<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}
</code></pre>
    </div>

    <div class="footer">
        <a href="#" id="contact">contact</a>

    </div>

添加背景图像后

1 个答案: