前端项目实践：基于HTML+CSS+jQuery，完成烘焙坊官网的设计
学习前端有一段时间了，自己做了一个烘焙坊的登录页跳转到官方网站页面的项目，主要借鉴了好利来官网的设计，下面直接附上代码：
- (1) HTML 登录页代码块
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CakeBakerytitle><link rel="stylesheet" style="text/css" media="screen" href="./screen.css"><link rel="stylesheet" style="text/css" href="./style.css">head><body><div class="background"><h1>CakeBakeryh1><div class="form"><form action="file:///C:/Users/Zerot/Desktop/Web/cake/website.html" method="post"><label><b>用户：b><input type="text" name="name" placeholder="字母、数字或下划线组成">label><br/><br/><label><b>密码：b><input type="password" name="password" placeholder="6位数字">label><br/><br/><button type="submit">登录button>form>div><div>body>
html>
(2) HTML官网代码块
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>CakeBakery官方网站title><link rel="stylesheet" style="text/css" href="./style.css"><script type="text/javascript" src="./jquery-3.4.1.min.js">script><script type="text/javascript" src="./slide.js">script>head><body><div class="header_con"><div class="welcome">欢迎来到CakeBakery~div><div class="user">zym，您好！div>div><div class="baner"><ul><li class="navmenu"><a href="#"><span>Home Pagespan><br><span>首页span>a><span id="line"><b>|b>span>li><li class="navmenu"><a href="#"><span>Wagashispan><br><span>零食糕点span>a><span id="line"><b>|b>span>li><li class="navmenu"><a href="#"><span>Cake Seriesspan><br><span>蛋糕系列span>a><span id="line"><b>|b>span>li><li class="navmenu"><a href="#"><span>Brand Storyspan><br><span>品牌故事span>a>li> ul><form ><input type="text" name="" placeholder="搜索" class="search">form><span class="shopping_con"><a href="#" class="shopping">我的购物车a><div class="shopping_num"><b>0b>div>span>div ><div class="slide"><ul class="slide_list"><li><a href="#"><img src="http://www.holiland.com/data/afficheimg/1451241729614010049.jpg" alt="图片1">a>li><li><a href="#"><img src="../imgs/2.jpg" alt="图片2" width="996px" height="450px">a>li><li><a href="#"><img src="http://www.holiland.com/data/afficheimg/1457047833194068991.jpg" alt="图片3">a>li> ul><div class="prev">div><div class="next">div><ul class="points"><li class="active">li><li>li><li>li>ul>div><div class="peisong_con"><div class="peisong"><span><img src="http://www.holiland.com/data/afficheimg/1556240157651442682.jpg" style="width:240px;">span>div><div class="video_con"><video id="video" width="745px" height="420px" src="../imgs/1.mp4" controls autoplay loop>视频无法播放!video>div>div><div class="tuijian_con"><img src="../imgs/7.jpg" width="996px">div><div class="dangao_con"><ul class="dangao"><li id="dangao1"><a href="#"><img src="../imgs/经典.jpg" alt="蛋糕1" width="323px" height="320px">a><div><b>￥ 108b>div>li><li id="dangao2"><a href="#"><img src="../imgs/儿童.jpg" alt="蛋糕2" width="323px" height="320px">a><div><b>￥ 168b>div>li><li id="dangao3"><a href="#"><img src="../imgs/玫瑰.jpg" alt="蛋糕3" width="323px" height="320px">a><div><b>￥ 208b>div>li>ul> div><div class="footer"><div class="footer_link"><a href="#">联系我们a><span style="color:#778899;">|span><a href="#">招聘人才a><span style="color:#778899;">|span><a href="#">友情链接a>div><p class="copyright"> CopyRight © 2020 CakeBakery有限公司 All Rights Reserved<br/>电话：010-XXXXXXX 京ICP备********号p>div> body>
html>
- CSS代码块
h1{border-top:120px;text-align:center;color:#7F462C;text-shadow:0 0 5px #ccc;font-family:fantasy;}
.background{background-color:#C19A6B;background: rgba(0, 0, 0, 0.2);border:2px dashed #493D26;border-radius:10px;margin: 200px auto 0;width:370px;height:240px;}
.form{text-align:center;color:#6F4E37;}
.form input{background:#f2f2f2; height:25px;}
.form button{background:#6F4E37;width:50px;height:25px;}*{margin:0;padding:0;
}.header_con{width:1280px;height:29px;background-color: #FFF0F5;opacity: 0.8;border-bottom: 1px solid #E6E6FA;margin:0 auto;
}.welcome{font-size: 12px;line-height: 29px;color:#F08080;margin-left: 10px;
}.user{font-size:12px;line-height: 29px;color:#F08080;float:right;margin-top:-29px;margin-right: 10px;
}.baner{width: 900px;height:50px;/*float:right;*/margin: 20px 0 0 100px;}
.navmenu a{text-decoration: none;display:inline-block;text-align: center;width:105px;height: 50px;}
.navmenu a:hover{background-color: #FAEBD7;
}
ul{list-style: none;}span{color:#ADDFFF;margin-right:15px;
}
#line{display: inline-block;}
.navmenu{float: left;padding-right: 20px;
}.search{width:250px;height: 30px;border: 1px solid #ADDFFF;border-radius: 6px;outline: none;margin-top: 10px;margin-left:25px;padding-left: 5px;
}.shopping_con{width:130px;height:30px;display: inline-block;float:right;margin-right:-160px;margin-top:-30px;
}
.shopping{display: inline-block;width:100px;height: 28px;border:1px solid #8FBC8F;text-decoration: none;color: #6495ED;text-align: center;line-height: 28px;background-color: #FFF5EE;
}
.shopping_num{width: 28px;height:30px;background-color: #FF4500;text-align: center;color:#fff;line-height: 30px;float:right;
}.slide{position: relative;width:996px;height: 450px;margin:30px auto 0;overflow: hidden;
}.slide_list{position: absolute;width: 996px;height:450px;top: 0;left:0;}.slide_list li{width: 996px;height: 450px;position: absolute;top:0;left:0;}.prev{position: absolute;width:15px;height: 23px;left:11px;top:210px;background:url(../imgs/icons.png) -1px -450px no-repeat;cursor:pointer;
}.next{position:absolute;width:15px;height: 23px;right:11px;top:210px;background:url(../imgs/icons.png) -1px -500px no-repeat;cursor:pointer;
}
.points{position: absolute;width: 100%;height:11px;text-align: center;bottom: 9px;font-size: 0;
}
.points li{display: inline-block;width: 11px;height: 11px;background-color: #9f9f9f;margin:0 5px;cursor: pointer;border-radius:50%;
}
.points .active{background-color: #cecece;
}.peisong_con{width:996px;margin:15px auto;
}
.peisong{width:240px;height: 420px;margin:0 0 0 10px;float:right;
}
.video_con{width:745px;height: 420px;margin-left: 0;cursor:pointer;
}#video{outline: none;
}.tuijian_con{width:996px;margin:30px auto 0;
}.dangao_con{width:996px;height:320px;margin:15px auto 0;
}
.dangao li{float:left;}
.dangao li div{text-align: center;}
#dangao1{margin:0 10px 0 0;border: 1px solid #FFC0CB;
}
#dangao2{margin:0 10px 0 0;border: 1px solid #FFC0CB;
}
#dangao3{margin:0;border: 1px solid #FFC0CB;
}.footer{width:996px;margin:80px auto 50px;text-align:center;
}
.footer_link a{display:inline-block;text-decoration:none;color:#778899;margin-right:16px;
}
.copyright{color:#778899;
}body{background-image: url("../imgs/1.jpg");background-repeat:no-repeat;background-size:cover;}
- JS代码块
$(function(){var $slide = $('.slide');//获取所以的幻灯片var $li = $('.slide_list li');//获取幻灯片的个数var $len = $li.length;var $prev = $('.prev');var $next = $('.next');//获取小圆点的容器var $points_con = $('.points');//获取小圆点var $points = $('.points li');//要运动过来的幻灯片索引值var nowli = 0;//要离开的幻灯片索引值var prevli = 0;var timer = null;var ismove = false;//第一个幻灯片不动，将其它的幻灯片放到右边去//排除第一个幻灯片，给其余幻灯片设置样式$li.not(':first').css({'left':996});//点击小圆点切换幻灯片,绑定click事件$points.click(function(){nowli = $(this).index();//修复重复点击小圆点的bug//注意是==if(nowli == prevli){return;}$(this).addClass('active').siblings().removeClass('active');//底下有专门定义的move()函数move();})//点击向前的按钮切换幻灯片$prev.click(function(){//防止暴力操作if(ismove){return;}ismove = true;nowli--;move();$points.eq(nowli).addClass('active').siblings().removeClass('active');})//点击向后的按钮切换幻灯片$next.click(function(){if(ismove){return;}ismove = true;nowli++;move();$points.eq(nowli).addClass('active').siblings().removeClass('active');})//设置定时器，2000ms自动播放timer = setInterval(autoplay,3000);$slide.mouseenter(function(){clearInterval(timer);})$slide.mouseleave(function(){timer = setInterval(autoplay,3000);})function autoplay(){nowli++;move();$points.eq(nowli).addClass('active').siblings().removeClass('active');}//幻灯片运动函数，通过判断nowli和prevli的值来移动对应的幻灯片function move(){//第一张幻灯片再往前的时候，也就是最后一张幻灯片要过来if(nowli<0){//最后一张幻灯片的索引值等于$len-1nowli = $len-1;prevli = 0;//从左边过来$li.eq(nowli).css({'left':-996});$li.eq(nowli).animate({'left':0});$li.eq(prevli).animate({'left':996},function(){ismove = false;});prevli = nowli;return;} //最后一张幻灯片再往后的时候if(nowli>$len-1){nowli = 0;prevli = $len-1;//从右边过来$li.eq(nowli).css({'left':996});$li.eq(nowli).animate({'left':0});$li.eq(prevli).animate({'left':-996},function(){ismove = false;});prevli = nowli;return;}//幻灯片从右边过来,从小到大if(nowli > prevli){//首先把要过来的幻灯片放到右边去$li.eq(nowli).css({'left':996});//要离开的幻灯片移到左边去$li.eq(prevli).animate({'left':-996});} //幻灯片从左边过来 ！！ else{//把要过来的幻灯片先放在左边去$li.eq(nowli).css({'left' :-996});$li.eq(prevli).animate({'left':996});}//默认显示的幻灯片是0$li.eq(nowli).animate({'left':0},function(){ismove = false;});prevli = nowli;}})
以上就是我做的小项目，欢迎大家来交流！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！