0

我正在尝试为我的网站制作标题，我希望它看起来像这样。 我要创建的标题

但我不确定使徽标看起来像这样的最佳方法是什么。

这个我试过了

.logo {
  height: 130px;
  width: 130px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
}

#circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background-color: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  -webkit-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
  -moz-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
  box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
}

#rect {
  width: 120px;
  height: 65px;
  background-color: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
}
<header>

  <div id="circle"></div>
  <div id="rect"></div>
  <img src="img/MU-logo.png" alt="Madridismo" class="logo">

  <nav>
    <ul class="nav_links">
      <li><a href="index.html">Home</a></li>
      <li><a href="index.html">Games</a></li>
    </ul>
  </nav>

  <div id="clock"></div>

</header>

但我仍在寻找正确的方法来做到这一点。谢谢

4

2 回答 2

1

如果你想在 html 和 css 中回答这里

我flex在您的班级上使用了属性，.nav_links并在 8 点 34 分为您创建了另一个班级名称.time并将其设置为position:absoluteand right:5%。让我知道它是否适合您。 

.logo {
  height: 130px;
  width: 130px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
}
.nav_links {
    display: flex;
    list-style: none;
}
.time {
    position: absolute;
    right: 5%;
}
li {
    color: rgb(255, 177, 190);
    font-size: 15px;
} 
.nav_links a{
    text-decoration: none;
    color: rgb(255, 177, 190);
    font-size: 15px;
    padding: 15px;
}
#circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background-color: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  -webkit-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
  -moz-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
  box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
}

#rect {
  width: 120px;
  height: 65px;
  background-color: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
}
<header>

        <div id="circle"></div>
        <div id="rect"></div>
        <img src="img/MU-logo.png" alt="Madridismo" class="logo">
      
        <nav>
          <ul class="nav_links">
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">Games</a></li>
            <li class="time">8:34 AM</li>
          </ul>
        </nav>
      
        <div id="clock"></div>
      
      </header>

于 2020-10-17T16:54:17.970 回答
0

这应该让你开始。您将需要添加正确的字体和颜色。

<header>
  <nav>
    <ul class="nav_links">
      <li><a href="index.html">Home</a></li>
      <li><a href="index.html">Games</a></li>
    </ul>
  </nav>
 
  <div class="center-circle">
     <img src="img/MU-logo.png" alt="Madridismo" class="logo">
  </div>
  <div class="clock" id="clock"></div>

</header>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #999;
}

header {
  position: relative;
  display: flex;
  width: 100%;
  height: 4em;
  background: #fff;
  filter: drop-shadow(0px 5px 10px rgba(100, 100, 100, 0.49))
}

nav .nav_links {
  height: 4em;
  display: flex;
  justify-content: space-around;
  align-items: center;
/*   width: 15%; */
  list-style: none;
/*   margin-left: 1em; */
}

nav .nav_links li a{
  margin-left: 1em;
  text-decoration: none;
  font-size: 2rem;
  color: pink;
}

header .logo {
  height: 130px;
  width: 130px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -18px;
}

header .center-circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background-color: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
}

header .clock {
  height: 2em;
  text-transform: uppercase;
  font-size: 2rem;
  color: darkblue;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 1em;
}

// Automatic Clock
setInterval(getTime, 1000);

function getTime() {
  const date = new Date();
  const hours = date.getHours();
  // const seconds = date.getSeconds()
  const minutes = date.getMinutes();
  const ampm = hours >= 12 ? 'pm' : 'am';
  
  document.getElementById("clock").innerHTML = `${hours}:${minutes} ${ampm}`;
  // if you want seconds to show: add ${seconds}
}

https://codepen.io/NathanielD/pen/YzWqdvV

于 2020-10-17T15:15:21.540 回答