?? 作者簡(jiǎn)介: 一個(gè)熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
作者主頁: 【主頁——獲取更多優(yōu)質(zhì)源碼】
web前端期末大作業(yè)： 【畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】
程序員有趣的告白方式：【HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
超炫酷的大屏可視化源碼：【 大屏展示大數(shù)據(jù)平臺(tái)可視化(150套) 】
免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南：
關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長(zhǎng)，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對(duì)于技術(shù)的探索和追求從未停歇。 堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開來！
文章目錄
一、?網(wǎng)站題目
?個(gè)人網(wǎng)頁制作 、大學(xué)生個(gè)人網(wǎng)頁設(shè)計(jì)、 個(gè)人博客網(wǎng)站模板 、簡(jiǎn)單靜態(tài)HTML個(gè)人網(wǎng)頁作品
二、??網(wǎng)站描述
? 個(gè)人博客靜態(tài)HTML網(wǎng)頁設(shè)計(jì)作品，采用DIV CSS布局制作，頁面主體內(nèi)容區(qū)域?qū)挾葹椤＞W(wǎng)頁整體使用CSS設(shè)置了網(wǎng)頁背景圖片。頁面精美包含多個(gè)排版布局，學(xué)生網(wǎng)頁作業(yè)水平制作。
一套優(yōu)質(zhì)的網(wǎng)頁設(shè)計(jì)應(yīng)該包含 (具體可根據(jù)個(gè)人要求而定)
頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分。所有頁面相互超鏈接，可到三級(jí)頁面，有5-10個(gè)頁面組成。頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)。菜單美觀、醒目，二級(jí)菜單可正常彈出與跳轉(zhuǎn)。要有JS特效，如定時(shí)切換和手動(dòng)切換圖片輪播。頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用。頁面清爽、美觀、大方，不雷同。 。不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。 三、網(wǎng)站介紹
網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁布局結(jié)構(gòu)。
網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材描述網(wǎng)頁設(shè)計(jì)的一般步驟，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、網(wǎng)頁圖片文件；
網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁、其他html為二級(jí)頁面；
（2） css文件包含：css全部頁面樣式,文字滾動(dòng), 圖片放大等；
（3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。
四、網(wǎng)站演示
五、?? 網(wǎng)站代碼 HTML結(jié)構(gòu)代碼
doctype html>
<html>
<head>
<meta charset="gb2312">
<title>個(gè)人博客模板（尋夢(mèng)）title>
<meta name="keywords" content="個(gè)人博客模板,博客模板" />
<meta name="description" content="尋夢(mèng)主題的個(gè)人博客模板，優(yōu)雅、穩(wěn)重、大氣,低調(diào)。" />
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
head>
<body>
<header>
<div id="logo"><a href="/">a>div>
<nav class="topnav" id="topnav"><a href="index.html"><span>首頁span><span class="en">Protalspan>a><a href="about.html"><span>關(guān)于我span><span class="en">Aboutspan>a><a href="newlist.html"><span>慢生活span><span class="en">Lifespan>a><a href="moodlist.html"><span>碎言碎語span><span class="en">Doingspan>a><a href="share.html"><span>模板分享span><span class="en">Sharespan>a><a href="knowledge.html"><span>學(xué)無止境span><span class="en">Learnspan>a><a href="book.html"><span>留言版span><span class="en">Gustbookspan>a>nav>
nav>
header>
<div class="banner">
<section class="box">
<ul class="texts">
<p>打了死結(jié)的青春，捆死一顆蒼白絕望的靈魂。p>
<p>為自己掘一個(gè)墳?zāi)箒碓嵝模t塵一夢(mèng)，不再追尋。p>
<p>加了鎖的青春，不會(huì)再因誰而推開心門。p>
ul>
<div class="avatar"><a href="#"><span>楊青span>a> div>
section>
div>
<div class="template">
<div class="box">
<h3>
<p><span>個(gè)人博客span>模板 Templatesp>
h3>
<ul>
<li><a href="/" target="_blank"><img src="images/01.jpg">a><span>仿新浪博客風(fēng)格·梅——古典個(gè)人博客模板span>li>
<li><a href="/" target="_blank"><img src="images/02.jpg">a><span>黑色質(zhì)感時(shí)間軸html5個(gè)人博客模板span>li>
<li><a href="/" target="_blank"><img src="images/03.jpg">a><span>Green綠色小清新的夏天-個(gè)人博客模板span>li>
<li><a href="/" target="_blank"><img src="images/04.jpg">a><span>女生清新個(gè)人博客網(wǎng)站模板span>li>
<li><a href="/" target="_blank"><img src="images/02.jpg">a><span>黑色質(zhì)感時(shí)間軸html5個(gè)人博客模板span>li>
<li><a href="/" target="_blank"><img src="images/03.jpg">a><span>Green綠色小清新的夏天-個(gè)人博客模板span>li>
ul>
div>
div>
<article>
<h2 class="title_tj">
<p>文章<span>推薦span>p>
h2>
<div class="bloglist left">
<h3>程序員請(qǐng)放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步h3>
<figure><img src="images/001.png">figure>
<ul>
<p>如果說掌握一門賴以生計(jì)的技術(shù)是技術(shù)人員要學(xué)會(huì)的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會(huì)的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會(huì)關(guān)心其他工作伙伴的工作情況和進(jìn)展...p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>>a>
ul>
<p class="dateview"><span>2013-11-04span><span>作者：楊青span><span>個(gè)人博客：[<a href="/news/life/">程序人生a>]span>p>
<h3>程序員請(qǐng)放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步h3>
<figure><img src="images/001.png">figure>
<ul>
<p>如果說掌握一門賴以生計(jì)的技術(shù)是技術(shù)人員要學(xué)會(huì)的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會(huì)的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會(huì)關(guān)心其他工作伙伴的工作情況和進(jìn)展...p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>>a>
ul>
<p class="dateview"><span>2013-11-04span><span>作者：楊青span><span>個(gè)人博客：[<a href="/news/life/">程序人生a>]span>p>
<h3>程序員請(qǐng)放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步h3>
<figure><img src="images/001.png">figure>
<ul>
<p>如果說掌握一門賴以生計(jì)的技術(shù)是技術(shù)人員要學(xué)會(huì)的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會(huì)的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會(huì)關(guān)心其他工作伙伴的工作情況和進(jìn)展...p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>>a>
ul>
<p class="dateview"><span>2013-11-04span><span>作者：楊青span><span>個(gè)人博客：[<a href="/news/life/">程序人生a>]span>p>
<h3>程序員請(qǐng)放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步h3>
<figure><img src="images/001.png">figure>
<ul>
<p>如果說掌握一門賴以生計(jì)的技術(shù)是技術(shù)人員要學(xué)會(huì)的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會(huì)的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會(huì)關(guān)心其他工作伙伴的工作情況和進(jìn)展...p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>>a>
ul>
<p class="dateview"><span>2013-11-04span><span>作者：楊青span><span>個(gè)人博客：[<a href="/news/life/">程序人生a>]span>p>
<h3>程序員請(qǐng)放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步h3>
<figure><img src="images/001.png">figure>
<ul>
<p>如果說掌握一門賴以生計(jì)的技術(shù)是技術(shù)人員要學(xué)會(huì)的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會(huì)的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會(huì)關(guān)心其他工作伙伴的工作情況和進(jìn)展...p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>>a>
ul>
<p class="dateview"><span>2013-11-04span><span>作者：楊青span><span>個(gè)人博客：[<a href="/news/life/">程序人生a>]span>p>
div>
<aside class="right">
<div class="weather"><iframe width="250" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=1">iframe>div>
<div class="news">
<h3>
<p>最新<span>文章span>p>
h3>
<ul class="rank">
<li><a href="/" title="Column 三欄布局 個(gè)人網(wǎng)站模板" target="_blank">Column 三欄布局 個(gè)人網(wǎng)站模板a>li>
<li><a href="/" title="with love for you 個(gè)人網(wǎng)站模板" target="_blank">with love for you 個(gè)人網(wǎng)站模板a>li>
<li><a href="/" title="免費(fèi)收錄網(wǎng)站搜索引擎登錄口大全" target="_blank">免費(fèi)收錄網(wǎng)站搜索引擎登錄口大全a>li>
<li><a href="/" title="做網(wǎng)站到底需要什么?" target="_blank">做網(wǎng)站到底需要什么?a>li>
<li><a href="/" title="企業(yè)做網(wǎng)站具體流程步驟" target="_blank">企業(yè)做網(wǎng)站具體流程步驟a>li>
<li><a href="/" title="建站流程篇——教你如何快速學(xué)會(huì)做網(wǎng)站" target="_blank">建站流程篇——教你如何快速學(xué)會(huì)做網(wǎng)站a>li>
<li><a href="/" title="box-shadow 陰影右下腳折邊效果" target="_blank">box-shadow 陰影右下腳折邊效果a>li>
<li><a href="/" title="打雷時(shí)室內(nèi)、戶外應(yīng)該需要注意什么" target="_blank">打雷時(shí)室內(nèi)、戶外應(yīng)該需要注意什么a>li>
ul>
<h3 class="ph">
<p>點(diǎn)擊<span>排行span>p>
h3>
<ul class="paih">
<li><a href="/" title="Column 三欄布局 個(gè)人網(wǎng)站模板" target="_blank">Column 三欄布局 個(gè)人網(wǎng)站模板a>li>
<li><a href="/" title="withlove for you 個(gè)人網(wǎng)站模板" target="_blank">with love for you 個(gè)人網(wǎng)站模板a>li>
<li><a href="/" title="免費(fèi)收錄網(wǎng)站搜索引擎登錄口大全" target="_blank">免費(fèi)收錄網(wǎng)站搜索引擎登錄口大全a>li>
<li><a href="/" title="做網(wǎng)站到底需要什么?" target="_blank">做網(wǎng)站到底需要什么?a>li>
<li><a href="/" title="企業(yè)做網(wǎng)站具體流程步驟" target="_blank">企業(yè)做網(wǎng)站具體流程步驟a>li>
ul>
<h3 class="links">
<p>友情<span>鏈接span>p>
h3>
<ul class="website">
<li><a href="/">個(gè)人博客a>li>
<li><a href="/">謝澤文個(gè)人博客a>li>
<li><a href="/">3DST技術(shù)網(wǎng)a>li>
<li><a href="/">思衡網(wǎng)絡(luò)a>li>
ul>
div>
<div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"><a class="bds_tsina">a><a class="bds_qzone">a><a class="bds_tqq">a><a class="bds_renren">a><span class="bds_more">span><a class="shareCount">a>div>
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=6574585" >script>
<script type="text/javascript" id="bdshell_js">script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
script>
<a href="/" class="weixin"> a>aside>
article>
<footer>
<p>Design by DanceSmile <a href="http://www.miitbeian.gov.cn/" target="_blank">蜀ICP備11002373號(hào)-1a> <a href="/">網(wǎng)站統(tǒng)計(jì)a>p>
footer>
<script src="js/silder.js">script>
body>
html>
CSS樣式代碼
@charset "gb2312";
/* CSS Document */
* { margin: 0; padding: 0 }
body { font: 12px "宋體", Arial, Helvetica, sans-serif; color: #756F71 }
img { border: 0; display: block }
ul { list-style: none; }
a:link, a:visited {text-decoration: none; color: #333;}
.left { float: left; }
.right { float: right; }
.blank { height: 5px; overflow: hidden; width: 100%; margin: auto; clear: both }
.box{ width:1000px; margin:auto; overflow:hidden}
header { width: 1000px; margin: auto; height: 80px; position: relative; overflow: hidden }
#logo a { width: 260px; height: 60px; margin: 10px 0 0 0; position: absolute; background: url(../images/logo.jpg) no-repeat; display: block }
nav { float: right; width: 100%; margin: 30px 0 0 0; text-align: right }
nav a { position: relative; display: inline-block; font-size: 18px; font-family: "微軟雅黑", Arial, Helvetica, sans-serif; }
nav a:hover { text-decoration: none }
.topnav a { margin: 0 5px; padding: 0 8px; }
.topnav a span:first-child { z-index: 2; display: block; }
.topnav a span:last-child { z-index: 1; display: block; color: #999; font: 12px Georgia, serif; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); text-align: center }
.topnav a:hover span:last-child, .topnav a:focus span:last-child { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); }
#topnav_current { color: #e15782; }
.en { color: #999; font-size: 12px; z-index: 1; display: block; }/* ie */
article { width: 1000px; margin: 20px auto; overflow: hidden }
aside { width: 250px; }
footer { text-align: center; line-height: 40px; border-top: #E8E8E8 1px solid ; width:1000px; margin:auto}
六、 如何讓學(xué)習(xí)不再盲目
很多剛?cè)腴T編程的小白學(xué)習(xí)了基礎(chǔ)語法描述網(wǎng)頁設(shè)計(jì)的一般步驟，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個(gè)時(shí)候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學(xué)者入門訓(xùn)練。該專題為編程入門級(jí)別，適合剛學(xué)完語法的小白練習(xí)，題目涉及編程基礎(chǔ)語法，基本結(jié)構(gòu)等，每道題帶有練習(xí)模式和考試模式，可還原考試模式進(jìn)行模擬，也可通過練習(xí)模式進(jìn)行練習(xí) 。
七、更多干貨
1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “點(diǎn)贊” “??評(píng)論” “收藏” 一鍵三連哦！
2.【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！
3.
以上內(nèi)容技術(shù)相關(guān)問題歡迎一起交流學(xué)習(xí)