大學生畢業網頁制作html

<font color='#e6808a' size='4px'> 🎉精彩專欄推薦 💭文末擷取聯系 </font>

✍️ 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術部落客

💂 作者首頁: 【首頁——🚀擷取更多優質源碼】

🎓 web前端期末大作業：【📚畢設項目精品實戰案例 (1000套) 】

🧡 程式員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】

🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大資料平台可視化(150套) 】

🔖 HTML+CSS+JS執行個體代碼：【🗂️HTML+CSS+JS執行個體代碼 (炫酷特效網頁代碼) 繼續更新中...】

🎁 免費且實用的WEB前端學習指南：【📂web前端零基礎到進階學習視訊教程 120G幹貨分享】

🥇 關于作者: 💬曆任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大部落格之星。十載寒冰，難涼熱血；多年過去，曆經變遷，物是人非。然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！

<hr>

(📂文章目錄)

<hr>

一、👨‍🎓網站題目

👒 公司官網網站、企業官網、酒店官網、等網站的設計與制作。

<hr>

二、✍️網站描述

🏷️ 網頁中包含：Div+CSS、滑鼠滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，視訊音頻元素，同時設計了logo（源檔案），基本期末作業所需的知識點全覆寫。

🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
菜單美觀、醒目，二級菜單可正常彈出與跳轉。
要有JS特效，如定時切換和手動切換圖檔輪播。
頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。
頁面清爽、美觀、大方，不雷同。。
不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

<hr>

三、📚網站介紹

📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。

📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。

📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。

📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；

📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：

Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++

等任意html編輯軟體進行運作及修改編輯等操作）。

其中：

（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；

（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；

（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。

四、🌐網站示範

<hr>

五、⚙️ 網站代碼

🧱HTML結構代碼

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>餓美了網</title>
	<link href="css/public.css" rel="stylesheet" type="text/css" />
	<link href="css/index.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
	<!-----頭部開始------->
	<div class="top">
		<a rel="nofollow" href="./index.html"><img style="float:left;width: 1000px;height: 200px;" src="images/logo.png" /></a>
	</div>
	<a rel="nofollow" href="html/login.html"><button class="button01">登入/注冊</button></a>
	<!---nav開始---->
	<div class="daohang">
		<div id="nav">
			<ul>
				<li><a rel="nofollow" href="./index.html">首頁</a></li>
				<li><a rel="nofollow" href="./html/order.html">訂單</a></li>
				<li><a rel="nofollow" href="html/tuijian.html">附近推薦</a></li>
				<li class="downorder">
					<a rel="nofollow" class="order" href="html/shuiguo.html">水果</a>
					<div class="downtext">
						<a rel="nofollow" href="">草莓</a>
						<a rel="nofollow" href="">鳳梨</a>
						<a rel="nofollow" href="">西瓜</a>
						<a rel="nofollow" href="">枇杷</a>
					</div>
				</li>

				<!-- <li><a rel="nofollow" href="html/shucai.html">蔬菜</a></li> -->
				<li><a rel="nofollow" href="html/userInfo.html">個人資訊</a></li>
				<li><a rel="nofollow" href="html/pingjia.html">評價中心</a></li>
			</ul>
		</div>
	</div>
	<!---nav結束---->
	<!-----banner------->
	<!-- <div class="ban">
			<img src="images/e118e3cdfe9c0a14-104a6139c30f339c-5516030145adc0d475c100260a514287.jpg" width="1000" height="335" border="0">
		</div> -->

	<div id="flash">
		<div id="prev"></div>
		<div id="next"></div>
		<ul id="play">
			<li style="display: block;"><img src="images/banner/1.jpg" alt="" /></li>
			<li><img src="images/banner/2.jpg" alt="" /></li>
			<li><img src="images/banner/3.jpg" alt="" /></li>
			<li><img src="images/banner/4.jpg" alt="" /></li>
			<li><img src="images/banner/5.jpg" alt="" /></li>
			<li><img src="images/banner/6.jpg" alt="" /></li>
			<li><img src="images/banner/7.jpg" alt="" /></li>
			<li><img src="images/banner/8.jpg" alt="" /></li>
		</ul>
		<ul id="button">
			<li>
				<div style="background: #A10000;"></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
			<li>
				<div></div>
			</li>
		</ul>
	</div>

	<!-----頭部結束------->
	<!-----main開始------->
	<div class="main">
		<div class="box1">
			<div class="shang-left">
				<div class="gk-title"><a rel="nofollow" href="html/about.html">
						餓美了網站簡介
					</a></div>
				<div class="gk">
					<img src="images/gktu.jpg" />
					<p>
						“餓美了”是一款本地生活平台，主營線上外賣、新零售、即時配送和餐飲供應鍊等業務。本網站以“Everything
						30min”為使命，緻力于用科技打造本地生活服務平台，推動了中國餐飲行業的數字化程序，将外賣培養成中國人繼做飯、堂食後的第三種正常就餐方式。
					</p>
				</div>
			</div>
			<div class="xz">
				<a rel="nofollow" href="html/techan.html">
					<span><i>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多>></i></span>
					
				</a>
				<a rel="nofollow" href="html/tc01.html"><img src="images/31244462056d77bc135a6ab39713ef1b.jpeg" /></a>
				<a rel="nofollow" href="html/tc02.html"><img src="images/5970143c6f75b999b188a26bc6d6379c.png" /></a>
				<a rel="nofollow" href="html/tc03.html"><img src="images/625fbc2de66219951b384144cfae4980.jpeg" /></a>
				<a rel="nofollow" href="html/tc04.html"><img src="images/65a7ea85c53648c7baee7fba7e3e2075.jpeg" /></a>
			</div>
			<div class="shang-right">
				<div class="count-title"><a rel="nofollow" href="html/minsu.html">
						基礎功能
					</a></div>
				<div class="count">
					<br />

					<p>快速搜羅附近外賣，不用打電話直接預訂：足不出戶，即可享用一座城的美食。不想早起還想吃早飯，交給外賣小哥，支援預定早餐。
					</p>

					<p> 看到大家對喜歡的外賣美食的點評&照片：支援點贊和分享美食圖檔，朋友圈式簡易操作，讓你成為美食方面的社交達人

					<p> 各種贈飲打折活動，優惠不斷：每日各種優惠不間斷，從水果到時蔬，從大餐到小吃，隻有你吃不了，沒有減免不。
				</div>
			</div>
		</div>

		<div class="meishi">
			<div class="yy-title"><a rel="nofollow" href="html/jingdian.html">
					餓美了熱門推薦
				</a></div>
			<div class="ms">
				<ul>
					<li><img src="images/zhaji.jpg" />
						<p>炸雞</p>
					</li>
					<li><img src="images/xiawei.jpg" />
						<p>蝦尾</p>
					</li>
					<li><img src="images/paigu.jpg" />
						<p>排骨</p>
					</li>
					<li><img src="images/suancaiyu.jpg" />
						<p>酸菜魚</p>
					</li>
					<li><img src="images/niupai.jpg" />
						<p>牛排</p>
					</li>
				</ul>
			</div>
		</div>
		<!-----main結束------->
		<!-----bottom開始------->
		<div class="bottom">
			<div class="bottom-box">
				<p>2022@ 版權所有 餓美了</p>
			</div>
		</div>
		<!-----bottom結束------->
</body>

</html>

💒CSS樣式代碼

@charset "utf-8";

/* CSS Document */
body {
	margin: 0 auto;
	font-size: 12px;
	font-family: "宋體", arial;
	line-height: 22px;
	position: relative;
}

.button01{
	position: absolute;
	right: 260px;
	top: 0px;
}

div,
p,
input,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd {
	height: auto;
	margin: 0;
	;
	padding: 0;
	vertical-align: middle;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

.ul {
	list-style: none;
}

.divclear {
	clear: both;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

a {
	color: #333;
}

a:link {
	color: #333;
}

a:hover {
	color: #629705;
	text-decoration: none;
	overflow: hidden;
}

/*---網頁開始-----*/
/*---top開始-----*/
.top {
	height: 200px;
	width: 1000px;
	margin: 0 auto;
}

.ban {
	height: 335px;
	width: 1000px;
	margin: 0 auto;
}

/*---導航----*/
.daohang {
	width: 1000px;
	height: 47px;
	background: url(../images/nav-bj.jpg);
	margin: 0 auto;
}

#nav {
	width: 1000px;
	height: 47px;
	line-height: 47px;
	font-family: "宋體";
	font-weight: bolder;
	font-size: 14px;
	margin: 0 auto;
}

#nav ul {
	margin: 0 auto;
}

#nav li {
	float: left;
	width: 165px;
	text-align: center;
	color: #FFF;
}

#nav a {
	width: 165px;
	height: 47px;
	/* display: block; */
	font-family: "宋體";
	font-size: 14px;
	font-weight: bold;
	float: left;
}

#nav a:link {
	color: #FFF;
}

#nav a:visited {
	color: #FFF;
	text-decoration: none;
	overflow: hidden;
}

#nav a:hover {
	color: #FFF;
	text-decoration: none;
	overflow: hidden;
	background: #224200;
}

#nav a:active {
	color: #FFF;
	text-decoration: none;
	overflow: hidden;
	background: #224200;
}


.downorder{
    width: 100px;
    position: relative;
    height: auto;
}
.downorder:hover a{
    display: block;
}
/* .order{
    position: relative;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    padding: 15px;
    background-color: rgb(16, 179, 243);
    color: aliceblue;
}
.order:hover{
    background-color: rgb(17, 100, 224);
    color: rgb(14, 13, 13);
} */
.downtext{
    position: relative;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    background-color: rgb(224, 187, 22);
    color: aliceblue;
	z-index: 10;
}
.downtext > a{
    /* display: block; */
    display: none;
    padding: 15px;

}
.downtext a:hover{
    background-color: rgb(27, 170, 111);
    color: rgb(142, 236, 79);
}


/*---bottom結束-----*/
.bottom {
	width: 1000px;
	margin: 0 auto;
	margin-top: 20px;
}

.bottom img {
	float: left;
}

.bottom p {
	width: 100%;
	height: 30px;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
	margin-left: 20px;
	float: left;
}

/*---bottom結束-----*/
.main {
	width: 1000px;
	margin: 0 auto;
	margin-top: 10px;
}

<hr>

六、🥇 如何讓學習不再盲目

第一、帶着目标去學習，無論看書報課還是各種線下活動。

首先要明确自己的學習目标是什麼，是想解決什麼問題，實作怎樣的目标。

第二、學習要建立個人知識體系

知識是學不完的，書籍是浩如煙海的。我們盡情徜徉其中的時候，千萬不要被海水淹死，沒有自我了。在學習過程中，我們會發現每一個知識點都是有她的邊界和背景的，我們要善于歸納整理知識

第三、學到了就要用到

有時，我們一天下來感覺學到了很多幹貨，那麼我們一定要将這些知識點和實際工作和生活聯系起來。知識和實踐互相聯系靠攏。愛學習是一件好事，但隻有會學習的人，才有價值。

<hr>

大學生畢業網頁制作html

一、👨‍🎓網站題目

二、✍️網站描述

三、📚網站介紹

四、🌐網站示範

五、⚙️ 網站代碼

🧱HTML結構代碼

💒CSS樣式代碼

六、🥇 如何讓學習不再盲目

七、🎁更多幹貨

繼續閱讀

msdn 訪談錄之C＃程式設計二

使用Windbg調試.Net應用程式

部署.net平台的應用程式

一個小小的移動web版音樂播放器

Robot Framework配置發送郵件功能

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

II6 IIS7 下 asp.net的生命周期 ASP.NET Application Life Cycle Overview for IIS 5.0 and 6.0

2010年終總結--技術篇

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

如何成為一名.net 工程師?

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden