當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城...

發(fā)布時(shí)間：2024/1/18 javascript 33 豆豆

生活随笔收集整理的這篇文章主要介紹了基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城... 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

常見網(wǎng)頁設(shè)計(jì)作業(yè)題材有個(gè)人、美食、公司、學(xué)校、旅游、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動(dòng)漫、服裝、體育、化妝品、物流、環(huán)保、書籍、婚紗、游戲、節(jié)日、戒煙、電影、攝影、文化、家鄉(xiāng)、鮮花、禮品、汽車、其他等網(wǎng)頁設(shè)計(jì)題目, A+水平作業(yè), 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計(jì)需求都能滿足你的需求。原始HTML+CSS+JS頁面設(shè)計(jì), web大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼，畫面精明，排版整潔，內(nèi)容豐富，主題鮮明，非常適合初學(xué)者學(xué)習(xí)使用。文章目錄🌰

??一、網(wǎng)頁介紹📖??
??一、網(wǎng)頁效果🌌??
??二、代碼展示😈??

??1.HTML結(jié)構(gòu)代碼 🧱??
??2.CSS樣式代碼 🏠??

??三、個(gè)人總結(jié)😊??
??四、更多干貨🚀??

一、網(wǎng)頁介紹📖

1 網(wǎng)頁簡(jiǎn)介：此作品為學(xué)生個(gè)人主頁網(wǎng)頁設(shè)計(jì)題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)源碼，這是一個(gè)不錯(cuò)的網(wǎng)頁制作，畫面精明，代碼為簡(jiǎn)單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。

2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作)。

3.知識(shí)應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識(shí)中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級(jí)三級(jí)頁面等，視頻、音頻元素、Flash，同時(shí)設(shè)計(jì)了Logo(源文件)所需的知識(shí)點(diǎn)。

一、網(wǎng)頁效果🌌

二、代碼展示😈

1.HTML結(jié)構(gòu)代碼 🧱

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

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>校園二手書交易平臺(tái)</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>


<header class="navbar1">
<div class="nav-info">
<a href="#" class="username">chieminchan</a>
<a href="myBookshelf.html" class="bookshelf">||???我的書架</a>
<a href="login.html" class="logout">[ 退出 ]</a>
</div> 
<form class="nav-search">
<a href=""><img class="logo" src="picture/logo2.png"></a>
<div class="search-form">
<a href="#" class="search-logo">| ?<img src="picture/search.png"></a>
<input type="search" class="searchIn" id="inp" placeholder="搜書名...">
<div class="searchBtn" id="but" style="line-height: 40px;">搜索</div>
</div>
</form>
<ul class="menu">
<li><a class="active" href="">首頁</a></li>
<li><a href="bookStore.html">書籍良品</a></li>
<li><a href="askBook.html">求書區(qū)</a></li>
<li><a href="#"></a></li>
</ul>
</header>


<div class="carousel">
<div class="book-guide">
<h4>圖書導(dǎo)航</h4>
<ul class="book-class">
<li><a href="#article" title="article">小說 / 文學(xué) / 語言文字</a></li>
<li><a href="#">歷史 / 地理 / 藝術(shù)</a></li>
<li><a href="#">政治 / 法律 / 軍事</a></li>
<li><a href="#">哲學(xué) / 心理 / 宗教</a></li>
<li><a href="#">經(jīng)濟(jì) / 社科 / 綜合</a></li>
<li><a href="#">童書 / 生活 / 體育</a></li>
<li><a href="#">教材 / 教輔 / 考試</a></li>
<li><a href="#technology" title="technology">工程技術(shù) / 互聯(lián)網(wǎng)</a></li>
<li><a href="#">自然科學(xué) / 醫(yī)藥衛(wèi)生</a></li>
</ul>
</div>
<div class="slider">
<div class="slider-img">
<ul class="slider-img-ul">
<li><img src="picture/5.jpg"></li>
<li><img src="picture/12.jpg"></li>
<li><img src="picture/21.jpg"></li>
<li><img src="picture/3.jpg"></li>
<li><img src="picture/4.jpg"></li>
<li><img src="picture/5.jpg"></li>
<li><img src="picture/12.jpg"></li>
</ul>
</div>
</div>
</div>


<div id="container">
<div class="book-part" id="article">
<h3 class="book-title"><a href="#">| 小說 / 文學(xué) / 語言文字</a></h3>
<a class="more" href="#"> > > 更多</a>
<ul class="book-lists" id="xslist">
<li class="book-list">
<a href="#" class="book-pic">
<img src="picture/1.jpg">
</a>
<a href="#" class="book-info">
<h5 class="book-name">白夜行</h5>
<span class="book-detail">東野圭吾著 / 南海出版公司 / 2008-09 / 平裝</span>
</a>
<span class="book-price">￥12.9
<a href="bookDetail.html" class="book-buy">立即下單</a>
</span>
</li>

<li class="book-list">
<a href="#" class="book-pic">
<img src="picture/2.jpg">
</a>
<a href="#" class="book-info">
<h5 class="book-name">簡(jiǎn)愛</h5>
<span class="book-detail">夏洛特·勃朗特著 / 世界圖書出版公司 / 2011-10 / 平裝</span>
</a>
<span class="book-price">￥13.8
<a href="#" class="book-buy">立即下單</a>
</span>
</li>

<li class="book-list">
<a href="#" class="book-pic">
<img src="picture/31.jpg">
</a>
<a href="#" class="book-info">
<h5 class="book-name">芒果街上的小屋</h5>
<span class="book-detail">桑德拉·希斯內(nèi)羅絲、潘帕著 / 譯林出版社 / 2006-06 / 平裝</span>
</a>
<span class="book-price">￥10.8
<a href="#" class="book-buy">立即下單</a>
</span>
</li>

<li class="book-list">
<a href="#" class="book-pic">
<img src="picture/41.jpg">
</a>
<a href="#" class="book-info">
<h5 class="book-name">活著</h5>
<span class="book-detail">余華作者 / 上海文藝出版社 / 2004-05 / 平裝</span>
</a>
<span class="book-price">￥12.1
<a href="#" class="book-buy">立即下單</a>
</span>
</li>

<li class="book-list">
<a href="#" class="book-pic">
<img src="picture/51.jpg">
</a>
<a href="#" class="book-info">
<h5 class="book-name">羊脂球</h5>
<span class="book-detail">莫泊桑著；柳鳴九譯 / 北京燕山出版社 / 2005-07 / 平裝</span>
</a>
<span class="book-price">￥11.2
<a href="#" class="book-buy">立即下單</a>
</span>
</li>
</ul>
</div>

<div class="book-part" id="technology">
<h3 class="book-title"><a href="#">| 工程科技</a></h3>
<a class="more" href="#"> > > 更多</a>
<div style="margin-top: 40px; text-align: center;margin-bottom: 40px;">
暫時(shí)沒有記錄
</div>

</div>
</div> 
<footer>
<a href="#">?2022-2022 二手書交易</a>
<a href="#">意見反饋???聯(lián)系我們???隱私權(quán)聲明???使用條款</a>
</footer>
<script type="text/javascript" src="js/jquery-3.2.js"></script>
<script type="text/javascript" src="js/xSlider.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/list.js"></script>
<script type="text/javascript">$(function () {
$(".book-class li a").on("click", function () {
var classId = $(this).prop("title");
console.log(classId);
var classTop = $("#container").find(("#" + classId)).offset().top;
$("html,body").animate({ scrollTop: classTop + "px" }, 500);
});
})
console.log(xslist);
let zz = ''
for (let i = 0; i < xslist.length; i++) {
zz += `
<li class="book-list" id='${xslist[i].id}'>
<a href="#" class="book-pic">
<img src="${xslist[i].src}">
</a>
<a href="#" class="book-info">
<h5 class="book-name">${xslist[i].name}</h5>
<span class="book-detail">${xslist[i].user}</span>
</a>
<span class="book-price">${xslist[i].price}
<a href="./bookDetail.html?id=${xslist[i].id}" class="book-buy">立即下單</a>
</span>
</li>`

}
$("#xslist").html(zz);
$("#but").click(function () {
let x = $('#inp').val()
for (let i = 0; i < xslist.length; i++) {
if (x == xslist[i].name) {
$("#xslist").html(
`
<li class="book-list" id='${xslist[i].id}'>
<a href="#" class="book-pic">
<img src="${xslist[i].src}">
</a>
<a href="#" class="book-info">
<h5 class="book-name">${xslist[i].name}</h5>
<span class="book-detail">${xslist[i].user}</span>
</a>
<span class="book-price">${xslist[i].price}
<a href="./bookDetail.html?id=${xslist[i].id}" class="book-buy">立即下單</a>
</span>
</li>`
);
}
}

});</script>
</body>

</html>

2.CSS樣式代碼 🏠

*{
padding: 0px;
margin: 0px;
font-family: Microsoft Yahei;
box-sizing: border-box;
}
/*navbar*/
.navbar{
height: 200px;
width: 100%;
background-color: white;
position: relative;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
}

.nav-info{
height: 40px;
background-color: #4b4d52;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}

.nav-info a{
text-decoration: none;
/*color: white;*/
color: #d6d2d2 !important;
font-size: 14px;
line-height: 40px;
margin-left: 5px;
margin-right:25px;
}

.nav-info a:hover{
color:white !important;
}

.nav-search{
height: 100px;
width: 100%;
/*background-color: gray;*/
display: flex;
justify-content: flex-start;
align-content: center;
position: relative;
}

.search-form{
display: flex;
justify-content: flex-start;
align-items: center;
}

.searchIn{
width: 31%;
height: 44px;
border: 2px solid #4b4d52;
position: absolute;
left: 49%;
top: 27%;
outline: none;
font-size: 16px;
text-indent: 10px;
}

.searchBtn{
width: 7%;
height: 44px;
border: 2px solid #3f4247;
background-color: #4b4d52;
position: absolute;
right: 13%;
top: 26.6%;
text-indent: 5px;
outline: none;
text-decoration: none;
text-align: center;
color: white;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
}

.searchBtn:hover{
font-size: 21px;
/*text-decoration: underline;*/
}

.logo{
width: 36%;
margin-left: 6%;
}

.search-logo{
text-decoration: none;
color: #4b4d52;
font-size: 26px;
position: absolute;
left: 45%;
top: 30.5%;

}
.search-logo img{
width: 20px;
margin-left:-6px;
}

.menu{
width: 100%;
height: 50px;
list-style: none;
display: flex;
justify-content: flex-start;
background-color: #f2f1ea;
margin-bottom: 0px;
padding-left: 11%;

}

.menu li a:hover{
font-weight: 600;
border: solid #b5aa9a;
border-width: 0 0 2px 0;
}

.menu li{
height: 50px;
display: inline-flex;
justify-content: space-around;
/*margin-left: 140px;*/
padding-top: 18px;
margin-right: 100px;

}
.menu a{
text-decoration: none;
color: #3f4247;
}

.menu li a.active{
font-weight: 600;
border: solid #b5aa9a;
border-width: 0 0 2px 0;
}

/*輪播圖*/

.slider, .slider .slider-img {
overflow: hidden;
height: 295px;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:after, blockquote:before, q:after, q:before {
content: '';
content: none;
}

}

.book-info{
display: flex;
flex-direction: column;
text-decoration: none;
justify-content: center;

}

.askbook-info span{
line-height: 23px;
margin-left: 27px;
color: #272222d6;
font-size: 13px;
word-wrap:break-word;
}

/*.book-name{
line-height: 26px;
margin-left: 27px;
font-size: 17px;
color: #ae6d6a;
}*/

.book-detail{
width: 185px;
height: 34px;
line-height: 18px;
margin-left: 27px;
color: #272222d6;
font-size: 13px;
word-wrap:break-word;
}

.book-price{
width: 100%;
height: 34px;
font-size: 17px;
line-height: 60px;
margin-left: 27px;
color: #880b16;
}

.book-buy{
width: 40px;
height: 36px;
padding: 5px;
margin-left: 45px;
text-decoration: none;
color: white;
font-size: 13px;
border: 1px solid #4b4d52;
border-radius: 2px;
background: #4b4d52;
}

.book-buy:hover{
/*font-weight: 600;*/
background-color: #626a55;
border: 1px solid #626a55;
font-weight: 600;
}

/*腳步*/
footer{
border-top: 1px solid #ccc;
width: 100%;
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}

footer a{
text-align: center;
font-size: 15px;
/*margin-left: 30%;*/
text-decoration: none;
color: gray;
}

三、個(gè)人總結(jié)😊

一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個(gè)人要求而定)

頁面分為頁頭、菜單導(dǎo)航欄(最好可下拉)、中間內(nèi)容板塊、頁腳四大部分；

所有頁面相互超鏈接，可到三級(jí)頁面，有5-10個(gè)頁面組成；

頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)；

菜單美觀、醒目，二級(jí)菜單可正常彈出與跳轉(zhuǎn)；

要有JS特效，如定時(shí)切換和手動(dòng)切換圖片新聞；

頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用；

頁面清爽、美觀、大方，不雷同。

網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。

總結(jié)

以上是生活随笔為你收集整理的基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：耳机插入电脑，但还是用的电脑的麦克风录制
下一篇： JS实现投票