这段代码实现了一个具有现代设计风格的网页，包含响应式导航栏、图片轮播功能和交互式菜单。它结合了HTML、CSS和JavaScript技术，提供了良好的用户体验。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Barlow:400,500,700");
.container {
margin: auto;
padding: 0 1rem;
max-width: 71.25rem;
width: 100%;
}
.grid {
display: flex;
flex-direction: column;
flex-flow: row wrap;
}
.grid>[class*=column-] {
display: block;
}
.first {
order: -1;
}
.last {
order: 12;
}
.align-top {
align-items: start;
}
.align-center {
align-items: center;
}
.align-bottom {
align-items: end;
}
.column-xs-1 {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.column-xs-2 {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.column-xs-3 {
flex-basis: 25%;
max-width: 25%;
}
.column-xs-4 {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.column-xs-5 {
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.column-xs-6 {
flex-basis: 50%;
max-width: 50%;
}
.column-xs-7 {
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.column-xs-8 {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.column-xs-9 {
flex-basis: 75%;
max-width: 75%;
}
.column-xs-10 {
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.column-xs-11 {
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.column-xs-12 {
flex-basis: 100%;
max-width: 100%;
}
@media (min-width: 48rem) {
.column-sm-1 {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.column-sm-2 {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.column-sm-3 {
flex-basis: 25%;
max-width: 25%;
}
.column-sm-4 {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.column-sm-5 {
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.column-sm-6 {
flex-basis: 50%;
max-width: 50%;
}
.column-sm-7 {
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.column-sm-8 {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.column-sm-9 {
flex-basis: 75%;
max-width: 75%;
}
.column-sm-10 {
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.column-sm-11 {
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.column-sm-12 {
flex-basis: 100%;
max-width: 100%;
}
}
@media (min-width: 62rem) {
.column-md-1 {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.column-md-2 {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.column-md-3 {
flex-basis: 25%;
max-width: 25%;
}
.column-md-4 {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.column-md-5 {
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.column-md-6 {
flex-basis: 50%;
max-width: 50%;
}
.column-md-7 {
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.column-md-8 {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.column-md-9 {
flex-basis: 75%;
max-width: 75%;
}
.column-md-10 {
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.column-md-11 {
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.column-md-12 {
flex-basis: 100%;
max-width: 100%;
}
}
@media (min-width: 75rem) {
.column-lg-1 {
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.column-lg-2 {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.column-lg-3 {
flex-basis: 25%;
max-width: 25%;
}
.column-lg-4 {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.column-lg-5 {
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.column-lg-6 {
flex-basis: 50%;
max-width: 50%;
}
.column-lg-7 {
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.column-lg-8 {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.column-lg-9 {
flex-basis: 75%;
max-width: 75%;
}
.column-lg-10 {
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.column-lg-11 {
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.column-lg-12 {
flex-basis: 100%;
max-width: 100%;
}
}
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
}
.grid>[class*=column-] {
margin: 0;
max-width: 100%;
}
.column-xs-1 {
grid-column-start: span 1;
grid-column-end: span 1;
}
.column-xs-2 {
grid-column-start: span 2;
grid-column-end: span 2;
}
.column-xs-3 {
grid-column-start: span 3;
grid-column-end: span 3;
}
.column-xs-4 {
grid-column-start: span 4;
grid-column-end: span 4;
}
.column-xs-5 {
grid-column-start: span 5;
grid-column-end: span 5;
}
.column-xs-6 {
grid-column-start: span 6;
grid-column-end: span 6;
}
.column-xs-7 {
grid-column-start: span 7;
grid-column-end: span 7;
}
.column-xs-8 {
grid-column-start: span 8;
grid-column-end: span 8;
}
.column-xs-9 {
grid-column-start: span 9;
grid-column-end: span 9;
}
.column-xs-10 {
grid-column-start: span 10;
grid-column-end: span 10;
}
.column-xs-11 {
grid-column-start: span 11;
grid-column-end: span 11;
}
.column-xs-12 {
grid-column-start: span 12;
grid-column-end: span 12;
}
@media (min-width: 48rem) {
.column-sm-1 {
grid-column-start: span 1;
grid-column-end: span 1;
}
.column-sm-2 {
grid-column-start: span 2;
grid-column-end: span 2;
}
.column-sm-3 {
grid-column-start: span 3;
grid-column-end: span 3;
}
.column-sm-4 {
grid-column-start: span 4;
grid-column-end: span 4;
}
.column-sm-5 {
grid-column-start: span 5;
grid-column-end: span 5;
}
.column-sm-6 {
grid-column-start: span 6;
grid-column-end: span 6;
}
.column-sm-7 {
grid-column-start: span 7;
grid-column-end: span 7;
}
.column-sm-8 {
grid-column-start: span 8;
grid-column-end: span 8;
}
.column-sm-9 {
grid-column-start: span 9;
grid-column-end: span 9;
}
.column-sm-10 {
grid-column-start: span 10;
grid-column-end: span 10;
}
.column-sm-11 {
grid-column-start: span 11;
grid-column-end: span 11;
}
.column-sm-12 {
grid-column-start: span 12;
grid-column-end: span 12;
}
}
@media (min-width: 62rem) {
.column-md-1 {
grid-column-start: span 1;
grid-column-end: span 1;
}
.column-md-2 {
grid-column-start: span 2;
grid-column-end: span 2;
}
.column-md-3 {
grid-column-start: span 3;
grid-column-end: span 3;
}
.column-md-4 {
grid-column-start: span 4;
grid-column-end: span 4;
}
.column-md-5 {
grid-column-start: span 5;
grid-column-end: span 5;
}
.column-md-6 {
grid-column-start: span 6;
grid-column-end: span 6;
}
.column-md-7 {
grid-column-start: span 7;
grid-column-end: span 7;
}
.column-md-8 {
grid-column-start: span 8;
grid-column-end: span 8;
}
.column-md-9 {
grid-column-start: span 9;
grid-column-end: span 9;
}
.column-md-10 {
grid-column-start: span 10;
grid-column-end: span 10;
}
.column-md-11 {
grid-column-start: span 11;
grid-column-end: span 11;
}
.column-md-12 {
grid-column-start: span 12;
grid-column-end: span 12;
}
}
@media (min-width: 75rem) {
.column-lg-1 {
grid-column-start: span 1;
grid-column-end: span 1;
}
.column-lg-2 {
grid-column-start: span 2;
grid-column-end: span 2;
}
.column-lg-3 {
grid-column-start: span 3;
grid-column-end: span 3;
}
.column-lg-4 {
grid-column-start: span 4;
grid-column-end: span 4;
}
.column-lg-5 {
grid-column-start: span 5;
grid-column-end: span 5;
}
.column-lg-6 {
grid-column-start: span 6;
grid-column-end: span 6;
}
.column-lg-7 {
grid-column-start: span 7;
grid-column-end: span 7;
}
.column-lg-8 {
grid-column-start: span 8;
grid-column-end: span 8;
}
.column-lg-9 {
grid-column-start: span 9;
grid-column-end: span 9;
}
.column-lg-10 {
grid-column-start: span 10;
grid-column-end: span 10;
}
.column-lg-11 {
grid-column-start: span 11;
grid-column-end: span 11;
}
.column-lg-12 {
grid-column-start: span 12;
grid-column-end: span 12;
}
}
}
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: "Barlow", sans-serif;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.6;
color: #8d8d8d;
background: #fff;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
a {
color: #8d8d8d;
text-decoration: none;
}
a:hover {
color: #232323;
}
nav {
position: relative;
z-index: 2;
padding: 1.25rem 0 1.25rem 0;
}
nav ul {
line-height: 2.2;
display: flex;
justify-content: flex-start;
}
nav ul li {
margin: 0.325rem 0;
}
#logo {
color: #232323;
font-weight: 700;
font-size: 1.125rem;
}
#highlight {
color: #e83f43;
}
img {
width: 100%;
height: 43vh;
object-fit: cover;
}
.vertical {
flex-direction: column;
justify-content: center;
align-items: center;
}
.intro {
position: relative;
z-index: 2;
opacity: 0;
animation: fadeIn 0.8s 0.4s ease forwards;
}
.intro .title {
display: inline-block;
font-size: 2rem;
font-weight: 500;
line-height: 1.1;
text-decoration: underline;
color: #e83f43;
}
.intro .title .underline {
color: #232323;
}
.description {
position: relative;
z-index: 1;
margin: 1rem 0 1.5rem 0;
font-size: 1rem;
opacity: 0;
animation: fadeIn 0.8s 0.6s ease forwards;
}
.slider-item {
display: none;
}
.slider-item.active {
display: block;
}
.slider-item.active .hide-mobile {
display: none;
}
.slider-item.active .show-mobile {
display: block;
margin: 1rem 0;
}
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
font-size: inherit;
width: 55px;
height: 55px;
}
.controls {
position: relative;
z-index: 1;
display: flex;
justify-content: flex-end;
padding: 0.25rem 0 0.25rem 0;
}
.controls .previous {
border: 1px solid #232323;
}
.controls .next {
border-top: 1px solid #232323;
border-right: 1px solid #232323;
border-bottom: 1px solid #232323;
}
.controls .icon {
position: relative;
margin: auto;
width: 20px;
height: 1px;
background-color: currentColor;
}
.controls .icon.arrow-left::before {
content: "";
position: absolute;
left: 1px;
top: -4px;
width: 9px;
height: 9px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
transform: rotate(-135deg);
}
.controls .icon.arrow-right::before {
content: "";
position: absolute;
right: 1px;
top: -4px;
width: 9px;
height: 9px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
transform: rotate(45deg);
}
.previous,
.next {
display: flex;
align-content: center;
justify-content: center;
flex-basis: 15%;
font-size: 2rem;
color: #232323;
}
.previous:hover .icon,
.next:hover .icon {
transform: scale(1.5);
}
.previous .icon,
.next .icon {
transition: transform 0.1s ease;
}
.active .image-holder::before {
position: absolute;
content: "";
z-index: 1;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
transform-origin: 100% 50%;
animation: revealRight 1s cubic-bezier(0.23, 1, 0.75, 1) forwards;
}
@keyframes revealRight {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(20%);
}
100% {
opacity: 1;
transform: translate(0);
}
}
.toggle-nav {
display: flex;
justify-content: flex-end;
font-size: 1rem;
line-height: 1.9;
}
.toggle-nav i {
font-size: 1.5rem;
line-height: 1.3;
margin: 0 0 0 0.5rem;
}
.flex-nav ul {
position: absolute;
z-index: 1;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
display: none;
width: 100%;
left: 0;
padding: 1rem;
background: #fff;
text-align: center;
}
.flex-nav ul.active {
display: flex;
}
@media (min-width: 62rem) {
nav ul {
justify-content: flex-end;
}
#logo {
font-size: 1.25rem;
}
.controls {
padding: 1.75rem 0 1.75rem 0;
}
.intro {
animation: fadeInLeft 0.8s 0.4s ease forwards;
}
.intro .title {
font-size: 4.25rem;
padding: 2.5rem 2.5rem 3rem 2.5rem;
background: #fff;
}
img {
height: 60vh;
}
.description {
font-size: 1.25rem;
margin: 1rem 0 0 0;
}
.previous,
.next {
flex-basis: 8.33%;
}
.slider-item.active .hide-mobile {
display: block;
}
.slider-item.active .show-mobile {
display: none;
}
.toggle-nav {
display: none;
}
.flex-nav ul {
display: flex;
flex-direction: row;
position: relative;
padding: 0;
justify-content: flex-end;
}
nav {
padding: 1.75rem 0 1.75rem 0;
}
nav ul {
line-height: 2.2;
display: flex;
justify-content: flex-start;
}
nav ul li {
font-size: 1rem;
text-transform: uppercase;
margin: 0 2rem 0 0;
}
nav ul li:nth-child(3) {
margin: 0;
}
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
</style>
</head>
<body>
<nav class="flex-nav">
<div class="container">
<div class="grid">
<div class="column-xs-9 column-md-8">
<p id="logo">Japan<span id="highlight">.</span></p>
</div>
<div class="column-xs-3 column-md-4">
<a href="#" class="toggle-nav">Menu <i class="ion-navicon-round"></i></a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Discover</a></li>
<li><a href="#">Plan Your Trip</a></li>
</ul>
</div>
</div>
</div>
</nav>
<main class="intro-section">
<div class="container">
<div class="grid">
<div class="column-xs-12">
<ul class="slider">
<li class="slider-item active">
<div class="grid vertical">
<div class="column-xs-12 column-md-2 hide-mobile">
<div class="intro">
<a href="#">
<h1 class="title"><span class="underline">Explore Tokyo</span></h1>
</a>
</div>
</div>
<div class="column-xs-12 column-md-10">
<div class="image-holder">
<img src="https://assets.codepen.io/1159990/tokyo.jpg">
</div>
<div class="grid">
<div class="column-xs-12 column-md-9">
<div class="intro show-mobile">
<a href="#">
<h1 class="title"><span class="underline">Explore Tokyo</span></h1>
</a>
</div>
<p class="description">Tokyo, Japan’s busy capital, mixes the ultramodern
and the traditional, from neon-lit skyscrapers to historic temples.</p>
</div>
</div>
</div>
</div>
</li>
<li class="slider-item">
<div class="grid vertical">
<div class="column-xs-12 column-md-2 hide-mobile">
<div class="intro">
<a href="#">
<h1 class="title"><span class="underline">Explore Kyoto</span></h1>
</a>
</div>
</div>
<div class="column-xs-12 column-md-10">
<div class="image-holder">
<img src="https://assets.codepen.io/1159990/kyoto.jpg">
</div>
<div class="grid">
<div class="column-xs-12 column-md-9">
<div class="intro show-mobile">
<a href="#">
<h1 class="title"><span class="underline">Explore Kyoto</span></h1>
</a>
</div>
<p class="description">Kyoto is famous for its numerous classical Buddhist
temples, gardens, imperial palaces, Shinto shrines and traditional
wooden houses.</p>
</div>
</div>
</div>
</div>
</li>
<li class="slider-item">
<div class="grid vertical">
<div class="column-xs-12 column-md-2 hide-mobile">
<div class="intro">
<a href="#">
<h1 class="title"><span class="underline">Explore Osaka</span></h1>
</a>
</div>
</div>
<div class="column-xs-12 column-md-10">
<div class="image-holder">
<img src="https://assets.codepen.io/1159990/osaka.jpg">
</div>
<div class="grid">
<div class="column-xs-12 column-md-9">
<div class="intro show-mobile">
<a href="#">
<h1 class="title"><span class="underline">Explore Osaka</span></h1>
</a>
</div>
<p class="description">Osaka is a large port city and commercial center
known for its modern architecture, nightlife and hearty street food.</p>
</div>
</div>
</div>
</div>
</li>
<li class="slider-item">
<div class="grid vertical">
<div class="column-xs-12 column-md-2 hide-mobile">
<div class="intro">
<a href="#">
<h1 class="title"><span class="underline">Explore Hokkaido</span></h1>
</a>
</div>
</div>
<div class="column-xs-12 column-md-10">
<div class="image-holder">
<img src="https://assets.codepen.io/1159990/hokkaido.jpg">
</div>
<div class="grid">
<div class="column-xs-12 column-md-9">
<div class="intro show-mobile">
<a href="#">
<h1 class="title"><span class="underline">Explore Hokkaido</span>
</h1>
</a>
</div>
<p class="description">Hokkaido, the northernmost of Japan’s main islands,
is known for its volcanoes, natural hot springs ("onsen") and ski areas.
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="grid">
<div class="column-xs-12">
<div class="controls">
<button class="previous">
<span class="visually-hidden">Previous</span>
<span class="icon arrow-left" aria-hidden="true"></span>
</a>
<button class="next">
<span class="visually-hidden">Next</span>
<span class="icon arrow-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
const items = document.querySelectorAll(".slider-item");
const itemCount = items.length;
const nextItem = document.querySelector(".next");
const previousItem = document.querySelector(".previous");
const navItem = document.querySelector("a.toggle-nav");
let count = 0;
function showNextItem() {
items[count].classList.remove("active");
if (count < itemCount - 1) {
count++;
} else {
count = 0;
}
items[count].classList.add("active");
console.log(count);
}
function showPreviousItem() {
items[count].classList.remove("active");
if (count > 0) {
count--;
} else {
count = itemCount - 1;
}
items[count].classList.add("active");
console.log(count);
}
function toggleNavigation() {
this.nextElementSibling.classList.toggle("active");
}
function keyPress(e) {
e = e || window.event;
if (e.keyCode == "37") {
showPreviousItem();
} else if (e.keyCode == "39") {
showNextItem();
}
}
nextItem.addEventListener("click", showNextItem);
previousItem.addEventListener("click", showPreviousItem);
document.addEventListener("keydown", keyPress);
navItem.addEventListener("click", toggleNavigation);
</script>
</body>
</html>
HTML 结构
- 使用main标签定义主体内容区域。
- 包含一个图片轮播功能，通过slider和slider-item实现轮播项。
- 每个轮播项包含一个标题、描述和一张图片。
- 提供“上一个”和“下一个”按钮，用于切换轮播项。
CSS 样式
- .container：定义了一个响应式的容器，用于限制页面内容的最大宽度，并在两侧添加内边距。
- .grid：使用Flexbox实现响应式网格布局，支持多列布局。
- .column-xs-12：定义了不同屏幕尺寸下的列布局，通过flex-basis和max-width控制列的宽度。
- fadeIn：定义了一个淡入动画，用于在页面加载时渐显内容。
- .controls .icon.arrow-left::before：使用伪元素和边框样式创建箭头图标，用于轮播按钮。
JavaScript功能
function showNextItem() {
items[count].classList.remove("active");
if (count < itemCount - 1) {
count++;
} else {
count = 0;
}
items[count].classList.add("active");
}
- 通过JavaScript实现轮播项的切换，点击“下一个”按钮时切换到下一张图片。
function toggleNavigation() {
this.nextElementSibling.classList.toggle("active");
}
- 点击菜单按钮时，切换导航菜单的显示状态。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！