時間：2023-10-14 16:54:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-10-14 16:54:01 來源：網(wǎng)站運(yùn)營
HTML5期末大作業(yè)：商城網(wǎng)站設(shè)計——仿天貓在線商城（HTML和CSS實現(xiàn)天貓在線商城網(wǎng)站）：常見網(wǎng)頁設(shè)計作業(yè)題材有 個人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他等網(wǎng)頁設(shè)計題目, A+水平作業(yè), 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計需求都能滿足你的需求。原始HTML+CSS+JS頁面設(shè)計, web大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，畫面精明，排版整潔，內(nèi)容豐富，主題鮮明，非常適合初學(xué)者學(xué)習(xí)使用。
在線咨詢
<!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="#">免費(fèi)注冊</a> </div> <div class="width-6"> <a href="#"><i class="icon_heart icon_topbar"></i>我關(guān)注的品牌</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>手機(jī)版</span> <span class="fav">商家支持<i class="icon icon_dropdown"></i></span> <span class="fav"><i class="icon_shopcart icon_topbar"></i>網(wǎng)站導(dǎo)航<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="站內(nèi)搜索"/> <input type="submit" class="bt" value="搜索"/> <div class="clear"></div> </form> <a href="#">時尚彩寶</a> | <a href="#">鉆石</a> | <a href="#">時尚搭配</a> | <a href="#">設(shè)計師定制</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">商品服務(wù)分類</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">設(shè)計定制</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="">原創(chuàng)街</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>@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;}請 “ 點(diǎn)贊” “??評論” “ 收藏”一鍵三連哦！??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！關(guān)鍵詞：商城,實現(xiàn),設(shè)計,作業(yè)
客戶&案例
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
