css - 稍微滚动后,粘性导航栏不再固定
问题描述
我正在使用 HTML、CSS 和 Bootstrap4。我需要一个导航栏,当我滚动时应该修复它。我做了一切,但经过一点滚动后,导航栏再次无法修复。我想知道是否有任何方法可以使用引导程序解决此问题,但如果您不能,请告诉我如何处理 Css。谢谢
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand"/>
<meta name="description" content="H&M clothing shop"/>
<meta name="author" content="Ali Bolouki"/>
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg"/>
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app"/>
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app"/>
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo"/>
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon"/>
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon"/>
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon"/>
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
</main>
<!--Bootstrap4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
请运行我的代码并向下滚动以查看我要说的内容。
解决方案
正文和 html 高度不应为 100%。看起来这是导致粘性导航仅停留在页面的一部分的问题。我添加了一个边框和一些额外的空间来演示您的粘性 div 如何根据正文中的滚动位置position: relative
交替变化:position: fixed
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
要解决这个问题,只需删除高度值:
body, html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
}
根据 w3schools,粘性定义为:
元素根据用户的滚动位置定位 粘性元素根据滚动位置在相对和固定之间切换。它是相对定位的,直到在视口中遇到给定的偏移位置 - 然后它“粘”在适当的位置(如位置:固定)。
注意:在 IE/Edge 15 或更早版本中不支持。从 6.1 版开始在带有 -webkit- 前缀的 Safari 中受支持。
带有边框和额外空间的完整代码片段来演示结果:
body,
html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
font-family: 'Playfair Display', serif !important;
color: white !important;
border: 2px solid red;
}
#main-logo {
width: 60px;
}
#two-logos-right {
width: 30px;
height: 30px;
}
#two-logos-left {
width: 40px;
}
#a-links {
text-decoration: none;
color: black;
}
/* On the main nav bar */
#little-logo-main-nav {
width: 30px;
}
/* center the little h&m icon */
#little-icon {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Two images that are half the page*/
#img-half {
width: 50%;
}
/* positioning */
#text-on-two-car-half-page {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
/* magazine */
#cards-magazine {
width: 400px;
}
#a-links-card-magazine {
position: absolute;
top: 98%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: red;
}
<!-- In the name GOD who gave me this power -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
<meta name="description" content="H&M clothing shop" />
<meta name="author" content="Ali Bolouki" />
<!--Title bar-->
<link rel="shortcut icon" href="images/title bar/Logo.svg" />
<title>H&M | Fashion Clothing Store and Online Shop</title>
<!--CSS3-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--Bootstrap4-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="container-fluid mb-2">
<div class="row">
<!-- Two icons in left side -->
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>Andriod</span>
<img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
</a>
<a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
<span>ios</span>
<img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
</a>
<!--Main icon | H&M-->
<img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
<!-- Two icons in right side -->
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Sign in</span>
<img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
</a>
<a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
<span>Bag</span>
<img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
</a>
</div>
</div>
<header class="sticky-top">
<!-- The main navbar menu -->
<div class="container-fluid">
<div class="row">
<nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a id="a-links" class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Man</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Woman</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">Baby</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#body">↑</a>
</li>
<li class="nav-item">
<a id="a-links" class="nav-link" href="#">↓</a>
</li>
<li class="nav-item d-none d-md-block" id="little-icon">
<img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
</li>
<!-- Dropdown menu -->
<li class="nav-item dropdown d-md-none d-block">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sign in</a>
<a class="dropdown-item" href="#">Youe Bag</a>
<a class="dropdown-item" href="#">ios App</a>
<a class="dropdown-item" href="#">Andriod App</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
</header>
<main id="main">
<!--Carousel slider-->
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
<div class="carousel-caption">
<h3>Beauty with H&M</h3>
<p>Be simple!</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
<div class="carousel-caption">
<h3>Be amazing with H&M</h3>
<p>Be rich</p>
</div>
</div>
<div class="carousel-item" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
<div class="carousel-caption">
<h3>New things</h3>
<p>We love to be new</p>
</div>
</div>
<div class="carousel-item active" data-interval="3000">
<img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
<div class="carousel-caption">
<h3>Everything is good</h3>
<p>Be happy</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Two images half the page-->
<div class="container-fluid">
<div class="row">
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">One store but</p>
</div>
</div>
<div id="img-half" class="card border-0">
<img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
<div class="card-img-overlay">
<p id="text-on-two-car-half-page" class="card-text">more than one store</p>
</div>
</div>
</div>
</div>
<!--Magazine-->
<div class="container-fluid">
<div class="row">
<h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">A meadow of wildflowers</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">The Colour Story Collection</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
<div class="card mx-auto" id="cards-magazine">
<img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
<div class="card-body">
<p class="card-title text-center">Inside H&M</p>
<h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
<a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
</div>
</div>
</div>
</div>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
</main>
<!--Bootstrap4-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
推荐阅读
- php - FPDF FPDI 如何从不同的 FPDF 类导入页面?
- sql - 我想在 oracle SQL 中查找所有经理姓名及其所有经理姓名
- java - 为什么每个请求都调用@InitBinder 方法?
- javascript - 在 Promise.prototype.then() 中传递参数
- google-maps - Google Maps API 和 duration_in_traffic
- java - 如何让用户决定按钮的特定颜色
- node.js - Firebase 功能 - 数据库缓存?
- python - 我需要 sqlite3 的提示
- django - Django REST API 作为后端,ReactJS 作为前端集成
- javascript - 在告诉 Node.js 继续执行代码之前,我将如何等待子进程完成?