做一个个人博客第一步该怎么做？
好多零基础的同学们不知道怎么迈出第一步。
那么，就找一个现成的模板学一学呗，毕竟我们是高贵的Ctrl c v 工程师。
但是这样也有个问题，那就是，那些模板都，太！复！杂！了！！！！
直接打击了我99%的学习积极性。
直到我找到了这一款极其简单，只有一个html页面和css的个人博客模板。
麻雀虽小，五脏俱全。
基本上有了个人博客所需要的很多基本功能，下一步只要花个一两小时学会它，然后开始加图片美化就完了。
简直爽歪歪，虽然直接用肯定不行，但是拿来当一个学习材料，那还是相当的顺手。
界面看起来是这个样子的。
虽然只有一个页面，但是，像什么标题，导航，侧边栏，快捷菜单，友链，搜索，列表，简介，预览页，就很全。代码也很简单。我们可以先学，然后，再用我们的知识把它完美化，不知不觉就学会了这套技术。
这可比直接下载那些美轮美奂的模板要好的多，看也看不懂，学也学不会。
下载地址在这里↓↓↓↓↓
https://download.csdn.net/download/qqhxmdq/88962119
代码我就全贴到这儿了，大家可以看一看。
<!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>Greenhome Template, Free XHTML CSS Website Template</title>
<meta name="keywords" content="Greenhome Template, Free XHTML CSS Website Layout" />
<meta name="description" content="Greenhome Template, Free XHTML CSS Layout" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="templatmeo_container_outter">
<div id="templatmeo_container_inner_01">
<div id="templatmeo_container_inner_02">
<div id="templatemo_menu">
<ul>
<li><a href="#" class="first">Home</a></li>
<li><a href="#" class="current">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!-- end of menu -->
<div id="templatemo_content">
<div id="content_top"></div>
<div id="content_top_left"></div>
<div class="section_w680 dashed_border_bottom">
<div class="section_w300 dashed_border_right">
<h2><span>01</span>Welcome to Greenhome</h2>
<div class="section_w70">
<img class="image_wrapper" src="images/templatemo_image_02.jpg" alt="Free Template" />
</div>
<div class="section_w220">
<p>This is a free CSS template provided by <a href="http://www.xxxx.com/" target="_parent">xxxx</a> <a href="http://guantaow.taobao.com" target="_blank">xxxx</a>. You may use this template in your websites.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna nisl. Quisque et nulla nec magna laoreet molestie sed eu enim. Nullam sit amet nisi eu ipsum malesuada tristique non sit amet nulla. </p>
<div class="button_01 button_green"><a href="#">Read more</a></div>
</div>
<div class="cleaner"></div>
</div>
<div id="site_title">
</div>
<div class="cleaner"></div>
</div>
<div class="section_w680">
<div class="section_w300 dashed_border_right">
<h2><span>02</span>Lorem ipsum dolor</h2>
<div class="section_w70">
<img class="image_wrapper" src="images/templatemo_image_01.jpg" alt="Web Template" />
</div>
<div class="section_w220">
<p>Praesent vitae nisi sit amet odio pulvinar rutrum sed porta sem. Vestibulum convallis hendrerit feugiat. Morbi non lacus est, sit amet viverra augue. Phasellus adipiscing pharetra ipsum, sit amet auctor erat mollis eget. Nulla facilisi. Phasellus posuere turpis est, eu pulvinar leo. Nullam nec diam purus. Ut semper laoreet orci, id lacinia sem sodales interdum.</p>
<div class="button_01 button_orange"><a href="#">Read more</a></div>
</div>
<div class="cleaner"></div>
</div>
<div class="section_w300">
<h2><span>03</span>Featured Products</h2>
<div class="section_w70">
<img class="image_wrapper" src="images/templatemo_image_02.jpg" alt="CSS Template" />
</div>
<div class="section_w220">
<h3>Donec pellentesque viverra</h3>
<p>Duis pulvinar accumsan sagittis. Suspendisse potenti. Donec ultricies nibh vitae nisl suscipit quis mollis dolor eleifend.</p>
</div>
<div class="cleaner"></div>
<div class="section_w70">
<img class="image_wrapper" src="images/templatemo_image_01.jpg" alt="HTML Template" />
</div>
<div class="section_w220">
<h3>Maecenas ut ante sit amet</h3>
<p>Aenean porttitor tristique sem, nec sollicitudin enim faucibus egestas. Phasellus sit amet ligula sed sem posuere laoreet nec feugiat felis. </p>
<div class="button_01 button_blue"><a href="#">Read more</a></div>
</div>
<div class="cleaner"></div>
</div>
</div>
<div class="cleaner"></div>
<div id="content_bottom"></div>
</div>
<div id="templatemo_footer">
<div class="footer_section left_section">
<h4>Privacy Policy</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna nisl. Quisque et nulla nec magna laoreet molestie sed eu enim.</p>
</div>
<div class="footer_section right_section">
<h4>Partners</h4>
<ul class="footer_list">
<li><a href="http://www.xxxx.com/" target="_parent">xxxx</a></li>
<li><a href="#" target="_parent">Flash Templates</a></li>
<li><a href="#/blog" target="_parent">Web Design Blog</a></li>
</ul>
</div>
<div class="margin_bottom_10"></div>
Copyright © 2024 <a href="#"><strong>Your Company Name</strong></a> |
from <a href="http://www.xxxx.com" target="_parent">xxxx</a> |
Validate <a href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
</div> <!-- end of footer -->
<div class="cleaner"></div>
</div> <!-- end of inner container-->
<div class="cleaner"> </div>
</div> <!-- end of inner container -->
</div> <!-- end of container outter -->
</body>
</html>简单的一批，十几分钟就搞清楚每块该怎么弄了。
下面是css
/*
CSS Credit: http://www.moobnn.com
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #000000;
background: #b9d5ff url(images/templatemo_main_bg.jpg) repeat-x top;
}
a:link, a:visited { color: #000000; text-decoration: underline; font-weight: normal; }
a:active, a:hover { color: #0066FF; text-decoration: none; }
p { margin: 0px; padding: 0 0 10px 0; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }
.margin_right_20 { margin-right: 20px; }
.margin_right_40 { margin-right: 40px; }
.dashed_border_bottom {
border-bottom: 1px dashed #cccccc;
}
.dashed_border_right {
border-right: 1px dashed #cccccc;
}
.button_01 a {
clear: both;
display: block;
width: 195px;
height: 22px;
padding-top: 4px;
padding-left: 10px;
color: #ffffff;
font-size: 12px;
font-weight: normal;
text-decoration: none;
}
.button_01 a:hover {
color: #000000;
}
.button_green {
background: url(images/templatemo_readmore_green.jpg) no-repeat;
}
.button_blue {
background: url(images/templatemo_readmore_blue.jpg) no-repeat;
}
.button_orange {
background: url(images/templatemo_readmore_orange.jpg) no-repeat;
}
.fl { float: left; }
.fr { float: right; }
h1 {
margin: 0px;
padding: 10px 0;
font-size: 34px;
color: #ffffff;
font-weight: normal;
}
h2 {
height: 15px;
margin: 0 0 20px 0;
padding: 18px 0 10px 0;
font-size: 24px;
color: #757575;
font-weight: normal;
letter-spacing: -2px;
background: url(images/templatemo_icon_01.jpg) left bottom no-repeat;
}
h2 span {
float: left;
padding-left: 3px;
padding-right: 10px;
display: block;
color: #ffffff;
}
h3 {
margin: 0;
padding: 0;
font-size: 12px;
color: #000000;
font-weight: bold;
}
h4 {
margin: 0 0 5px 0;
padding: 0;
font-size: 12px;
color: #99FF00;
font-weight: bold;
}
.em_text {
color: #00ffff;
}
.image_wrapper{
margin-top: 3px;
}
.fl_image {
float: left;
margin-right: 10px
}
.fr_image {
float: right;
margin-left: 10px
}
#templatmeo_container_outter {
width: 940px;
padding: 0 10px;
margin: 0 auto;
background: url(images/templatemo_container_outter_bg.png) repeat-y;
}
#templatmeo_container_inner_01 {
width: 940px;
background: url(images/templatemo_container_inner_bottom.jpg) center bottom no-repeat;
}
#templatmeo_container_inner_02 {
width: 940px;
padding-top: 40px;
background: url(images/templatemo_main_bg.jpg) repeat-x;
}
/* menu */
#templatemo_menu {
clear: both;
width: 940px;
padding: 0 10px;
margin-bottom: 34px;
background: url(images/templatemo_menu_bg.jpg) no-repeat;
}
#templatemo_menu ul {
width: 608px;
overflow: hidden;
padding: 0px;
margin: 0px auto;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
height: 24px;
width: 120px;
padding: 1px 0;
font-size: 18px;
text-align: center;
font-weight: normal;
text-decoration: none;
color: #ffffff;
background: url(images/templatemo_menu_right.jpg) right top no-repeat;
outline: none;
border-left: 2px solid #ffffff;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #99FF00;
}
#templatemo_menu li .first {
border: none;
}
/* end of menu */
/* content */
#templatemo_content {
clear: both;
position: relative;
width: 680px;
padding: 0 130px 0 150px;
margin-top: 24px;
margin-bottom: 76px;
background: url(images/templatemo_content_repeat.png) repeat-y;
}
#templatemo_content #content_top {
position: absolute;
top: -24px;
left: 0px;
width: 940px;
height: 24px;
background: url(images/templatemo_content_top.png) no-repeat;
}
#templatemo_content #content_top_left {
position: absolute;
top: 0px;
left: 78px;
width: 30px;
height: 140px;
background: url(images/templatemo_content_top_left.png) no-repeat;
}
#templatemo_content #content_bottom {
position: absolute;
bottom: -36px;
left: 0px;
width: 940px;
height: 36px;
background: url(images/templatemo_content_bottom.png) no-repeat;
}
.section_w680 {
width: 680px;
}
.section_w300 {
float: left;
width: 300px;
padding-right: 19px;
margin-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.section_w300 p {
text-align: justify;
margin-bottom: 10px;
}
.section_w70 {
float: left;
width: 70px;
}
.section_w220 {
float: right;
width: 220px;
}
#site_title {
float: left;
width: 360px;
height: 280px;
margin-right: -20px;
padding-bottom: 20px;
background: url(images/templatemo_logo.jpg) no-repeat;
}
/* end of content */
/* footer */
#templatemo_footer {
clear: both;
overflow: hidden;
width: 720px;
padding: 15px 110px 0 110px;
height: 130px;
text-align: center;
color: #ffffff;
}
#templatemo_footer a {
color: #ffffff;
}
#templatemo_footer .footer_section {
overflow: hidden;
width: 300px;
height: 90px;
}
.left_section {
float: left;
text-align: left;
}
.right_section {
float: right;
text-align: right;
}
.footer_list {
margin: 0px;
padding: 0px;
list-style: none;
}
.footer_list li {
padding: 0px;
margin: 0px;
}
#templatemo_footer .footer_list li a {
color: #ffff00;
text-decoration: none;
}
#templatemo_footer .footer_list li a:hover {
text-decoration: underline;
}
/* end of footer */300多行的css也不算长，好学得嘞！
嘻嘻(#^.^#)
8687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
