Javascript 如何为我的网页制作标题[HTML5，CSS3]

我试图使我的网站标题，我希望它看起来像这样。

但我不确定什么是最好的方式，使标志看起来像那样

我试过这个

.logo{
高度：130像素；
宽度：130px；
光标：指针；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
顶部：-18px；
}
#圈{
边界半径：50%；
宽度：80px；
高度：80px；
背景色：白色；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
顶部：-1px；
-webkit盒阴影：0px 3px 15px rgba（100100100,0.49）；
-moz盒阴影：0px 3px 15px rgba（100100100,0.49）；
盒影：0px 3px 15px rgba（1001001000.49）；
}
#直肠{
宽度：120px；
高度：65px；
背景色：白色；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
顶部：-1px；
}

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

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

---

如果你想用html和css来回答问题 这里

我在你的

.nav_links

类上使用了

flex

属性，只需为你创建另一个类名

.time

8:34时间，并将其设置为

位置：绝对

和

右侧：5%

。让我知道它是否适合你。

.logo{
高度：130像素；
宽度：130px；
光标：指针；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
顶部：-18px；
}
.导航链接{
显示器：flex；
列表样式：无；
}
.时间{
位置：绝对位置；
右：5%；
}
李{
颜色：rgb（255177190）；
字体大小：15px；
} 
.导航链接a{
文字装饰：无；
颜色：rgb（255177190）；
字体大小：15px；
填充：15px；
}
#圈{
边界半径：50%；
宽度：80px；
高度：80px；
背景色：白色；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
顶部：-1px；
-webkit盒阴影：0px 3px 15px rgba（100100100,0.49）；
-moz盒阴影：0px 3px 15px rgba（100100100,0.49）；
盒影：0px 3px 15px rgba（1001001000.49）；
}
#直肠{
宽度：120px；
高度：65px；
背景色：白色；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
顶部：-1px；
}

上午8:34

我觉得还可以。到底是什么问题？我在徽标后面用了一个圆圈，在它上面用了一个矩形来隐藏它的阴影，我想知道是否有更好的方法来实现相同的外观。log0比菜单栏大。它使用边界半径将底部圆化为半圆，并且可能与z索引一起使用，以实际显示在菜单栏上方（按层）。

* {
  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}
}