[英]How to make header for my web page [HTML5 , CSS3]
I am trying to make a header for my website and I want it to look like this.我正在尝试为我的网站制作标题,我希望它看起来像这样。 The header I want to create
我要创建的标题
but I'm not sure what is the best way to make the logo look like that.但我不确定使徽标看起来像这样的最佳方法是什么。
I've tried this,这个我试过了
.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>
But I am still looking for the right way to do it.但我仍在寻找正确的方法来做到这一点。 and thanks
谢谢
If you want your answer in html and css Here如果您想在 html 和 css 中得到答案,请点击此处
I used flex
property on your .nav_links
class and just make another class name .time
for you 8:34 time and set it to position:absolute
and right:5%
.我在您的
.nav_links
类上使用了flex
属性,并在 8:34 时间为您创建另一个类名.time
并将其设置为position:absolute
和right:5%
。 Let me know if it works for you or not.让我知道它是否适合你。
.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>
This should get you started.这应该让你开始。 You will need to add the correct font and colors.
您需要添加正确的字体和颜色。
<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 https://codepen.io/NathanielD/pen/YzWqdvV
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.