写一个介绍宠物粮品牌网页利用CSS样式和栅格系统进行布局,这个品牌叫爪爪社,并且利用Bootstrap框 架中的CSS组件和JavaScript插件(最少8种)丰富页面
时间: 2024-04-02 12:36:01 浏览: 24
好的,以下是一个介绍宠物粮品牌爪爪社的网页,利用CSS样式和栅格系统进行布局,并且利用Bootstrap框架中的CSS组件和JavaScript插件丰富页面。
HTML代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爪爪社宠物粮</title>
<!-- Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<!-- FontAwesome字体文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<!-- 自定义样式文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">爪爪社</a>
<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-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">宠物粮</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">健康美味的宠物粮</h1>
<p class="lead text-muted">爪爪社是一个致力于为宠物提供高品质宠物食品的品牌,我们的产品都是经过严格挑选的,保证了最好的质量和纯度。让您的宠物拥有健康和幸福的生活。</p>
<p>
<a href="#" class="btn btn-primary my-2">了解更多</a>
<a href="#" class="btn btn-secondary my-2">购买宠物粮</a>
</p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">成犬粮</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29<small class="text-muted">/月</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>适合成年犬</li>
<li>高蛋白配方</li>
<li>口感极佳</li>
<li>营养均衡</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">购买</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">幼犬粮</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$19<small class="text-muted">/月</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>适合幼年犬</li>
<li>高钙配方</li>
<li>口感极佳</li>
<li>营养均衡</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">购买</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">猫粮</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$24<small class="text-muted">/月</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>适合所有成年猫</li>
<li>高蛋白配方</li>
<li>口感极佳</li>
<li>营养均衡</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">购买</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">回到顶部</a>
</p>
<p>爪爪社 © 2021</p>
</div>
</footer>
<!-- jQuery文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Bootstrap JavaScript文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- 自定义JavaScript文件 -->
<script src="script.js"></script>
</body>
</html>
```
CSS样式代码(style.css):
```
/* 自定义样式 */
.jumbotron {
background-color: #f8f9fa;
padding: 3rem 2rem;
margin-bottom: 2rem;
border-radius: 0.3rem;
}
.card {
border: none;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}
.card-header {
background-color: #f8f9fa;
border-bottom: none;
}
.pricing-card-title {
font-size: 2.5rem;
}
.list-unstyled {
font-size: 1.25rem;
line-height: 1.5;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #f8f9fa;
}
footer p {
margin-bottom: 0;
}
/* 响应式样式 */
@media (min-width: 768px) {
/* 栅格系统样式 */
.col-md-4 {
padding-left: 15px;
padding-right: 15px;
}
}
```
JavaScript插件代码(script.js):
```
// 滚动到顶部按钮
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.float-right').fadeIn();
} else {
$('.float-right').fadeOut();
}
});
$('.float-right').click(function() {
$('html, body').animate({scrollTop : 0}, 800);
return false;
});
});
// 轮播图插件
$('.carousel').carousel({
interval: 2000
});
// 工具提示插件
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
// 弹出框插件
$(function () {
$('[data-toggle="popover"]').popover()
});
// 模态框插件
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
});
// 下拉菜单插件
$('.dropdown-toggle').dropdown();
// 折叠菜单插件
$('.collapse').collapse();
// 警告框插件
$('.alert').alert();
// 滚动监听插件
$('body').scrollspy({ target: '#navbarNav' });
```
在这个网页中,我使用了Bootstrap框架提供的栅格系统来实现响应式布局,使用了Jumbotron、Card等CSS组件来美化页面,同时使用了Carousel(轮播图)、Tooltip(工具提示)、Popover(弹出框)、Modal(模态框)、Dropdown(下拉菜单)、Collapse(折叠菜单)、Alert(警告框)和Scrollspy(滚动监听)等JavaScript插件来丰富页面交互效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)