?? 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術博主
作者主頁: 【主頁——獲取更多優質源碼】
web前端期末大作業： 【畢設項目精品實戰案例 (1000套) 】
程序員有趣的告白方式：【HTML七夕情人節表白網頁制作 (110套) 】
超炫酷的大屏可視化源碼：【 大屏展示大數據平臺可視化(150套) 】
免費且實用的WEB前端學習指南：
關于作者: 歷任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 堅持原創，熱衷分享，初心未改易語言讀取網頁圖片，繼往開來！
文章目錄
一、?網站題目
個人網頁制作 大學生個人網頁設計 個人網站模板 簡單靜態HTML個人網頁作品
二、??網站描述
? 大學生靜態HTML網頁設計作品，采用DIV CSS布局制作，頁面主體內容區域寬度為。網頁整體使用CSS設置了網頁背景圖片。頁面精美包含多個排版布局，學生網頁作業水平制作。
一套優質的網頁設計應該包含 (具體可根據個人要求而定)
頁面分為頁頭、菜單導航欄（最好可下拉）、中間內容板塊、頁腳四大部分。所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成。頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。菜單美觀、醒目，二級菜單可正常彈出與跳轉。要有JS特效，如定時切換和手動切換圖片輪播。頁面中有多媒體元素，如gif、視頻、音樂，表單技術的使用。頁面清爽、美觀、大方，不雷同。 。不僅要能夠把用戶要求的內容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。 三、網站介紹
網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網站的效果。
網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。
網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、網頁圖片文件；
網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁、其他html為二級頁面；
（2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3） js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等（個別網頁中運用到js代碼）。
四、網站演示
五、?? 網站代碼 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 charset="UTF-8">
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" />
<title>我的主頁title>
head>
<body>
<div class="nb_body">
<div class="nb_main">
<div class="header">
<div class="homeName">
<div class="myFamilyName"><i>孫楊的大學主頁i>div>
<div class="myFamilyInfo">
<marquee behavior="scroll" direction="left" width="100%" scrollamount="2">
歡迎您來到我的小家，隨便看看吧！
marquee>
div>
div>
div>
<div class="nb_are nb_nav">
<div class="nav2">
<ul>
<li class="small selected"><a href="index2.html">首頁a>li>
<li><a href="mylog.html">我的日志a>li>
<li><a href="aboutMe.html">我的簡歷a>li>
<li><a href="myPhoto.html">我的相冊a>li>
<li><a href="myVideo.html">我的視頻a>li>
ul>
div>
div>
<div class="nb_are nb_smt">div>
<div class="nb_are nb_cnt">
<div class="mainLeft">
<div class="mainLeftTop">div>
<div class="mainLeftCenter">
<div class="left-title"><b>個人簡介b>div>
<div class="left-photo"><img src="images/wo.jpg" />div>
<div class="left-name"><b>孫楊b>div>
<div class="left-info">
<ul>
<li>姓名：孫楊li>
<li>性別：男li>
<li>生日：1991年12月1日li>
<li>郵箱:<a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="f0c1c2c3c4c5c6c7c8c9b08181de939f9d">[email protected]a>
<script data-yjshash='f9e31' type="text/javascript">
/* */ ! function(t, e, r, n, c, a, p) {
try {
t = document.currentScript || function() {
for (t = document.getElementsByTagName('script'), e = t.length; e--;)
if (t[e].getAttribute('data-yjshash')) return t[e]
}();
if (t && (c = t.previousSibling)) {
p = t.parentNode;
if (a = c.getAttribute('data-yjsemail')) {
for (e = '', r = '0x' + a.substr(0, 2) | 0, n = 2; a.length - n; n += 2) e += '%' + ('0' + ('0x' + a.substr(n, 2) ^ r).toString(16)).slice(-2);
p.replaceChild(document.createTextNode(decodeURIComponent(e)), c)
}
p.removeChild(t)
}
} catch (u) {}
}() /* ]]> */
script>
li>
<li>血型：o型li>
<li>愛好：游泳 釣魚 健身li>
ul>
div>
div>
div>
<div class="mainRight">
<div class="mainRightTop">div>
<div class="mainRightCenter">
<div class="Rtitle"><b>我的大學b>div>
<div class="Rrain">
<p>我的愛好廣泛，喜歡旅行、聽音樂、下棋、各種體育運動。是一個做事踏實、學習刻苦、有上進心的學生。p>
<p>高中時聽說大學學生會是人才的搖籃，在這里可以在同學長，同學的交流中發現自己的不足，并加以改正，好讓自己能更好的為班級，為同學服務。我想學生會對我來說也是一個鍛煉自己的機會也是一個展示自己才華的舞臺。p>
<p>剛踏進大學，我就嚴格要求自己，立志要在大學生涯中有所成就，從全方面發展自己。p>
<p>我也是一個追求完美的人，我知道世上沒有十全十美的人存在，但我們可以去追求，去不斷的向它靠攏，每一個人或多或少都有缺點，我把這些缺點比作一個無形的洞，我們都知道洞是可以填補的，就好比缺點也是可以改正的，這也就要我們怎樣把這個洞一點一點填上，就是怎樣一點一點完善自己。洞是無形的，就如人不會是十全十美，我們或許永遠填不滿這洞，就好像人不會十全十美，也就正如學習，學習是無止境的。因此我要不斷的填洞，不斷的學習，不斷的完善自己。所以，我選擇了我所追求的，追求了我所選擇的——入學生會。p>
<p>如果我有幸能得到你們的認可，我將盡力辦好上級分派給我的任務，不辜負學長們對我期望，以此為新的起點，為文藝部出自己的一分力量。p>
<p>雖說命運掌握在自己手中,但有時付出了不一定有回報,如果我沒有入選，也不會就此灰心，我會下去總結經驗教訓，彌補不足。p>
div>
div>
div>
<div class="clearfix">div>
div>
<div class="nb_are nb_fot">
<div class="copyRight">
體育系 游泳專業 孫楊 版權所有© 2014
div>
div>
div>
div>
div>
body>
html>
CSS樣式代碼
@charset "gb2312";
/* CSS Document */
body {
background: #deceb0;
padding: 0px;
margin: 0px;
font-size: 12px
}
ul,
li,
img {
margin: 0px;
padding: 0px;
border: 0px;
list-style: none
}
.clearfix {
clear: both
}
.nb_body {
background: url(../images/topbg_1.jpg) #deceb0 repeat-x left -24px;
height: 270px
}
.nb_main {
width: 1004px;
height: auto;
margin: 0px auto;
position: relative;
}
.header {
width: 1004px;
height: 212px;
position: relative
}
.homeName {
margin: 0px auto;
color: #8a703e;
height: 212px;
background-image: url(../images/headbgn.jpg);
height: 212px;
}
.myFamilyName {
width: 460px;
height: 60px;
line-height: 60px;
color: #8a703e;
font-size: 28px;
position: absolute;
left: 500px;
top: 52px;
font-weight: bold;
}
.myFamilyName i {
font-style: normal;
}
.myFamilyInfo {
width: 280px;
height: 30px;
line-height: 30px;
position: absolute;
right: 0px;
top: 92px;
font-size: 14px;
}
.nb_nav {
background: url(../images/nav_bg.jpg) no-repeat center top;
height: 32px;
}
.nb_nav .nav2 {
margin-left: 391px;
height: 32px;
line-height: 32px;
}
}
.myPhotoS a:hover {
text-decoration: underline
}
.myPhotoS-list {
width: 660px;
margin: 50px auto;
}
.myPhotoS-list ul {
width: 660px
}
.myPhotoS-list ul li {
width: 220px;
text-align: center;
float: left
}
.myPhotoS-list img {
width: 200px;
min-height: 150px;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
background-clip: border-box
}
.myPhotoS-show {
width: 660px;
margin: 20px auto
}
.myPhotoS-show .img {
width: 660px;
overflow: hidden;
text-align: center
}
.img img {
width: 660px
}
.myPhotoS-show .pages {
width: 150px;
margin: 20px auto
}
六、 如何讓學習不再盲目
很多剛入門編程的小白學習了基礎語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去?？途W上的編程初學者入門訓練。該專題為編程入門級別，適合剛學完語法的小白練習，題目涉及編程基礎語法，基本結構等，每道題帶有練習模式和考試模式，可還原考試模式進行模擬，也可通過練習模式進行練習 。
七、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.【關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者易語言讀取網頁圖片，一起探討 前端 Node 知識，互相學習」！
3.
以上內容技術相關問題歡迎一起交流學習