我如何保持我的 标头保持在我的[[标头? ] >> 我是网站设计的初学者,刚开始设计自己的网站时遇到了问题。我是一名平面设计师,设计了一个我想要网站外观的模型。我完成了大部分工作,除了我坚持的这一部分之外,将 标头保留在 标头之上。这两个标头都位于循环播放的视频背景的顶部。现在他们并肩。我还想在两个标题之间添加一条水平线-这是我设计的一部分。以下是我的HTML和CSS代码。 I also attached an image of my design vs what I have now。预先谢谢你。 [如果有人对我有任何提示,或者知道可以帮助我的最佳视频教程,我将非常感谢。谢谢! H1和H2在“视频部分”下的class =部分中。 CSS代码和HTML @font-face{ src: url(fonts/KeepCalm-Medium.ttf); font-family: keepcalm;} @font-face{ src: url(fonts/GOTHIC.TTF); font-family: centurygothic;} body { margin: 0px; padding: 0px;} /**Video Section**/ .section { position: relative; text-transform: uppercase; width: 100%; height: 534px; display: flex; align-items: center; justify-content: center; overflow: hidden;} .section h1 { text-align: center; justify-content: center; height: 108px; width:342px; font-family: keepcalm; font-size:36px; color: #ffffff; font-weight:500; line-height: 60px; transform: scale(1.189,1.189); letter-spacing: 15px; margin: 0px; padding: 0px; z-index: 1; } .section span { font-size: 48px;} hr { display: block; z-index: 1;} .section h2{ width: 181px; height: 22px; font-family: centurygothic; color: #ffffff; font-size:35px; font-weight: 400; letter-spacing: 9px; z-index:2; } .video-container { position: absolute; top: 0; left: 0; width: 100%;} /*Topbar Section*/ .topbar { margin: 0px; } .topbar { background-color: #e8e8e8; font-family: KeepCalm; font-size: 14px; align-items:flex-start; color: #000000; list-style: none; text-decoration: none; text-align: left; padding: 0px 0 0px 70px;} .topbar > li { display: inline-block; padding: 0 20px 0 20px;} .topbar > li > a { text-decoration: none; color: #000000;} .phone { width:20px; padding: 4px 0 0px 4px } .mail { height: 14px; } /**Logo Section**/ .logo{ float:left; padding-bottom: 10px; padding-left: 20px;} /**Logo Text**/ .logotext { font-size: 14px; position: absolute; left: 140px; font-family: KeepCalm; float:left; padding-bottom: 10px; } .logotext span { font-size: 14px; display: block; line-height: 14px; font-family: CenturyGothic; font-weight: 400; } .logotext span span { font-size: 14px; display: inline; line-height: 14px; font-family: CenturyGothic; font-weight: 400; background: #e8e8e8; } /*Navigation Responsive*/ .selector-for-some-widget { box-sizing: content-box;} .nav-item { background-color: #fff; font-family: KeepCalm; font-size: 14px; align-items:flex-start; color: #000000; list-style: none; text-align: right; padding: 20px 0 20px 0px;} .nav-item { display: inline-block; padding: 0 20px 0 20px;} .nav-item { text-decoration: none; color: #000000;} .navbar-light .navbar-nav .nav-item .nav-link:hover { color: #e8e8e8;} /*Topbar & Navigation Responsive*/ @media (max-width: 768px){ .logo{ width:5em; padding-bottom: 1px; padding-left: 0px; } .logotext { font-size: 0.7em; line-height: 9pt; padding-bottom: 1px; padding-right: 100px;} .logotext span { line-height: 9pt; font-size: 0.8em; } .logotext span span { background: #FFFFFF; font-size: 1em; } .video-container {display: none;} } @media (max-width: 580px){ .mail{width: 0px;} .hotmail{font-size: 0px;} .video-container {display: none;} } @media (max-width: 350px){ .topbar {font-size: 0px;} .phone{ width:0px;} .mail {display: 0px;} .logotext { font-size: 0px;} } <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="testtry.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>testtry</title> </head> <body> <!--Topbar--> <div class="topbar"> <ul class="topbar"> <img src="Images/phone.png" alt="Call me at" class="phone"> <li class="topbar topbartext">416-948-2164</li> <img src="mail1.png" alt="Email me at" class="mail"> <li class="hotmail"><a href="">[email protected]</a></li> </ul> </div> <!--Navbar Responsive--> <div class="Navcontainer"> <nav class="navbar navbar-expand-lg navbar-light"> <a href="#"><img src="Logo1.png" alt="Micaela Butron Logo" class="logo"></a> <h1 class="logotext"> I'm Micaela Butron. <span>an <span>Urban Designer</span>, + Graphic Designer.</span> </h1> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-lg-auto"> <li class="nav-item active"><a class="nav-link active" href="#">Home</a></li> <li class="nav-item active"><a class="nav-link active" href="#">Resume</a></li> <li class="nav-item active"><a class="nav-link active" href="#">Portfolio</a></li> <li class="nav-item active"><a class="nav-link active" href="#">Contact</a></li> </ul> </div> </nav> </div> <!--VideoSection--> <div class="section"> <h1>Micaela <span>Butron</span></h1> <h2>Designer</h2> <div class="video-container"> <video autoplay loop muted> <source src="Images/Videos/Video.mp4" type="video/mp4"> </video> </div> </div> <!--Bootstrap Javascript Link--> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> 我是网站设计的初学者,刚开始设计自己的网站时遇到了问题。我是一名平面设计师,设计了一个我想要网站外观的模型。除此以外,我已完成大部分工作...

问题描述 投票:0回答:2
我是网站设计的初学者,刚开始设计自己的网站时遇到了问题。我是一名平面设计师,设计了一个我想要网站外观的模型。我完成了大部分工作,除了我坚持的这一部分之外,将

标头保留在

标头之上。这两个标头都位于循环播放的视频背景的顶部。现在他们并肩。我还想在两个标题之间添加一条水平线-这是我设计的一部分。以下是我的HTML和CSS代码。 I also attached an image of my design vs what I have now。预先谢谢你。

html css header position alignment
2个回答
0
投票
将h1和h2的宽度设置为100%。这样,它们将在其高度填充整个包含元素。

0
投票
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="testtry.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>testtry</title> </head> <body> <!--Topbar--> <div class="topbar"> <ul class="topbar"> <img src="Images/phone.png" alt="Call me at" class="phone"> <li class="topbar topbartext">416-948-2164</li> <img src="mail1.png" alt="Email me at" class="mail"> <li class="hotmail"><a href="">[email protected]</a></li> </ul> </div> <!--Navbar Responsive--> <div class="Navcontainer"> <nav class="navbar navbar-expand-lg navbar-light"> <a href="#"><img src="Logo1.png" alt="Micaela Butron Logo" class="logo"></a> <h1 class="logotext"> I'm Micaela Butron. <span>an <span>Urban Designer</span>, + Graphic Designer.</span> </h1> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-lg-auto"> <li class="nav-item active"><a class="nav-link active" href="#">Home</a></li> <li class="nav-item active"><a class="nav-link active" href="#">Resume</a></li> <li class="nav-item active"><a class="nav-link active" href="#">Portfolio</a></li> <li class="nav-item active"><a class="nav-link active" href="#">Contact</a></li> </ul> </div> </nav> </div> <!--VideoSection--> <div class="section"> <div> <h1>Micaela <span>Butron</span></h1> </div> <hr> <span class="line"></span> <h2>Designer</h2> <div class="video-container"> <video autoplay loop muted> <source src="Images/Videos/Video.mp4" type="video/mp4"> </video> </div> </div> <!--Bootstrap Javascript Link--> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
© www.soinside.com 2019 - 2024. All rights reserved.