学习前端有一段时间了,自己做了一个烘焙坊的登录页跳转到官方网站页面的项目,主要借鉴了好利来官网的设计,下面直接附上代码:
- (1) HTML 登录页代码块
<!DOCTYPE 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" media="screen" href="./screen.css">
<link rel="stylesheet" style="text/css" href="./style.css">
</head>
<body>
<div class="background">
<h1>CakeBakery</h1>
<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官网代码块
<!DOCTYPE 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 Page</span><br>
<span>首页</span>
</a>
<span id="line"><b>|</b></span>
</li>
<li class="navmenu">
<a href="#">
<span>Wagashi</span><br>
<span>零食糕点</span>
</a>
<span id="line"><b>|</b></span>
</li>
<li class="navmenu">
<a href="#">
<span>Cake Series</span><br>
<span>蛋糕系列</span>
</a>
<span id="line"><b>|</b></span>
</li>
<li class="navmenu">
<a href="#">
<span>Brand Story</span><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>0</b></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>¥ 108</b></div>
</li>
<li id="dangao2">
<a href="#"><img src="../imgs/儿童.jpg" alt="蛋糕2" width="323px" height="320px"></a>
<div><b>¥ 168</b></div>
</li>
<li id="dangao3">
<a href="#"><img src="../imgs/玫瑰.jpg" alt="蛋糕3" width="323px" height="320px"></a>
<div><b>¥ 208</b></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-1
nowli = $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;
}
})
以上就是我做的小项目,欢迎大家来交流!