常見網頁設計作業題材有 個人、 美食、 公司、 學校、 旅遊、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 服裝、 體育、 化妝品、 物流、 環保、 書籍、 婚紗、 遊戲、 節日、 戒煙、 電影、 攝影、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他等網頁設計題目, 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;
} 三、個人總結😊
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分；
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成；
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉；
- 要有JS特效，如定時切換和手動切換圖檔新聞；
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用；
- 頁面清爽、美觀、大方，不雷同。
- 網站前端程式不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。