HTML5期末大作業：商城網站設計——仿天貓線上商城（HTML和CSS實作天貓線上商城網站）

常見網頁設計作業題材有個人、美食、公司、學校、旅遊、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、服裝、體育、化妝品、物流、環保、書籍、婚紗、遊戲、節日、戒煙、電影、攝影、文化、家鄉、鮮花、禮品、汽車、其他等網頁設計題目, A+水準作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求。原始HTML+CSS+JS頁面設計, web大學生網頁設計作業源碼，畫面精明，排版整潔，内容豐富，主題鮮明，非常适合初學者學習使用。

⚽精彩專欄推薦👇🏻👇🏻👇🏻

❤ 【作者首頁——🔥擷取更多優質源碼】 ❤ 【web前端期末大作業——🔥🔥畢設項目精品實戰案例(1000套)】

文章目錄🌰

一、網頁介紹📖
一、網頁效果🌌
二、代碼展示😈

1.HTML結構代碼 🧱
2.CSS樣式代碼 🏠

三、個人總結😊
四、更多幹貨🚀

一、網頁介紹📖

1 網頁簡介：此作品為學生個人首頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水準, 非常适合初學者學習使用。

2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟體進行運作及修改編輯等操作）。

3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、滑鼠滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視訊、音頻元素、Flash，同時設計了Logo（源檔案）所需的知識點。

一、網頁效果🌌

HTML5期末大作業：商城網站設計——仿天貓線上商城（HTML和CSS實作天貓線上商城網站）

二、代碼展示😈

1.HTML結構代碼 🧱

代碼如下（示例）：以下僅展示部分代碼供參考~

<!DOCTYPE html>
<html>
    <head>
        <title>金銀貓CSmall金銀珠寶首飾線上交易平台--金銀貓CSmall</title> 
        <meta name="keywords" content="{$metaKeywords}" />
        <meta name="description" content="{$metaDesc}" /> 
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <link rel="Bookmark" href="favicon.ico">
        <link rel="Shortcut Icon" href="favicon.ico">

        <script src="http://js.spcrm.com/jQuery-1.7.1.min.js" type="text/javascript"></script>
        <script charset="utf-8" src="http://js.spcrm.com/jquery.qrcode.min.js" type="text/javascript"></script>

        <script charset="utf-8" src="../api/smallslider/rs/js/jquery.smallslider.js" type="text/javascript"></script>

        <link type="text/css" rel="stylesheet" href="../css/common.css">
        <link type="text/css" rel="stylesheet" href="../css/index.css">
        <link type="text/css" rel="stylesheet" href="../api/smallslider/rs/css/smallslider.css">


    </head>
    <body>
        <!--#include file="1.shtml"--> 
        <div class="topbar">
            <div class="wrap iconlist">
                <div class="memberbox width-6">嗨！歡迎來到金貓銀貓 <a href="#">請登入</a>  <a href="#">免費注冊</a> </div>
                <div class="width-6">
                    <a href="#"><i class="icon_heart icon_topbar"></i>我關注的品牌</a>
                    <a href="#">金貓銀貓會員</a>
                    <a href="#"><i class="icon_shopcart icon_topbar"></i>購物車<span id="shopcart_count">0</span>件</a>
                    <span class="fav">收藏夾<i class="icon icon_dropdown"></i></span> | 
                    <span><i class="icon_phone icon_topbar"></i>手機版</span>
                    <span class="fav">商家支援<i class="icon icon_dropdown"></i></span>
                    <span class="fav"><i class="icon_shopcart icon_topbar"></i>網站導航<i class="icon icon_dropdown"></i></span>
                </div>

            </div>  
        </div>


        <script>
            if ($(".navMobile").is(':visible')) {
                setTimeout(function () {
                    $(".navMobile").slideUp("slow");
                }, 3000);
            }


            (function () {

                $('.navbar-toggle').click(function () {
                    var nav = $('.navMobile');
                    if (nav.is(':visible')) {
                        nav.slideUp('slow');
                    } else {
                        nav.slideDown('slow');
                    }
                });

            })();


        </script> 


        <div   id="header">
            <div class=" wrap">
                <div class="logobar width-3">
                    <a  href="../" title="傳回首頁" class="logo "></a>
                </div>
                <div id="searchbar" class="width-6">
                    <form method="get" action="/product/">
                        <input type="text" name="keywords" class="txt" value="" placeholder="站内搜尋"/>
                        <input type="submit" class="bt" value="搜尋"/> 
                        <div class="clear"></div>
                    </form>
                    <a href="#">時尚彩寶</a> | 
                    <a href="#">鑽石</a> | 
                    <a href="#">時尚搭配</a> | 
                    <a href="#">設計師定制</a> | 
                    <a href="#">珠寶資訊</a> | 
                    <a href="#">貴金屬投資</a> 
                </div>

                <div id="login">
                    <div class="loginbox hidden-sm">


                    </div>
                </div>
            </div>    
        </div>

        <div style="clear:both"></div>
        <div id="nav" >
            <ul class="wrap">
                <li class="width-2"><a  href="#"   class="pronava">商品服務分類</a>

                    <div class="nav1">
                        <dl>
                            <dt class=" hidden-md">
                            <i class="icon_nav icon_1"></i>
                            <a href="#">鑽石首飾</a>
                            </dt>
                            <dd class=" hidden-sm">
                                <a href="#">手鍊</a>
                                <a href="#">戒指</a>
                                <a href="#">項鍊/吊墜</a>
                            </dd>
                            <dt class=" hidden-md">
                            <i class="icon_nav icon_1"></i>
                            <a href="#">鑽石首飾</a>
                            </dt>
                            <dd class=" hidden-sm">
                                <a href="#">手鍊</a>
                                <a href="#">戒指</a>
                                <a href="#">項鍊/吊墜</a>
                            </dd>
                            <dt class=" hidden-md">
                            <i class="icon_nav icon_1"></i>
                            <a href="#">鑽石首飾</a>
                            </dt>
                            <dd class=" hidden-sm">
                                <a href="#">手鍊</a>
                                <a href="#">戒指</a>
                                <a href="#">項鍊/吊墜</a>
                            </dd>
                            <dt class=" hidden-md">
                            <i class="icon_nav icon_1"></i>
                            <a href="#">鑽石首飾</a>
                            </dt>
                            <dd class=" hidden-sm">
                                <a href="#">手鍊</a>
                                <a href="#">戒指</a>
                                <a href="#">項鍊/吊墜</a>
                            </dd>
                            <dt class=" hidden-md">
                            <i class="icon_nav icon_1"></i>
                            <a href="#">鑽石首飾</a>
                            </dt>
                            <dd class=" hidden-sm">
                                <a href="#">手鍊</a>
                                <a href="#">戒指</a>
                                <a href="#">項鍊/吊墜</a>
                            </dd>
                        </dl>
                    </div>
                </li>

                <li class="width-1"><a  href="brand.html"   class="nava">品牌街</a></li>
                <li class="width-1"><a  href="member.html"   class="nava">會員尊享</a></li>
                <li class="width-1"><a  href="offline.html"   class="nava">門店驚喜</a></li>
                <li class="width-1"><a  href="raise.html"   class="nava">珠寶衆籌</a></li>
                <li class="width-1"><a  href="gold.html"   class="nava">金銀投資</a></li>
                <li class="width-1"><a  href="design.html"   class="nava">設計定制</a></li>
                <li class="width-1"><a  href="vip.html"   class="nava">搭配資訊</a></li>
            </ul>
            <div class="clear"></div>
        </div>
        <div  id="mainer">
            <div id="flashbox" class="smallslider">
                <ul>
                    <li style="background: url(../pic/banner_06.jpg) center">
                        <a href="#" target="_blank">

                        </a></li>
                </ul>
            </div>



            <script>$(".nav1").show();</script>
            <div class="wrap">
                <div class="index_hang index_brand">
                    <div class="t">
                        <a href="" class="cur">大牌街</a>
                        <a href="">潮牌街</a>
                        <a href="">原創街</a>
                        <div class="right">
                            <a class="btn_reload"><i class="icon icon_reload"></i>換一批</a>
                            <a href="#">品牌庫 ></a>
                        </div>
                    </div>
                    <div class="c">
                        <div class="brandfirst width-2">
                            <a class="close">×</a>
                            <div class="bigbrand">
                                <a><img src="../pic/brand_09.jpg"/></a>
                                <a><img src="../pic/brand_10.jpg"/></a>
                                <a><img src="../pic/brand_11.jpg"/></a>
                            </div>
                        </div>
                        <div class="brandlist width-8">
                        </html>

2.CSS樣式代碼 🏠

@charset "utf-8";/* common style */

*{margin: 0;padding: 0;font-family: "Microsoft YaHei",Arial;}
embed{ max-width: 100%;}
body{     text-indent: 0;font-size: 12px;color:#555; }
input, textarea, select {outline: 0;}
ul,li,ol{list-style: none;}
a{outline: none;text-decoration: none;transition: all ease .5s;color:#655;}
a:hover{color:#E94707;}
img{border: 0; max-width: 100%;}
input{outline: none;}
.wrap, .wrap2,.wrap3{ clear: both; margin: 0 auto;position: relative;}
.wrap{width: 1190px;}
.wrap2{ max-width: 1000px;}
.wrap3{max-width: 960px;}
.hide{display: none;}
.loading{background:#F0F0F0 url("../images/sliders/loading.gif") no-repeat center center;}
.clear{ clear: both;}
.row .padding{ padding: 0 15px;}
.right{float: right} 
.left{float: left;}
/*寬度*/

  .width-1,  .width-2,  .width-3,  .width-4,  .width-5,  .width-6,
  .width-7,  .width-8,  .width-9,  .width-10,  .width-11,  .width-12 {
    float: left;
  }
  .width-12 {    width: 100%;  }
  .width-11 {    width: 91.66666666666666%;  }
  .width-10 {    width: 83.33333333333334%;  }
  .width-9 {    width: 75%;  }
  .width-8 {    width: 66.66666666666666%;  }
  .width-7 {    width: 58.333333333333336%;  }
  .width-6 {    width: 50%;  }
  .width-5 {    width: 41.66666666666667%;  }
  .width-4 {    width: 33.33333333333333%;  }
  .width-3 {    width: 25%;  }
  .width-2 {    width: 16.666666666666664%;  }
  .width-1 {    width: 8.333333333333332%;  }


/* header */ 
#header{ background: #fff; }
#header a:hover{color:#888; text-decoration: none;}

/* topbar */
.topbar{ background: #f2f2f2; height: 25px; line-height: 25px;border-bottom: 1px solid #e5e5e5; }
.topbar a{ color: #666; margin: 0 5px;}



 /* logobar */
1002;} 
#nav li div dl a{color: #fff;}
#nav li div dl{  text-align: left;}
#nav li div dl dt{ font-size: 12px; font-weight: bold; padding: 5px 20px; background:rgba(31, 31, 31, 0.82);  }
#nav li div dl dd{ overflow: hidden; padding: 5px 0;}
#nav li div dl dd a{ padding: 0px 10px; border-left: dotted 1px #aaa; margin:4px 0 0 -1px; height: 8px; display: inline-block;  }
#header .link{float: right;padding-top:34px;}

#header .phone{ position: absolute; right: 0;  margin-top: 7px;}
#header .phone li{ float: left;}
#header .phone .ico{ background: url("../images/btn.png") no-repeat 0 -120px; display:inline-block; width: 35px; height: 35px;}
#header .phone a{ display: inline-block; line-height: 30px;}

#navMobile{ clear: both; text-align: center; font-size: 15px; padding-bottom: 10px; margin-bottom: 10px; overflow: hidden;}
#navMobile li{ margin-top: 10px;}
#navMobile li a{ text-decoration: none; }

/* mainer */
#mainer{clear: both;}
#mainer .content {     line-height: 25px;    margin-top: 20px;}
.side{margin:20px;}
.mainLeft{ float: right; margin: 10px 10px 0 0;position: absolute;    right: 0;    top: 0;}
#mainer .mainLeft a.lefta img{}
#mainer .mainLeft a.contact{ width: 115px; height:25px; padding: 28px 0 0 45px; font-size:14px; display: block; margin: 5px 0; font-weight: bold; color:#c63;background:url(../images/contact.jpg) no-repeat;}
#mainer .mainLeft .contact:hover{  color:#f60;}
#mainer .mainLeft .leftbt{ text-align: center;}
#mainer .mainLeft .leftimg{width: 160px; height: 49px;background:url(../images/left_img_bg.gif) no-repeat; padding: 3px;}
#mainer .mainLeft .leftimg a{display: block; width: 154px; height: 43px;}
#mainer .mainLeft .leftimg a.company{background:url(../images/left_company.jpg) no-repeat;}
#mainer .mainLeft .leftimg a.news{background:url(../images/left_news.jpg) no-repeat;}
/* sidebarMenu */
.sidebar{ background: #f5f5f5; line-height: 25px;}
.sidebar dt{ display: table-cell; width: 100px; background: #f5eeee; padding: 5px 10px; text-align: center;}
.sidebar dd{ display: table-cell;padding: 10px 15px; }
.sidebar dd a{ padding: 0 10px; display: inline-block;}
.sidebar dd a.cur{ background:#a5a; color: #fff; }
/* location */
#location{  padding: 10px 0 10px 15px; overflow:hidden; font-family: 宋體;}
#location a{color:#1a66b3; margin: 0 5px;}
#location a:hover,#location .cur{color:#E94707;}
/* footer */
#footer{clear: both;overflow: hidden; background: #fff; border-top:solid 1px #f5f5f5;}
#footer .line{ height: 110px;background: url("../images/index_52.jpg") center no-repeat ; border-bottom: solid 1px #f5f5f5;}
 #footer .help{padding: 20px; }
#footer .help dl{ text-align: center;}
#footer .help dt{font-size: 15px;font-weight: bold; line-height: 32px;}
#footer .help a{color:#444;line-height: 22px;}
#footer .copyright{  line-height: 30px; border-top: solid 2px #b81b22; color: #555; background: #000;}
#footer p{padding:25px 0;color:#666;}
#footer p a{color:#fff;margin: 0 10px;}
#footer a:hover{color:#E93707;}
#footer p .powerby{color:#999;} 


/* page */
#page {clear: both;text-align: center;margin-top: 10px;}
.paging{display: block;padding: 3px 0;}
.paging a {color:#333;border: 1px solid#BBB;cursor: pointer;}
.paging a:hover, .paging span.cur, .paging a.cur {color:#E94707;border: 1px solid#E94707;background:#EFEFEF;}
.paging span.disabled {color:#CCC;border: 1px solid#CCC;  }
.paging a, .paging span{margin: 0 2px;padding: 2px 6px;border-radius: 2px;}
/* form */
form input.text{width: 220px;outline: none;padding: 5px;border-radius: 3px;background-color:#FFF;border: 1px 
.mui-mbar-tab-tip {    background-color: #494949;    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);    color: #fff;    display: none;    height: 35px;    line-height: 35px;
    position: absolute; opacity: 0;   right: 70px;    text-align: center;    top: -1px;    width: 90px;}

.mui-mbar-tab-tip-arr {    color: #494949;    right: -8px;    top: 10px;}
.mui-mbar-arr {    font-family: "宋體";    font-size: 16px;    height: 16px;    line-height: 16px;    position: absolute;    text-align: center;    width: 16px;}
.mui-mbar-tab-cart .mui-mbar-tab-txt {    display: block;    height: 50px;    left: 7px;    line-height: 16px;    overflow: hidden;    padding: 0;    top: 40px;    width: 20px;    text-align: center;    position: absolute;} 
.mui-mbar-tab-cart {    height: 135px;}
.mui-mbar-tab-cart .mui-mbar-tab-sup-bd {     background-color: #c40000;    border-radius: 10px;   border-radius: 10px;    font-size: 12px;    height: 20px;    line-height: 20px;    min-width: 14px;    padding: 0 3px;    color: #FFF;}
 
.mui-mbar-tab-cart .mui-mbar-tab-sup {   right: 8px;    text-align: center;    top: 95px;position: absolute;     z-index: 999999;}

三、個人總結😊

一套合格的網頁應該包含(具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分；
所有頁面互相超連結，可到三級頁面，有5-10個頁面組成；
頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；
菜單美觀、醒目，二級菜單可正常彈出與跳轉；
要有JS特效，如定時切換和手動切換圖檔新聞；
頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用；
頁面清爽、美觀、大方，不雷同。
網站前端程式不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

四、更多幹貨🚀

1.如果我的部落格對你有幫助、如果你喜歡我的部落格内容，

請 “👍點贊” “✍️評論” “💙收藏”

一鍵三連哦！

❤️【關注我| 擷取更多源碼 | 優質文章】

帶您學習各種前端插件、3D炫酷效果、圖檔展示、文字效果、以及整站模闆、大學生畢業HTML模闆、期末大作業模闆、等! 「在這裡有好多前端開發者，一起探讨前端 Node 知識，互相學習」！

HTML5期末大作業：商城網站設計——仿天貓線上商城（HTML和CSS實作天貓線上商城網站）

文章目錄🌰

一、網頁介紹📖

一、網頁效果🌌

二、代碼展示😈

1.HTML結構代碼 🧱

2.CSS樣式代碼 🏠

三、個人總結😊

四、更多幹貨🚀

繼續閱讀

Element-UI - Vue項目整合Element-UI & Icon圖示 & 自定義Icon圖示

CSU 1113 Updating a Dictionary

關于UI測試的相關及技巧

SPOJ SUBLEX Lexicographical Substring Search

自定義 spring boot 啟動圖案

CodeForces 691D Swaps in Permutation

HDU 5748 Bellovin

ZOJ 3886 Nico Number

HDU 3760 Ideal Path

HDU 5442 Favorite Donut

CodeForces 19A World Football Cup

字元編碼和中文亂碼

python運作異常

winform控件縮寫（一）标準控件

雲伺服器部署項目：vue-cli 部署服務配置

UVA 116 Unidirectional TSP