HTML5期末大作业：商城网站设计——仿天猫在线商城（HTML和CSS实现天猫在线商城网站）...
生活随笔
收集整理的這篇文章主要介紹了
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(源文件)所需的知識點。
一、網頁效果🌌
二、代碼展示😈
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;}
三、個人總結😊
一套合格的網頁應該包含(具體可根據個人要求而定)
四、更多干貨🚀
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，??請 “👍點贊” “??評論” “💙收藏” ??一鍵三連哦！
2.????【關注我| 獲取更多源碼 | 優質文章】 ??帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.以上內容技術相關問題😈歡迎一起交流學習🔥
總結
以上是生活随笔為你收集整理的HTML5期末大作业：商城网站设计——仿天猫在线商城（HTML和CSS实现天猫在线商城网站）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： The Frog Prince (青蛙王
- 下一篇： 浏览器判断麦克风和摄像头权限