首页 > 分享 > Web网页制作：宠物店（制作三个网页进行联动跳转）

Web网页制作：宠物店（制作三个网页进行联动跳转）

萌宠菠菠乐园
2025-03-09 02:02

注：用的是IDEA的java语言

1.具体的IDEA布局（可以自己寻找图片去带入）

2.具体的代码实现

style.css

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

line-height: 1.6;

font-size: 18px;

}

a {

text-decoration: none;

color: inherit;

}

header {

display: flex;

justify-content: space-between;

align-items: center;

background-color: #333;

padding: 10px 20px;

}

.logo {

height: 50px;

}

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

display: flex;

}

nav ul li {

margin-right: 15px;

}

nav a {

color: white;

padding: 5px 10px;

border-radius: 5px;

}

nav a.active,

nav a:hover {

background-color: #555;

}

main {

padding: 20px;

}

.banner-section {

position: relative;

text-align: center;

color: white;

}

.banner-image {

width: 100%;

height: 300px;

object-fit: cover;

}

.banner-content {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: #000000;

}

.featured-pets-section {

margin-bottom: 20px;

}

.pet-pictures-carousel-container {

width: 100%;

height: 300px;

overflow-x: auto;

white-space: nowrap;

border: 1px solid #ccc;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

border-radius: 5px;

}

.pet-carousel-image {

height: 100%;

width: auto;

margin-right: 10px;

}

.product-categories-section,

.product-list-section {

display: flex;

flex-wrap: wrap;

justify-content: flex-start;

}

.contact-info-section,

.contact-form-section,

.location-section {

margin-bottom: 20px;

}

.featured-pet-item,

.product-item {

width: calc(20% - 10px);

margin-bottom: 20px;

text-align: center;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

padding: 10px;

border-radius: 5px;

}

.pet-item,

.product-item {

width: 300px;

margin-bottom: 20px;

text-align: center;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

padding: 10px;

border-radius: 5px;

}

.pet-picture,

.product-picture {

width: 100%;

height: 200px;

object-fit: cover;

border-radius: 5px;

}

.add-to-cart-button,

.submit-button {

background-color: #007bff;

color: white;

padding: 10px 20px;

border-radius: 5px;

margin-top: 10px;

cursor: pointer;

}

.add-to-cart-button:hover,

.submit-button:hover {

background-color: #0056b3;

}

.contact-form-section form {

display: flex;

flex-direction: column;

}

.contact-form-section label {

margin-top: 10px;

}

.contact-form-section input,

.contact-form-section textarea {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

}

.location-section iframe {

margin-top: 20px;

}

footer {

background-color: #333;

color: white;

text-align: center;

padding: 10px;

}

js代码：但是其实不用这个js也能实现页面所显示的功能，可以观察里面滚动字符条的具体结构

window.onload = function() {

const carouselContainer = document.querySelector('.宠物图片轮播容器');

const images = carouselContainer.querySelectorAll('.宠物轮播图片');

const imageWidth = images[0].offsetWidth;

let scrollPosition = 0;

let intervalId;

function autoScroll() {

intervalId = setInterval(function() {

scrollPosition += imageWidth;

if (scrollPosition > carouselContainer.scrollWidth - carouselContainer.offsetWidth) {

scrollPosition = 0;

}

carouselContainer.scrollLeft = scrollPosition;

}, 3000);

}

autoScroll();

carouselContainer.addEventListener('mouseenter', function() {

clearInterval(intervalId);

});

carouselContainer.addEventListener('mouseleave', function() {

autoScroll();

});

window.onload=function(){

function hotChange(){

var current_index=0;

var timer=window.setInterval(autoChange, 3000);

var button_li=document.getElementById("button").getElementsByTagName("li");

var pic_li=document.getElementById("banner_pic").getElementsByTagName("li");

for(var i=0;i<button_li.length;i++){

button_li[i].onmouseover=function(){

if(timer){

clearInterval(timer);

}

for(var j=0;j<pic_li.length;j++){

if(button_li[j]==this){

current_index=j;

button_li[j].className="current";

pic_li[j].className="current";

}else{

pic_li[j].className="pic";

button_li[j].className="but";

}

button_li[i].onmouseout=function(){

timer=setInterval(autoChange,3000);

}

function autoChange(){

++current_index;

if (current_index==button_li.length) {

current_index=0;

}

for(var i=0;i<button_li.length;i++){

if(i==current_index){

button_li[i].className="current";

pic_li[i].className="current";

}else{

button_li[i].className="but";

pic_li[i].className="pic";

}

hotChange();

function school(){

var speed = 50;

var imgbox = document.getElementById("imgbox");

imgbox.innerHTML += imgbox.innerHTML;

var span = imgbox.getElementsByTagName("span");

var timer1 = window.setInterval(marquee,speed);

imgbox.onmouseover = function(){

clearInterval(timer1);

}

imgbox.onmouseout = function(){

timer1=setInterval(marquee,speed);

};

function marquee(){

if(imgbox.scrollLeft > span[0].offsetWidth){

imgbox.scrollLeft = 0;

}else{

++imgbox.scrollLeft;

}

school();

function tableChange(){

var lis = document.getElementById("SwitchNav").getElementsByTagName("li");

var spans=document.getElementById("SwitchBigPic").getElementsByTagName("span");

var current_index=0;

var timer = setInterval(autoChange,3000);

for(var i=0;i<lis.length;i++){

lis[i].onmouseover = function(){

if(timer){

clearInterval(timer);

}

for(var i=0;i<lis.length;i++){

if(lis[i]==this){

spans[i].className = "sp";

current_index = i;

}else{

spans[i].className = "";

}

lis[i].onmouseout = function(){

timer = setInterval(autoChange,3000);

}

function autoChange(){

++current_index;

if (current_index == lis.length) {

current_index=0;

}

for (var i=0; i<lis.length; i++) {

spans[i].className = "";

}

spans[current_index].className = "sp";

}

tableChange();

}

var rotation = document.querySelector('.rotation');

var imgs = rotation.querySelectorAll('img');

var pre = document.querySelector('.pre');

var next = document.querySelector('.next');

var num = 1;

var timer = setInterval(function () {

num++;

if (num == 4) {

num = 1;

}

imgs[0].src = 'image/view' + num + '.jpg';

}, 3000)

rotation.addEventListener('mouseover', function () {

clearInterval(timer);

})

rotation.addEventListener('mouseout', function () {

timer = setInterval(function () {

num++;

if (num == 4) {

num = 1;

}

imgs[0].src = 'image/view' + num + '.jpg';

}, 3000)

})

pre.addEventListener('click', function () {

num--;

if (num == 1) {

num = 4;

}

imgs[0].src = 'image/view' + num + '.jpg';

})

next.addEventListener('click', function () {

num++;

if (num == 4) {

num = 1;

}

imgs[0].src = 'image/view' + num + '.jpg';

})

var heard_top = document.querySelector('.heard_top');

var lis = heard_top.querySelectorAll('li');

var li_boxs = heard_top.querySelectorAll('.li_box');

for(var i=0;i<lis.length;i++){

lis[i].setAttribute('index',i);

lis[i].addEventListener('mouseover',function(){

var index = this.getAttribute('index');

for(var i=0;i<li_boxs.length;i++){

li_boxs[i].style.display='none';

}

li_boxs[index].style.display='block';

})

}

for(var i=0;i<lis.length;i++){

lis[i].addEventListener('mouseout',function(){

for(var i=0;i<li_boxs.length;i++){

li_boxs[i].style.display='none';

}

})

}

3.呈现的三个网页的源代码：

1.主页面

代码：

<!DOCTYPE html>

<head>

<title>Baimeidi Pet Store - Home</title>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</header>

<main>

<h2>欢迎光临我们的宠物店</h2>

<p>希望你们有一次完美的购物体验 </p>

</div>

</section>

</div>

</section>

<h2>我们的服务</h2>

<ul>

</ul>

</section>

</main>

</footer>

</body>

</html>

2.具体的商品页面（点击右上角商品按钮即可实现）

自己可以多加几类商品

代码：

<!DOCTYPE html>

<head>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</header>

<main>

<ul>

</ul>

</section>

<h3>好吃的狗粮</h3>

<p>Description: High-quality dog food suitable for all dog breeds.</p>

<p>Price: ¥19.99</p>

</div>

<p>Description: Infrared light that cats love most.</p>

<p>Price: ¥29.99</p>

</div>

<p>Description: Kittens also have their own little buddies now.</p>

<p>Price: ¥9.99</p>

</div>

<h3>狗狗最爱的</h3>

<p>Description: Dog's little secret.</p>

<p>Price: ¥9.99</p>

</div>

<p>Description: No need to worry about damaging the sofa at home anymore.</p>

<p>Price: ¥9.99</p>

</div>

<p>Description: An excellent helper for testing reaction ability.</p>

<p>Price: ¥9.99</p>

</div>

</section>

</main>

</footer>

</body>

</html>

3.联系我们网页

这里输入信息格式错误会报错

还添加了超链接的联动，具体的随便网上的一个地址＋地图

内含搜索按钮

代码

<!DOCTYPE html>

<head>

<title>Pet Store - Contact Us Page</title>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</header>

<main>

<p>地址: No. 123, Pet Street, Zibo City, Shandong Province</p>

</section>

</form>

</section>

</section>

</main>

</footer>

</body>

</html>

少食多餐（选择合适的观赏鱼种类，做到饮食平衡）

专业养鱼哪个品种好看

热点分享

布偶猫吃什么对毛发好原来这些食物就可以

对于布偶猫这种长毛猫来说，一般情况下，布偶猫这样的长毛猫咪毛...

这九种宠物既新奇又独特，看完你爱上没有？

这九种宠物既新奇又独特，看完你爱上没有？小猫，小狗，仓鼠...

推荐分享

缅因猫能长多大一种体型较大的猫

缅因猫能长多大?缅因猫是很多人都喜欢的一个品种，尤其是广大的女...

警惕狗贩的骗人损招星期狗的症状特征

警惕狗贩的骗人损招染色：这一招最多的是用在斑点狗、蝴蝶犬...

热门点击排行

我的狗老公李淑敏33——如何打造与宠物相伴的幸福生活？

南京宠物粮食薄荷饼宠物食品包装机

分享分类导航

萌宠日常

宠物饲养指南

宠物营养食谱

Web网页制作：宠物店（制作三个网页进行联动跳转）

注：用的是IDEA的java语言

1.具体的IDEA布局（可以自己寻找图片去带入）

2.具体的代码实现

3.呈现的三个网页的源代码：

少食多餐（选择合适的观赏鱼种类，做到饮食平衡）

专业养鱼哪个品种好看

布偶猫吃什么对毛发好 原来这些食物就可以

这九种宠物既新奇又独特，看完你爱上没有？

缅因猫能长多大 一种体型较大的猫

警惕狗贩的骗人损招 星期狗的症状特征

布偶猫吃什么对毛发好原来这些食物就可以

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征