?? 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術博主
作者主頁: 【主頁——獲取更多優質源碼】
web前端期末大作業： 【畢設項目精品實戰案例 (1000套) 】
程序員有趣的告白方式：【HTML七夕情人節表白網頁制作 (110套) 】
超炫酷的大屏可視化源碼：【 大屏展示大數據平臺可視化(150套) 】
HTML+CSS+JS實例代碼：
免費且實用的WEB前端學習指南：
關于作者: 歷任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經變遷設計云免費靜態網頁制作實例，物是人非。 然而，對于技術的探索和追求從未停歇。 堅持原創，熱衷分享，初心未改，繼往開來！
文章目錄
一、?網站題目
校園網頁設計 、學校班級網頁制作、學校官網、小說書籍、等網站的設計與制作。
二、??網站描述
?HTML靜態網頁設計作業使用制作，采用DIV+CSS布局，共有多個頁面，首頁使用CSS排版比較豐富，色彩鮮明有活力。頂部導航及底部區域背景色為100%寬度，主體內容區域寬度
一套優質的網頁設計應該包含 (具體可根據個人要求而定)
頁面分為頁頭、菜單導航欄（最好可下拉）、中間內容板塊、頁腳四大部分。所有頁面相互超鏈接，可到三級頁面，有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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>視覺傳達1601班title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
head>
<body>
<div class="top">
<a href="index.html"><img class="floatl" src="images/logo.jpg" />a>
<div class="mz">視覺傳達1601班級div>
div>
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">首頁a>li>
<li><a href="about.html">關于我們a>li>
<li><a href="sheji.html">設計項目a>li>
<li><a href="anli.html">客戶案例a>li>
<li><a href="news.html">新聞資訊a>li>
<li><a href="lianxi.html">聯系我們a>li>
<li><a href="jianjie.html">個人簡介a>li>
ul>
div>
div>
<div class="box" id="box">
<div class="inner">
<ul>
<li><img src="images/ban01.jpg" alt="">li>
<li><img src="images/ban02.jpg" alt="">li>
<li><img src="images/ban03.jpg" alt="">li>
ul>
<ol class="bar">
ol>
<div id="arr">
<span id="left">
<
span>
<span id="right">
>
span>
div>
div>
div>
<div class="main">
<div class="left">
<div class="title"><a href="news.html"><h1>新聞資訊h1><span>更多>>span>a>div>
<div class="left-box">
<ul>
<a href="new01.html"><li><h2>黨支部開展"黨員政治生日"主題活動h2>li>a>
<a href="new02.html"><li><h2>青春心向黨 建功新時代 h2>li>a>
<a href="new03.html"><li><h2>后勤保障人員安全知識培訓 h2>li>a>
<a href="new04.html"><li><h2>教師教育學院舉辦"快樂起航...h2>li>a>
<a href="new01.html"><li><h2>黨支部開展"黨員政治生日"主題活動h2>li>a>
<a href="new02.html"><li><h2>青春心向黨 建功新時代 h2>li>a>
<a href="new03.html"><li><h2>后勤保障人員安全知識培訓 h2>li>a>
<a href="new04.html"><li><h2>教師教育學院舉辦"快樂起航...h2>li>a>
<a href="new01.html"><li><h2>黨支部開展"黨員政治生日"主題活動h2>li>a>
<a href="new02.html"><li><h2>青春心向黨 建功新時代 h2>li>a>
<a href="new03.html"><li><h2>后勤保障人員安全知識培訓 h2>li>a>
ul>
div>
<div class="title"><a href="lianxi.html"><h1>聯系我們h1><span>更多>>span>a>div>
<div class="left-box left-box2">
<ul>
<li><h2>工作時間：周一到周五9:00-17：00h2>li>
<li><h2>聯系地址：視覺傳達1601班級h2>li>
<li><h2>聯系電話：400-8888888h2>li>
<li><h2>宣傳合作：400-888-6666-33h2>li>
ul>
div>
div>
<div class="right">
<div class="box1">
<div class="wen">
<a href="about.html"><h1>關于我們h1>a>
<p>南京師范大學泰州學院是一所于2004年6月經國家教育部批準成立的普通高校本科層次獨立學院，由南京師范大學和泰州高教投資發展有限公司共同組建。P>
<p>經過14年的辦學實踐與探索，學院形成了適應地方經濟與社會發展需要、具有自身特色的發展思路和運行機制，為事業更好更快發展奠定了堅實基礎。P>
div>
<img src="images/ri01.jpg" />
div>
<div class="box2">
<img src="images/ri02.jpg" />
<div class="wen">
<a href="sheji.html"><h1>設計項目h1>a>
<p>視覺傳達設計是指依據特定的設計目的，對信息進行分析、歸納并通過文字、圖形、色彩、造型等基本要素進行設計創作，是將可視化信息傳達給受眾并對受眾產生影響的過程。P>
<p>在新精神、新藝術、新工具、新空間、新媒體空前發展的情形下，能夠展現出神奇的風貌，滿足各方面的需求。P>
div>
div>
div>
div>
<div class="bottom">
<div class=" daoh">
2000-2019 @版權所有 視覺傳達1601班級 . 07160125 鮑聞
div>
<img src="images/logo.jpg" />
div>
<script>
/**
*
* @param id 傳入元素的id
* @returns {HTMLElement | null} 返回標簽對象，方便獲取元素
*/
function my$(id) {
return document.getElementById(id);
}
//獲取各元素，方便操作
var box=my$("box");
var inner=box.children[0];
var ulObj=inner.children[0];
var list=ulObj.children;
var olObj=inner.children[1];
var arr=my$("arr");
var imgWidth=inner.offsetWidth;
var right=my$("right");
var pic=0;
//根據li個數，創建小按鈕
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");
olObj.appendChild(liObj);
liObj.innerText=(i+1);
liObj.setAttribute("index",i);
//為按鈕注冊mouseover事件
liObj.onmouseover=function () {
//先清除所有按鈕的樣式
for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
}
}
//設置ol中第一個li有背景顏色
olObj.children[0].className = "current";
//克隆一個ul中第一個li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(onmouseclickHandle,2000);
//左右焦點實現點擊切換圖片功能
box.onmouseover=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.onmouseout=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,2000);
};
right.onclick=onmouseclickHandle;
function onmouseclickHandle() {
//如果pic的值是5,恰巧是ul中li的個數-1的值,此時頁面顯示第六個圖片,而用戶會認為這是第一個圖,
//所以,如果用戶再次點擊按鈕,用戶應該看到第二個圖片
if (pic == list.length - 1) {
//如何從第6個圖,跳轉到第一個圖
pic = 0;//先設置pic=0
ulObj.style.left = 0 + "px";//把ul的位置還原成開始的默認位置
}
pic++;//立刻設置pic加1,那么此時用戶就會看到第二個圖片了
animate(ulObj, -pic * imgWidth);//pic從0的值加1之后,pic的值是1,然后ul移動出去一個圖片
//如果pic==5說明,此時顯示第6個圖(內容是第一張圖片),第一個小按鈕有顏色,
if (pic == list.length - 1) {
//第五個按鈕顏色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一個按鈕顏色設置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按鈕的背景顏色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}
left.onclick=function () {
if (pic==0){
pic=list.length-1;
ulObj.style.left=-pic*imgWidth+"px";
}
pic--;
animate(ulObj,-pic*imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//當前的pic索引對應的按鈕設置顏色
olObj.children[pic].className = "current";
};
//設置任意的一個元素,移動到指定的目標位置
function animate(element, target) {
clearInterval(element.timeId);
//定時器的id值存儲到對象的一個屬性中
element.timeId = setInterval(function () {
//獲取元素的當前的位置,數字類型
var current = element.offsetLeft;
//每次移動的距離
var step = 10;
step = current < target ? step : -step;
//當前移動到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定時器
clearInterval(element.timeId);
//直接到達目標
element.style.left = target + "px";
}
}, 10);
}
script>
body>
html>
CSS樣式代碼
@charset "utf-8";
/* CSS Document */
body{ margin:0 auto; font-size:12px; font-family: "宋體",arial; line-height:22px; }
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: 110px;width: 1024px;margin: 0 auto; background:url(../images/top-bg.jpg) repeat; text-align:center; }
.top img{ float:left;}
.mz{ font-size: 40px;
float: right;
color: #333;
height: 110px;
line-height: 110px;
margin-right: 30px;
font-weight: bold;}
/*---top結束-----*/
/*---導航----*/
.daohang{width: 1024px; height: 50px; margin: 0 auto; background: #046a43;}
#nav{ width:1170px; height:50px; line-height:50px; font-family:"微軟雅黑"; margin:0 auto; }
#nav ul{ margin:0 auto; }
#nav li{float: left;
width: 140px;
text-align: center;
color: #FFF;
}
#nav a{width:140px;height:50px; display:block; font-size:24px; float:left;}
#nav a:link { color:#fbd5c3; }
#nav a:visited{ color:#fbd5c3; text-decoration:none; overflow:hidden; }
#nav a:hover { color: #FFF ; text-decoration:none; overflow:hidden; background:#0c4831; }
#nav a:active { color: #FFF; text-decoration:none; overflow:hidden; background:#0c4831; }
.box{ height:300px;
width: 1024px;
margin: 0 auto;
margin-bottom:10px;}
.inner{
width: 1024px;
height: 300px;
position: relative;
overflow: hidden;
}
.inner img{
width:1024px;
height: 300px;
vertical-align: top
}
.inner ul {
width: 1000%;
position: absolute;
list-style: none;
left:0;
top: 0;
}
.inner li{
float: left;
}
ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 12px;
text-align: center;
padding: 5px;
}
ol li{
display: block;
width: 20px;
height: 20px;
line-height: 20px;
height: 200px;
float: left;
margin-right: 65px;}
.lianxi p{ color:#141414; height:40px; line-height:40px;}
.cert{ text-align:center;}
.wenz{width: 984px;
height: auto;
overflow: hidden;
background: #f8f8f8;
padding: 20px;
text-align:center;
}
.wenz p{ text-align: left;}
.wenz img{ margin:20px 0px;}
.timu{ width:100%; color:#141414; font-size:30px; height:60px; line-height:50px; text-align:center;}
.content{ width:100%; text-align:center; height:auto; overflow:hidden; margin:10px 0px;}
/*---bottom結束-----*/
.bottom{ width: 1024px;margin: 0 auto;margin-top: 20px; height:143px; background:url(../images/top-bg.jpg) repeat;}
.bottom img{float:right; margin-right:20px; margin-top:20px;}
.bottom .daoh{color: #111111;
width: 550px;
float: left;
height: 50px;
margin-top: 50px;
font-size: 16px;
margin-left: 30px;
line-height: 50px;}
.bottom .daoh ul{ }
.bottom .daoh ul li{ width:100px; height:50px; float:left; font-size:18px; line-height:50px; background:url(../images/jiange.png) right no-repeat; text-align:center;}
/*---bottom結束-----*/
六、 如何讓學習不再盲目
第一、帶著目標去學習，無論看書報課還是各種線下活動。
首先要明確自己的學習目標是什么，是想解決什么問題，實現怎樣的目標。
第二、學習要建立個人知識體系
知識是學不完的，書籍是浩如煙海的。我們盡情徜徉其中的時候，千萬不要被海水淹死，沒有自我了。在學習過程中，我們會發現每一個知識點都是有她的邊界和背景的，我們要善于歸納整理知識
第三、學到了就要用到
有時，我們一天下來感覺學到了很多干貨，那么我們一定要將這些知識點和實際工作和生活聯系起來。知識和實踐相互聯系靠攏。愛學習是一件好事，但只有會學習的人，才有價值。
七、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.【關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.
以上內容技術相關問題歡迎一起交流學習