前端項目實踐：基於HTML+CSS+jQuery，完成烘焙坊官網的設計

學習前端有一段時間了，自己做了一個烘焙坊的登錄頁跳轉到官方網站頁面的項目，主要借鑑了好利來官網的設計，下面直接附上代碼：

(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;

	}
	
})

以上就是我做的小項目，歡迎大家來交流！

前端項目實踐：基於HTML+CSS+jQuery，完成烘焙坊官網的設計

利用jQuery特性效果和鏈式調用做一個簡單的層級菜單

JavaScript框架——Vue的基礎語法

學習Vue指令

前端開發——跨域解決方案

前端項目實踐：基於HTML+CSS+jQuery，完成烘焙坊官網的設計

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結