你现在作为一名大学生需要将一个介绍Drangarnir 海蚀柱具有优秀的过渡动画有简洁不失时尚的设计色彩风格背景图足够清新用一个让人眼前一亮的效果的html5网页代码展示给你的导师
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drangarnir 海蚀柱介绍</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
</head>
<body>
<pre><code><header>
<h1>Drangarnir 海蚀柱介绍</h1>
</header>
<main>
<section id="intro">
<h2>介绍</h2>
<p>Drangarnir 海蚀柱是位于法罗群岛的一个天然地标。这些海蚀柱由风化和海浪冲击形成，现在已成为该地区最著名的景点之一。</p>
</section>
<section id="gallery">
<h2>图片展示</h2>
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide"><img src="https://cdn.pixabay.com/photo/2016/10/25/14/03/drangarnir-1767564_1280.jpg" alt="Drangarnir 海蚀柱"></li>
<li class="glide__slide"><img src="https://cdn.pixabay.com/photo/2019/08/12/23/03/drangarnir-4399902_1280.jpg" alt="Drangarnir 海蚀柱"></li>
<li class="glide__slide"><img src="https://cdn.pixabay.com/photo/2018/06/07/17/34/drangarnir-3469443_1280.jpg" alt="Drangarnir 海蚀柱"></li>
<li class="glide__slide"><img src="https://cdn.pixabay.com/photo/2017/12/17/11/17/drangarnir-3025804_1280.jpg" alt="Drangarnir 海蚀柱"></li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>
</div>
</section>
<section id="location">
<h2>位置</h2>
<p>Drangarnir 海蚀柱位于法罗群岛的西南部，距离首府托尔斯港约45公里。游客可以通过乘船或徒步旅行到达该地点。</p>
</section>
</main>
<footer>
<p>© 2021 All rights reserved.</p>
</footer>
<script>
new Glide('.glide', {
type: 'carousel',
perView: 3,
focusAt: 'center',
breakpoints: {
768: {
perView: 2
},
480: {
perView: 1
}
}
}).mount();
</script>
</code></pre>
</body>
</html>
<p>/* CSS */</p>
<p>body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}</p>
<p>header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}</p>
<p>h1 {
margin: 0;
font-size: 36px;
}</p>
<p>main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}</p>
<p>section {
margin-bottom: 40px;
}</p>
<p>h2 {
font-size: 24px;
margin-bottom: 20px;
}</p>
<p>p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}</p>
<p>#gallery img {
max-width: 100%;
height: auto;
}</p>
<p>.glide__arrow {
background-color: #333;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}</p>
<p>.glide__arrow:hover {
background-color: #555;
}</p>
<p>.glide__arrows {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
}</p>
<p>@media screen and (max-width: 768px) {
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
p {
font-size: 14px;
}
}</p>
<p>@media screen and (max-width: 480px) {
header {
padding: 10px;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 18px;
}
p {
font-size: 12px;
}
}</p>
原文地址: https://www.cveoy.top/t/topic/bM71 著作权归作者所有。请勿转载和采集!