做一个个人博客第一步该怎么做？
好多零基础的同学们不知道怎么迈出第一步。
那么，就找一个现成的模板学一学呗，毕竟我们是高贵的Ctrl c v 工程师。
但是这样也有个问题，那就是，那些模板都，太！复！杂！了！！！！
直接打击了我99%的学习积极性。
直到我找到了这一款极其简单，只有一个html页面和css的个人博客模板。
麻雀虽小，五脏俱全。
基本上有了个人博客所需要的很多基本功能，下一步只要花个一两小时学会它，然后开始加图片美化就完了。
简直爽歪歪，虽然直接用肯定不行，但是拿来当一个学习材料，那还是相当的顺手。
界面看起来是这个样子的。
虽然只有一个页面，但是，像什么标题，导航，侧边栏，快捷菜单，友链，搜索，列表，简介，预览页，就很全。代码也很简单。我们可以先学，然后，再用我们的知识把它完美化，不知不觉就学会了这套技术。
这可比直接下载那些美轮美奂的模板要好的多，看也看不懂，学也学不会。
下载地址在这里↓↓↓↓↓↓
https://download.csdn.net/download/qqhxmdq/88934742
代码我就全贴到这儿了，大家可以看一看。
<!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>Sport Center - free website template</title>
<meta name="keywords" content="free web template, sport center, CSS, HTML, 2 columns" />
<meta name="description" content="Free Website Template - Sport Center" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="tmeplatemo_container">
<div id="templatemo_menu">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="http://www.xxxxxxxx.com" target="_parent">Templates</a></li>
<li><a href="#" target="_parent">Gallery</a></li>
<li><a href="#">Members</a></li>
<li><a href="#" class="last">Contact Us</a></li>
</ul>
</div> <!-- end of menu -->
<div id="templatemo_header_01">
</div> <!-- end of header -->
<!-- ** OR
<div id="templatemo_header_02">
<div id="site_title">Sport Center<span>Your tagline goes here</span></div>
</div> end of header -->
<div id="tmeplatemo_content">
<div id="templatemo_side_column">
<div class="top"></div>
<div class="header_01">News & Events</div>
<div class="news_event_section">
<div class="header_02">Lorem ipsum dolor sit amet</div>
<img src="images/templatemo_image_01.jpg" alt="photo one" />
<p>Donec ut felis libero. Nunc vel libero libero, in dignissim urna. Praesent tempor, arcu at egestas vestibulum, lorem elit viverra velit, sit amet gravida ligula ante et sem.</p>
<div class="button_01"><a href="#">Read more</a></div>
</div>
<div class="news_event_section">
<div class="header_02">Integer in magna nec lacus</div>
<img src="images/templatemo_image_00.jpg" alt="photo two" />
<p>Suspendisse potenti. Aliquam erat volutpat. Mauris tempus massa vitae sem posuere pharetra. Donec eget neque erat, ac venenatis libero. Cras consequat pharetra sem ut imperdiet.</p>
<div class="button_01"><a href="#">Read more</a></div>
</div>
<div class="cleaner"></div>
<div class="bottom"></div>
</div> <!-- end of side column -->
<div id="templatemo_main_column">
<div class="header_01">Welcome to Sport Center</div>
<div class="section_w480">
<div class="image_wrapper fl_img"><img src="images/templatemo_image_02.jpg" alt="photo three" /></div>
<p class="em_text">This Free CSS Template is provided by <a href="http://www.xxxxxxxx.com" target="_parent">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络 淘宝店</a>. You may use this template in your websites. Credit goes to <a href="#" target="_blank">Free Photos</a> for photos used in this template.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae metus quis libero consectetur egestas. In hac habitasse platea dictumst. Suspendisse tempus, metus in semper accumsan, dolor purus imperdiet magna, a iaculis quam justo quis purus. Etiam ut erat enim, et aliquet orci.</p>
<div class="button_01"><a href="#">Read more</a></div>
</div>
<div class="section_w480">
<div class="header_01">Our Activities</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae metus quis libero consectetur egestas. In hac habitasse platea dictumst. Suspendisse tempus, metus in semper accumsan.</p>
<div class="margin_bottom_20"></div>
<div class="section_w160 fl">
<div class="image_wrapper"><img src="images/templatemo_image_03.jpg" alt="image" /></div>
</div>
<div class="section_w270 fr">
<ul class="content_list_01">
<li>Cras urna nisi, porta et gravida blandit, laoreet ornare nunc.</li>
<li>Donec tincidunt sem eget velit cursus sit amet ullamcorper mi vulputate. </li>
</ul>
<div class="margin_bottom_20"></div>
<div class="button_01"><a href="#">Read more</a></div>
</div>
<div class="cleaner"></div>
</div>
</div>
<div class="cleaner"></div>
</div> <!-- end of content -->
<div id="templatemo_footer">
Copyright © 2048 <a href="#">Your Company Name</a> | from <a href="http://www.xxxxxxxx.com" target="_parent">网站模板</a>
<div class="margin_bottom_20"></div>
<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> <!-- end of footer -->
</div> <!-- end of container -->
</body>
</html>简单的一批，十几分钟就搞清楚每块该怎么弄了。
下面是css
/*
CSS Credit: http://www.moobnn.com
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #d4d1c5;
background: #141212 url(images/templatemo_main_bg.jpg) repeat;
}
a:link, a:visited { color: #e8c521; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #e8c521; text-decoration: underline; }
p {
margin: 0px;
padding: 0px;
}
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_15 { clear: both; width: 100%; height: 15px; 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_40 { margin-right: 40px; }
.margin_right_70 { margin-right: 70px; }
.fl { float: left; }
.fr { float: right }
.button_01 a {
clear: both;
display: block;
width: 100px;
height: 21px;
padding-top: 5px;
background: url(images/templatemo_button_01.jpg) no-repeat;
color: #000000;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.header_01 {
clear: both;
color: #fcd82b;
padding: 5px 0 10px 0;
border-bottom: 1px dashed #fcd82b;
margin-bottom: 20px;
font-size: 26px;
}
.header_02 {
clear: both;
color: #ffffff;
padding: 0;
margin-bottom: 5px;
font-size: 14px;
font-weight: bold;
}
.em_text {
color: #ffffff;
}
#tmeplatemo_container {
width: 980px;
margin: 0 auto;
background: #4a483f;
}
/* menu */
#templatemo_menu {
clear: both;
width: 980px;
height: 55px;
background: url(images/templatemo_menu_bg.jpg) repeat-x;
}
#templatemo_menu ul {
margin: 0 auto;
padding: 0px;
width: 790px; /* ( 138 x no. of menu item ) - 38 */
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
width: 100px;
height: 40px;
padding: 15px 38px 0 0;
background: url(images/templatemo_menu_right.jpg) right top no-repeat;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #707070;
outline: none;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #000000;
}
#templatemo_menu li .last {
padding-right: 0px;
background: none;
}
/* end of menu*/
/* header */
#templatemo_header_01 {
clear: both;
width: 980px;
height: 220px;
background:url(images/templatemo_header_bg.jpg) no-repeat;
}
/*----- OR ------*/
#templatemo_header_02 {
clear: both;
width: 980px;
height: 220px;
text-align: center;
background: url(images/templatemo_header_bg_blank.jpg) no-repeat;
}
#templatemo_header_02 #site_title {
padding: 80px 0 0 0;
font-size: 40px;
color: #eccd35;
font-weight: bold;
}
#site_title span {
display: block;
color: #cba810;
margin-top: 20px;
font-size: 16px;
}
/* end of header */
/* contetn */
#tmeplatemo_content {
clear: both;
width: 880px;
padding: 10px 50px;
background: #4a483f;
}
/* side_column */
#templatemo_side_column {
float: left;
position: relative;
width: 260px;
padding: 45px 20px;
background: #424038;
}
#templatemo_side_column .top {
position: absolute;
width: 300px;
height: 45px;
top: 0px;
left: 0px;
background: url(images/templatemo_side_column_top.jpg) no-repeat;
}
#templatemo_side_column .bottom {
position: absolute;
width: 300px;
height: 45px;
bottom: 0px;
left: 0px;
background: url(images/templatemo_side_column_bottom.jpg) no-repeat;
}
#templatemo_side_column img {
border: 5px solid #000000;
margin-bottom: 5px;
}
.news_event_section {
clear: both;
margin-bottom: 30px;
}
.news_event_section p {
margin-bottom: 10px;
}
#templatemo_main_column {
float: right;
padding-top: 50px;
width: 480px;
}
#templatemo_main_column p {
margin-bottom: 15px;
}
.section_w480 {
clear: both;
width: 480px;
margin-bottom: 60px;
}
.section_w160 {
width: 170px;
}
.section_w270 {
width: 270px;
}
.image_wrapper img {
border: 5px solid #000000;
}
.fl_img {
float: left;
margin: 3px 20px 10px 0px;
}
.image_wrapper .fr_img img {
float: right;
margin: 3px 20px 5px 0px;
}
.content_list_01 {
margin: 0 0 0 15px;
padding: 0px;
list-style: decimal-leading-zero;
}
.content_list_01 li {
margin: 0px;
padding: 0 0 10px 0;
}
/* end of content */
/* footer */
#templatemo_footer {
width: 880px;
padding: 80px 50px 0 50px;
margin: 0 auto;
background: #332e2e url(images/templatemo_footer_bg.jpg) no-repeat;
min-height: 130px;
}
#templatemo_footer a {
color: #f6d229;
}
/* end of footer */css也不算长，好学得嘞！
嘻嘻(#^.^#)
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
