當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城...
生活随笔
收集整理的這篇文章主要介紹了
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城...
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
常見網頁設計作業題材有 個人、 美食、 公司、 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 服裝、 體育、 化妝品、 物流、 環保、 書籍、 婚紗、 游戲、 節日、 戒煙、 電影、 攝影、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求。原始HTML+CSS+JS頁面設計, web大學生網頁設計作業源碼，畫面精明，排版整潔，內容豐富，主題鮮明，非常適合初學者學習使用。文章目錄🌰
- ??一、網頁介紹📖??
- ??一、網頁效果🌌??
- ??二、代碼展示😈??
- ??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>
<meta charset="utf-8">
<title>校園二手書交易平臺</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> <!-- nav-info -->
<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><!-- nav-search -->
<ul class="menu">
<li><a class="active" href="">首頁</a></li>
<li><a href="bookStore.html">書籍良品</a></li>
<li><a href="askBook.html">求書區</a></li>
<li><a href="#"></a></li>
</ul>
</header>
<!-- 輪播 -->
<div class="carousel">
<div class="book-guide">
<h4>圖書導航</h4>
<ul class="book-class">
<li><a href="#article" title="article">小說 / 文學 / 語言文字</a></li>
<li><a href="#">歷史 / 地理 / 藝術</a></li>
<li><a href="#">政治 / 法律 / 軍事</a></li>
<li><a href="#">哲學 / 心理 / 宗教</a></li>
<li><a href="#">經濟 / 社科 / 綜合</a></li>
<li><a href="#">童書 / 生活 / 體育</a></li>
<li><a href="#">教材 / 教輔 / 考試</a></li>
<li><a href="#technology" title="technology">工程技術 / 互聯網</a></li>
<li><a href="#">自然科學 / 醫藥衛生</a></li>
</ul>
</div><!-- book-guide -->
<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><!-- slider -->
</div><!-- carousel -->
<!-- 圖書分類 -->
<div id="container">
<div class="book-part" id="article">
<h3 class="book-title"><a href="#">| 小說 / 文學 / 語言文字</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">簡愛</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">桑德拉·希斯內羅絲、潘帕 著 / 譯林出版社 / 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><!-- book-list end -->
</div><!-- book-part end -->
<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;">
暫時沒有記錄
</div>
<!-- <ul class="book-lists">
<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="#" 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">簡愛</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">桑德拉·希斯內羅絲、潘帕 著 / 譯林出版社 / 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><!-- book-part end -->
</div> <!-- container end-->
<footer>
<a href="#">?2022-2022 二手書交易</a>
<a href="#">意見反饋???聯系我們???隱私權聲明???使用條款</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;
}
三、個人總結😊
一套合格的網頁應該包含(具體可根據個人要求而定)
總結
以上是生活随笔為你收集整理的基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 耳机插入电脑，但还是用的电脑的麦克风录制
- 下一篇： JS实现投票