作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/128288153
html簡潔風(fēng)格的個人博客網(wǎng)站模板html簡潔風(fēng)格的個人博客網(wǎng)站模板，里面包括首頁面，列表頁面，文章詳細(xì)頁面，資源頁面，時間記錄條頁面等模板頁面，可以借鑒這個模板，開發(fā)自己的博客，容易上手。下載后直接運行。
1.設(shè)計來源
1.1 博客首界面
博客首界面，以logo和菜單導(dǎo)航，為主導(dǎo)航，然后一個動態(tài)banner，跟著一個資源模板，內(nèi)容分為左右，左邊為文章，右邊為天氣，最新文章，底部為版號。
1.2 個人簡介界面
個人簡介界面，介紹個人的信息，相關(guān)愛好，個人特長等
1.3 日常記錄界面
日常記錄界面，根據(jù)時間記錄自己的日記或者日常生活趣事。
1.4 文章列表界面
文章列表界面，以列表形式模板，可以自定義布局。
1.5 文章信息界面
文章詳細(xì)信息，標(biāo)題，內(nèi)容，時間，作者，資源下載等，根據(jù)自己的需求變動。
更多內(nèi)容見底部源碼，點擊下載，所有源碼資源都在里面。
2.結(jié)構(gòu)源碼
2.1 目錄結(jié)構(gòu)
2.2 源代碼
這里是主界面的代碼，其他圖片、js、css等代碼，見下面的 源碼下載 ，里面有所有代碼資源和相關(guān)說明。
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>xcLeigh個人博客網(wǎng)站模板</title>
<meta name="keywords" content="個人博客,xcLiegh個人博客,個人博客模板,xcLiegh" />
<meta name="description" content="xcLiegh個人博客，提供個人學(xué)習(xí)源碼平臺。" />
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="logo"><a href="/"></a></div>
<nav class="topnav" id="topnav"><a href="index.html"><span>首頁</span><span class="en">Protal</span></a><a href="about.html"><span>關(guān)于我</span><span class="en">About</span></a><a href="newlist.html"><span>慢生活</span><span class="en">Life</span></a><a href="moodlist.html"><span>日常生活</span><span class="en">Doing</span></a><a href="share.html"><span>模板分享</span><span class="en">Share</span></a><a href="knowledge.html"><span>學(xué)無止境</span><span class="en">Learn</span></a><a ><span>留言版</span><span class="en">Gustbook</span></a></nav>
</nav>
</header>
<div class="banner">
<section class="box">
<ul class="texts">
<p>打了死結(jié)的青春，捆死一顆蒼白絕望的靈魂。</p>
<p>為自己掘一個墳?zāi)箒碓嵝?，紅塵一夢，不再追尋。</p>
<p>加了鎖的青春，不會再因誰而推開心門。</p>
</ul>
<div class="avatar"><a href="#"><span>xcLiegh</span></a> </div>
</section>
</div>
<div class="template">
<div class="box">
<h3>
<p><span>個人博客</span>模板 Templates</p>
</h3>
<ul>
<li><a href="/" target="_blank"><img src="images/01.jpg"></a><span>仿新浪博客風(fēng)格·梅——古典個人博客模板</span></li>
<li><a href="/" target="_blank"><img src="images/02.jpg"></a><span>黑色質(zhì)感時間軸html5個人博客模板</span></li>
<li><a href="/" target="_blank"><img src="images/03.jpg"></a><span>Green綠色小清新的夏天-個人博客模板</span></li>
<li><a href="/" target="_blank"><img src="images/04.jpg"></a><span>女生清新個人博客網(wǎng)站模板</span></li>
<li><a href="/" target="_blank"><img src="images/02.jpg"></a><span>黑色質(zhì)感時間軸html5個人博客模板</span></li>
<li><a href="/" target="_blank"><img src="images/03.jpg"></a><span>Green綠色小清新的夏天-個人博客模板</span></li>
</ul>
</div>
</div>
<article>
<h2 class="title_tj">
<p>文章<span>推薦</span></p>
</h2>
<div class="bloglist left">
<h3>程序員請放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步</h3>
<figure><img src="images/001.png"></figure>
<ul>
<p>如果說掌握一門賴以生計的技術(shù)是技術(shù)人員要學(xué)會的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會關(guān)心其他工作伙伴的工作情況和進(jìn)展...</p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>></a>
</ul>
<p class="dateview"><span>2013-11-04</span><span>作者：xcLiegh</span><span>個人博客：[<a href="/news/life/">程序人生</a>]</span></p>
<h3>程序員請放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步</h3>
<figure><img src="images/001.png"></figure>
<ul>
<p>如果說掌握一門賴以生計的技術(shù)是技術(shù)人員要學(xué)會的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會關(guān)心其他工作伙伴的工作情況和進(jìn)展...</p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>></a>
</ul>
<p class="dateview"><span>2013-11-04</span><span>作者：xcLiegh</span><span>個人博客：[<a href="/news/life/">程序人生</a>]</span></p>
<h3>程序員請放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步</h3>
<figure><img src="images/001.png"></figure>
<ul>
<p>如果說掌握一門賴以生計的技術(shù)是技術(shù)人員要學(xué)會的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會關(guān)心其他工作伙伴的工作情況和進(jìn)展...</p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>></a>
</ul>
<p class="dateview"><span>2013-11-04</span><span>作者：xcLiegh</span><span>個人博客：[<a href="/news/life/">程序人生</a>]</span></p>
<h3>程序員請放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步</h3>
<figure><img src="images/001.png"></figure>
<ul>
<p>如果說掌握一門賴以生計的技術(shù)是技術(shù)人員要學(xué)會的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會關(guān)心其他工作伙伴的工作情況和進(jìn)展...</p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>></a>
</ul>
<p class="dateview"><span>2013-11-04</span><span>作者：xcLiegh</span><span>個人博客：[<a href="/news/life/">程序人生</a>]</span></p>
<h3>程序員請放下你的技術(shù)情節(jié)，與你的同伴一起進(jìn)步</h3>
<figure><img src="images/001.png"></figure>
<ul>
<p>如果說掌握一門賴以生計的技術(shù)是技術(shù)人員要學(xué)會的第一課的話， 那么我覺得技術(shù)人員要真正學(xué)會的第二課，不是技術(shù)，而是業(yè)務(wù)、交流與協(xié)作，學(xué)會關(guān)心其他工作伙伴的工作情況和進(jìn)展...</p>
<a title="/" href="/" target="_blank" class="readmore">閱讀全文>></a>
</ul>
<p class="dateview"><span>2013-11-04</span><span>作者：xcLiegh</span><span>個人博客：[<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 三欄布局 個人網(wǎng)站模板" target="_blank">Column 三欄布局 個人網(wǎng)站模板</a></li>
<li><a href="/" title="with love for you 個人網(wǎng)站模板" target="_blank">with love for you 個人網(wǎng)站模板</a></li>
<li><a href="/" title="免費收錄網(wǎng)站搜索引擎登錄口大全" target="_blank">免費收錄網(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é)會做網(wǎng)站" target="_blank">建站流程篇——教你如何快速學(xué)會做網(wǎng)站</a></li>
<li><a href="/" title="box-shadow 陰影右下腳折邊效果" target="_blank">box-shadow 陰影右下腳折邊效果</a></li>
<li><a href="/" title="打雷時室內(nèi)、戶外應(yīng)該需要注意什么" target="_blank">打雷時室內(nèi)、戶外應(yīng)該需要注意什么</a></li>
</ul>
<h3 class="ph">
<p>點擊<span>排行</span></p>
</h3>
<ul class="paih">
<li><a href="/" title="Column 三欄布局 個人網(wǎng)站模板" target="_blank">Column 三欄布局 個人網(wǎng)站模板</a></li>
<li><a href="/" title="withlove for you 個人網(wǎng)站模板" target="_blank">with love for you 個人網(wǎng)站模板</a></li>
<li><a href="/" title="免費收錄網(wǎng)站搜索引擎登錄口大全" target="_blank">免費收錄網(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 >個人博客</a></li>
<li><a >xcLeigh</a></li>
<li><a >CSDN</a></li>
<li><a >稀土掘金</a></li>
</ul>
</div>
<!-- Baidu Button BEGIN -->
<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>
<!-- Baidu Button END -->
<a href="/" class="weixin"> </a></aside>
</article>
<footer>
<p>Design by xcLeigh<a target="_blank">京ICP備31301373號-2</a> <a href="/">網(wǎng)站統(tǒng)計</a></p>
</footer>
<script src="js/silder.js"></script>
</body>
</html>
源碼下載
html簡潔風(fēng)格的個人博客網(wǎng)站模板（源碼） 點擊下載
???? ?? 關(guān)注博主 帶你實現(xiàn)暢游前后端
???? ?? 加入社區(qū) 帶你體驗馬航不孤單
???? ?? 神秘個人簡介 帶你體驗不一樣得介紹
???? ?? 酷炫邀請函 帶你體驗高大上得邀請
???? ① ??提供云服務(wù)部署（有自己的阿里云）；
???? ② ??提供前端、后端、應(yīng)用程序、H5、小程序、公眾號等相關(guān)業(yè)務(wù)；
???? 如??合作請聯(lián)系我，期待您的聯(lián)系。
????注：本文撰寫于CSDN平臺,作者：xcLeigh（所有權(quán)歸作者所有），https://blog.csdn.net/weixin_43151418，如果相關(guān)下載沒有跳轉(zhuǎn)，請查看這個地址，相關(guān)鏈接沒有跳轉(zhuǎn)，皆是抄襲本文，轉(zhuǎn)載請備注本文原地址。
???? 親，碼字不易，動動小手，歡迎 點贊 ? 收藏，如 ?? 問題請留言（評論），博主看見后一定及時給您答復(fù)，??????文章來源：http://www.zghlxwxcb.cn/news/detail-470551.html
原文地址：https://blog.csdn.net/weixin_43151418/article/details/128288153（防止抄襲，原文地址不可刪除）文章來源地址http://www.zghlxwxcb.cn/news/detail-470551.html
到了這里，關(guān)于html簡潔風(fēng)格的個人博客網(wǎng)站模板（源碼）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
