做一个个人博客第一步该怎么做？
好多零基础的同学们不知道怎么迈出第一步。
那么，就找一个现成的模板学一学呗，毕竟我们是高贵的Ctrl c v 工程师。
但是这样也有个问题，那就是，那些模板都，太！复！杂！了！！！！
直接打击了我99%的学习积极性。
直到我找到了这一款极其简单，只有一个html页面和css的个人博客模板。
麻雀虽小，五脏俱全。
基本上有了个人博客所需要的很多基本功能，下一步只要花个一两小时学会它，然后开始加图片美化就完了。
简直爽歪歪，虽然直接用肯定不行，但是拿来当一个学习材料，那还是相当的顺手。
界面看起来是这个样子的。
虽然只有一个页面，但是，像什么标题，导航，侧边栏，快捷菜单，友链，搜索，列表，简介，预览页，就很全。代码也很简单。我们可以先学，然后，再用我们的知识把它完美化，不知不觉就学会了这套技术。
这可比直接下载那些美轮美奂的模板要好的多，看也看不懂，学也学不会。
下载地址在这里↓↓↓↓↓↓
https://download.csdn.net/download/qqhxmdq/89077684
代码我就全贴到这儿了，大家可以看一看。
<!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>free blog template - green web blog</title>
<meta name="keywords" content="free blog template, css template, CSS, HTML" />
<meta name="description" content="Green Web Blog - free blog template provided from xxxxxx.com" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<!-- from www.xxxxxx.com -->
</head><body><div id="templatemo_menu_panel"><div id="templatemo_menu_section"><ul><li><a href="#" class="current">Home</a></li><li><a href="#">Photos</a></li><li><a href="#">Videos</a></li><li><a href="#">Archives</a></li> <li><a href="#">Links</a></li> <li><a href="#">Contact</a></li> </ul> </div></div> <!-- end of menu --><div id="templatemo_header_content_container"><div id="templatemo_header_section"><div id="templatemo_title_section">GREEN BLOG</div><div id="templatemo_search_section"><form method="get" action="#"><input type="radio" name="search" value="thissite" />this site <input type="radio" name="search" value="theweb" checked="checked" /> the web <br /><input type="text" name="q" size="10" id="searchfield" title="searchfield" /><input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" /></form></div></div> <!-- end of templatemo header panel --><div id="templatemo_content"><div id="templatemo_content_left"><div class="templatemo_post"><div class="post_title">Free Blog Template<div class="post_info">Posted by <a href="http://www.xxxxxx.com" target="_parent">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络 淘宝店</a>, December 7, 2024 at 2:13 am, in <a href="#">Web Template.</a></div></div><div class="post_body"><img src="images/templatemo_image_01.jpg" alt="Web Template" /><p>This is a free blog template provided by <a href="http://www.xxxxxx.com" target="_parent">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络 淘宝店</a> website. You may download, modify and apply this CSS layout for your personal or business websites.</p><p>Credit goes to <a href="#" target="_blank">photovaco.com</a> for photos.</p></div><div class="post_comment"><a href="#">12 comments</a></div></div> <!-- end of post two --><div class="templatemo_post"><div class="post_title">HTML CSS Website Layout<div class="post_info">Posted by <a href="http://www.xxxxxx.com" target="_parent">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络 淘宝店</a>, December 2, 2024 at 6:45 am, in <a href="#">Web Template.</a></div></div><div class="post_body"><img src="images/templatemo_image_02.jpg" alt="CSS Template" /><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Suspendisse hendrerit turpis id augue.</p><p>Suspendisse at pede vel lorem pulvinar laoreet. Etiam et neque. Donec dapibus viverra est. Maecenas dignissim, quam a posuere scelerisque, ligula arcu dictum turpis, id tempus turpis erat at nulla.</p></div><div class="post_comment"><a href="#">No comment</a></div></div> <!-- end of post two --></div> <!-- end of content left --><div id="templatemo_content_right"><div class="templatemo_right_section"><h2>Categories</h2><ul><li><a href="#">Morbi nec magna pulvinar</a></li><li><a href="#">Suspendisse rhoncus lectus</a></li><li><a href="#">Pellentesque rutrum est</a></li><li><a href="#">Nunc blandit orci</a></li></ul> </div><div class="templatemo_right_section"><h2>Archives</h2><ul><li><a href="#">January 2024</a></li><li><a href="#">December 2023</a></li><li><a href="#">November 2023</a></li><li><a href="#">October 2023</a></li><li><a href="#">September 2023</a></li></ul> </div><div class="templatemo_right_section"><h2>Popular Posts</h2><ul class="popular_post"> <li><a href="#">Donec mollis aliquet</a><br />Author 1 - Oct 14, 2024 <span class="comment">12 replies</span></li><li><a href="#">Aliquam tristique lacust</a><br />Author 2 - Oct 14, 2024 <span class="comment">8 replies</span></li><li><a href="#">Suspendisse potent</a><br />Author 3 - Oct 14, 2024 <span class="comment">10 replies</span></li><li><a href="#">Nullam vitae tellus</a><br />Author 4 - Oct 14, 2024 <span class="comment">30 replies</span></li></ul></div><div class="templatemo_right_section"><h2>Recent Comments</h2><ul> <li>Lorem Ipsum on <a href="#">Donec mollis aliquet</a></li><li>Consectetuer on <a href="#">Suspendisse a nibh</a></li><li>Sed on <a href="#">Pellentesque vitae magna</a></li><li>Vitae Neque on <a href="#">Nunc blandit orci sit amet</a></li><li>Donec Mollis on <a href="#">Maecenas adipiscing</a></li></ul></div></div> <!-- end of right content --></div> <!-- end of content --></div> <!-- end of content container --><div id="templatemo_bottom_panel"><div id="templatemo_bottom_section"><div class="templatemo_bottom_section_content"><h3>Gallery</h3><ul class="gallery"><li><a href="#"><img src="images/templatemo_thumb_01.jpg" alt="image name" /></a></li><li><a href="#"><img src="images/templatemo_thumb_02.jpg" alt="image name" /></a></li><li><a href="#"><img src="images/templatemo_thumb_03.jpg" alt="image name" /></a></li><li><a href="http://www.xxxxxx.com" target="_blank"><img src="images/templatemo_thumb_04.jpg" alt="Free CSS" /></a></li><li><a href="#" target="_blank"><img src="images/templatemo_thumb_05.jpg" alt="Free Flash" /></a></li><li><a href="#" target="_blank"><img src="images/templatemo_thumb_06.jpg" alt="Web Design" /></a></li></ul></div><div class="templatemo_bottom_section_content"><h3>Friends</h3><ul class="list_section"><li><a href="#">Lorem ipsum</a></li><li><a href="#">Duis mollis</a></li><li><a href="#">Maecenas adipiscing</a></li><li><a href="#">Nunc blandit orci</a></li><li><a href="#">Cum sociis natoque</a></li></ul></div><div class="templatemo_bottom_section_content"><h3>Other Links</h3><ul class="list_section"><li><a href="#">About</a></li> <li><a href="#">Contact</a></li><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul><a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a> </div></div> <!-- end of templatemo bottom section --></div> <!-- end of templatemo bottom panel --><!-- from www.xxxxxx.com -->
<div id="templatemo_footer_panel"><div id="templatemo_footer_section">Copyright © 2024 <a href="#">Your Company Name</a> | from <a href="http://www.xxxxxx.com" target="_parent">xxxxxx</a></div></div></body>
</html>简单的一批，十几分钟就搞清楚每块该怎么弄了。
下面是css
/**/body {margin: 0;padding: 0;line-height: 1.5em;font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #ffffff;background: #000000;
}a:link, a:visited { color: #ffc64a; text-decoration:none; }
a:active, a:hover { color: #FFFF00; text-decoration: underline; }h1 {margin: 0px;padding: 10px 0;font-size: 26px;color: #d77707;font-weight: normal;
}h2 {margin: 0 0 15px 0;padding: 0 0 10px 0;font-size: 20px;color: #ff9d11;border-bottom: 1px dotted #663e17;
}h3 {margin: 0 0 15px 0;padding: 0 0 10px 0;font-size: 20px;color: #ffc64a;border-bottom: 1px dotted #663e17;
}p {margin: 0px;padding: 0 0 10px 0;text-align: justify;
}.cleaner {clear: both;width: 100%;height: 1px;
}.comment {padding-left: 20px;margin-left: 5px;background: url(images/templatemo_comment_icon.gif) bottom left no-repeat;
}
/* ----- Form ----- */form{margin: 0px;padding: 0px;width: 100%;text-align: right;
}#searchfield{background: none;border: 1px solid #ffffff;color: #ffffff;font-size: 13px;font-variant: normal;height: 15px;line-height: normal;padding: 4px;width: 230px;
}#searchbutton{cursor: pointer;font-size: 12px;font-weight: bold;height: 26px;margin: 0 0 0 7px;padding: 0 6px;text-align: center;vertical-align: bottom;white-space: pre;width: 66px;
}/* end of form *//* menu */
#templatemo_menu_panel{width:100%;height: 59px; margin: 0 auto;color: #ffffff;background: #000000;
}#templatemo_menu_panel #templatemo_menu_section{width: 930px;height: 59px; margin:0 auto;padding: 0 0 0 30px;color: #03a0a6;background: url(images/templatemo_menu_panel_bg.jpg) no-repeat;
}#templatemo_menu_section ul {float: left;width: 930px;margin: 0;padding: 15px 0 0 0;list-style: none;
}#templatemo_menu_section ul li{display: inline;
}#templatemo_menu_section ul li a{float: left;width: 110px;padding: 5px 0;margin-right: 5px;font-size: 12px;font-weight: bold;text-align: center;text-decoration: none;color: #fbe270;border-right: 1px solid #5f3b11;
}#templatemo_menu_section li a:hover, #templatemo_menu_section li .current{color: #ffffff;
}
/* end of menu *//* content and header panel */
#templatemo_header_content_container {clear: both;overflow: hidden;width:100%;margin: 0 auto;background: #000000 url(images/templatemo_content_bg.jpg) top center no-repeat;
}#templatemo_header_content_container #templatemo_header_section{clear: both;width: 960px;height: 150px;margin:0 auto;}#templatemo_header_section #templatemo_title_section{float: left;width: 400px;padding: 90px 0 15px 30px;font-size: 60px;color: #ffffff;
}#templatemo_header_section #templatemo_search_section{float: right;margin-right: 30px;width: 330px;padding: 70px 0 15px 0;
}#templatemo_header_section #templatemo_search_section form{text-align: left;
}#templatemo_header_content_container #templatemo_content{clear: both;height: 100%;width: 930px;padding: 30px 0 0 15px;margin:0 auto;
}#templatemo_content_left {float: left;width: 600px;margin-bottom: 15px;
}#templatemo_content_right {float: right;width: 300px;margin-bottom: 15px;
}/* for left column */
#templatemo_content_left .templatemo_post {width: 598px;padding: 0;padding-bottom: 10px;margin-bottom: 30px;border: 1px solid #191a0d;background: #0b0c04 url(images/templatemo_post_bg.jpg) top right no-repeat;
}* html #templatemo_content_left .templatemo_post {margin-bottom: 15px;
}.templatemo_post .post_title{width: 570px;height: 50px; /* padding 20px + */margin: 0 0 10px 0;padding: 20px 0 5px 30px;font-size: 26px;font-weight: bold;color: #d77707;
}.templatemo_post .post_title .post_info{width: 100%;font-weight: normal;font-size: 12px;color: #acb66c;padding-top: 10px;
}.templatemo_post .post_body{padding: 0 30px 15px 30px;
}.templatemo_post .post_body img{margin-bottom: 15px;border: 5px solid #21240e;
}.templatemo_post .post_comment{padding: 5px 30px;font-weight: bold;
}/* end of left colun *//* for right column */
#templatemo_content_right .templatemo_right_section{clear: both;display:inline-block;width: 248px;padding: 15px 15px 10px 15px;margin-bottom: 30px;background: #0b0c04 url(images/templatemo_right_section_bg.jpg) top center no-repeat; border: 1px solid #191a0d;
}#templatemo_content_right .templatemo_right_section .popular_post {list-style: none;margin: 0;padding: 0;
}
#templatemo_content_right .templatemo_right_section .popular_post li{margin: 0 0 5px 0;padding: 0 0 5px 0;border-bottom: 1px solid #22250e;
}#templatemo_content_right .templatemo_right_section ul{clear: both;margin: 0 0 0 15px;padding: 0px;
}#templatemo_content_right .templatemo_right_section ul li{margin: 0 0 5px 0;
}/* end of right column *//* for bottom palen */
#templatemo_bottom_panel{width:100%;min-height: 250px;margin: 0 auto;border-top: 1px solid #050702;background: #050702 url(images/templatemo_content_bottom.jpg) center bottom no-repeat; }#templatemo_bottom_panel #templatemo_bottom_section{overflow: hidden;height: 100%;width: 930px;margin:0 auto;padding: 40px 0 15px 30px; }#templatemo_bottom_section .templatemo_bottom_section_content {display: inherit;float: left;width: 270px;padding-right: 20px;margin:0 0 15px 10px;
}#templatemo_bottom_section .templatemo_bottom_section_content img{float: left;margin-right: 5px;margin-bottom: 5px;
}.templatemo_bottom_section_content .gallery {list-style: none;margin: 0;padding: 0;background: #000000;
}.templatemo_bottom_section_content .gallery li {padding: 0;float: left;margin: 0 4px 4px 0; width: 80px;height: 70px;border: 3px solid #000000;
}.templatemo_bottom_section_content .gallery img {border: none;
}.templatemo_bottom_section_content .list_section{margin: 0 0 15px 30px;padding: 0;
}
/* end of bottom panel *//* footer */#templatemo_footer_panel{width:100%;height: 50px;margin: 0 auto;background: #040500 url(images/templatemo_footer_bg.jpg) center top no-repeat;border-top: 1px solid #141204;
}#templatemo_footer_panel #templatemo_footer_section{width: 960px;height: 10px;margin:0 auto;padding: 20px 15px; text-align: center;}
/* end of footer */css也不算长，好学得嘞！
嘻嘻(#^.^#)
![[已解决]Vue3+Element-plus使用el-dialog对话框无法显示](https://img-blog.csdnimg.cn/direct/3c03ad7e96624a7eb00ae1f7a1a4d288.png)
