基于HTML+CSS+JS制作蛋糕商城（web前端網(wǎng)頁制作課作業(yè)）

文章目錄一、?網(wǎng)站題目

美食網(wǎng)頁介紹、甜品蛋糕、地方美食小吃文化、餐飲文化、等網(wǎng)站的設計與制作。

二、??網(wǎng)站描述

美食主題網(wǎng)站主要對各種美食進行展示，讓瀏覽者清晰地了解到各種美食的詳細信息，便于瀏覽者進行選擇。該模塊的左側有個美食分類，用戶可以選擇自己喜歡的種類，當點擊種類后，就會在右側出現(xiàn)該分類下的各種美食，用戶可以點擊自己感興趣的食品，從而看到它的具體信息。它的具體信息包括配料、產(chǎn)地及它的一些功能，使用戶對該食品有著全面的認識。

?靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計?,常用的網(wǎng)頁設計軟件有、、、、、等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的，本網(wǎng)頁適合修改成為各種類型的產(chǎn)品展示網(wǎng)頁，比如美食、旅游、攝影、電影、音樂等等多種主題，希望對大家有所幫助。

三、網(wǎng)站介紹

網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結構。

網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。

網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。

網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結構文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、網(wǎng)頁圖片文件；

網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：??、、、、、Text 、++??? 等任意html編輯軟件進行運行及修改編輯等操作）。

其中：

（1）html文件包含：其中index.html是首頁、其他html為二級頁面；

（2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；

（3） js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到js代碼）。

四、網(wǎng)站效果

五、代碼實現(xiàn)HTML結構代碼


<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>蛋糕商城title>
head>
<body>
<header>
  <div class="wrapin head_t1"> <a href="index.html" class="logo"><img src="images/logo.JPG">a> <a href="shopping.html" class="shopping">購物車a>
    <div class="member"> <a href="sign.html">會員登錄a> <a href="register.html">會員注冊a> div>
    <div class="clear">div>
  div>
  <nav>
    <ul class="wrapin">
      <li><a href="index.html">首頁a>li>
      <li><a href="product.html">產(chǎn)品a>li>
      <li><a href="about.html">公司簡介a>li>
      <div class="clear">div>
    ul>
  nav>
header>
<div class="banner">
  <div  class="banner" id="banner">
    <ul id="b_pic">
      <li style="display: block;"><img src="images/banner1.jpg"  alt="">li>
      <li style="display:none"><img src="images/banner2.jpg"  alt="">li>
      <li style="display:none"><img src="images/banner3.jpg"  alt="">li>
    ul>
    <ul id="b_an">
      <li>li>
      <li>li>
      <li>li>
    ul>
  div>
div>
<script src="js/lunbo.js" type="text/javascript">script>

<div class="content wrapin">
  <div class="product_list">
    <h3 class="tit"><span>經(jīng)典蛋糕/水果蛋糕span>h3>
    <div class="da_img"><img src="images/da1.png">div>
    <ul>
      <li>
        <div class="img"><a href="details1.html"><img src="images/a1.jpg">a>div>
        <div class="word">
          <h3><a href="details1.html">水果蛋糕|水果傳奇a>h3>
          <span>￥148span> div>
      li>
      <li>
        <div class="img"><a href="details2.html"><img src="images/a2.jpg">a>div>
        <div class="word">
          <h3><a href="details2.html">心有靈犀 愛的果園a>h3>
          <span>￥178span> div>
      li>
      <li>
        <div class="img"><a href="details3.html"><img src="images/a3.jpg">a>div>
        <div class="word">
          <h3><a href="details3.html">森之秘語|森系水果蛋糕a>h3>
          <span>￥198span> div>
      li>
      <li>
        <div class="img"><a href="details4.html"><img src="images/a4.jpg">a>div>
        <div class="word">
          <h3><a href="details4.html">水果蛋糕 | 幸福摩天輪a>h3>
          <span>￥208span> div>
      li>
      <div class="clear">div>
    ul>
    <div class="clear">div>
  div>
  <div class="product_list">
    <h3 class="tit"><span>網(wǎng)紅蛋糕/生日蛋糕span>h3>
    <div class="da_img"><img src="images/da2.png">div>
    <ul>
      <li>
        <div class="img"><a href="details5.html"><img src="images/a5.jpg">a>div>
        <div class="word">
          <h3><a href="details1.html">ins風 皇冠 愛心羽毛a>h3>
          <span>￥238span> div>
      li>
      <li>
        <div class="img"><a href="details6.html"><img src="images/a6.jpg">a>div>
        <div class="word">
          <h3><a href="details2.html">網(wǎng)紅蛋糕|母后大人a>h3>
          <span>￥248span> div>
      li>
      <li>
        <div class="img"><a href="details7.html"><img src="images/a7.jpg">a>div>
        <div class="word">
          <h3><a href="details3.html">火烈鳥蛋糕|浪漫天空a>h3>
          <span>￥198span> div>
      li>
      <li>
        <div class="img"><a href="details8.html"><img src="images/a8.jpg">a>div>
        <div class="word">
          <h3><a href="details4.html">閃耀的美 6寸起 皇冠a>h3>
          <span>￥288span> div>
      li>
      <div class="clear">div>
    ul>
    <div class="clear">div>
  div>
div>
<footer> <img src="images/footer.jpg">
  <p>蛋糕商城p>
footer>
body>
html>

CSS樣式代碼

/*通用類*/
*{
  margin:0;
  padding:0;  
}
body{    
  min-width:1000px;
  margin:0 auto;
  font-size:14px;  
  background:#fff;
  text-align:justify;  
  color:#333;
}
h1,h2,h3{  
  font-weight:500;  
}
img{
  border:none;  
}
a{
  cursor:pointer;
  color:#333;
  text-decoration:none;  
  outline:none;
}
a:hover{
  color:#f60;  
}
ul{
  list-style-type:none;  
}
em{
  font-style:normal;  
}
.lt{
  float:left;  
}
.rt{
  float:right;  
}
input.sub,label{
  border:none;  
  cursor:pointer;
}

.clear{
  clear:both;  
}

/*主體容器寬度*/
.wrapin{
  width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.head_t1 {
  padding:10px 0;
}
header .logo {
  width:282px;

六、如何讓學習不再盲目

很多剛入門編程的小白學習了基礎語法，卻不知道語法的用途，不知道如何加深映像網(wǎng)站制作，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學者入門訓練。該專題為編程入門級別網(wǎng)站制作，適合剛學完語法的小白練習，題目涉及編程基礎語法，基本結構等，每道題帶有練習模式和考試模式，可還原考試模式進行模擬，也可通過練習模式進行練習。

在線咨詢

上一篇：網(wǎng)站優(yōu)化快速上首頁的6種技巧方法
下一篇：網(wǎng)站優(yōu)化-關鍵詞排名多久可以上首頁？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

基于HTML+CSS+JS制作蛋糕商城（web前端網(wǎng)頁制作課作業(yè)）

您的項目需求