一个足球粉丝该怎么建个个人博客?

2024-03-09 19:52

本文主要是介绍一个足球粉丝该怎么建个个人博客?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

做一个个人博客第一步该怎么做?

好多零基础的同学们不知道怎么迈出第一步。

那么,就找一个现成的模板学一学呗,毕竟我们是高贵的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 &amp; 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也不算长,好学得嘞!

嘻嘻(#^.^#)

这篇关于一个足球粉丝该怎么建个个人博客?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/791778

相关文章

电脑开机提示krpt.dll丢失怎么解决? krpt.dll文件缺失的多种解决办法

《电脑开机提示krpt.dll丢失怎么解决?krpt.dll文件缺失的多种解决办法》krpt.dll是Windows操作系统中的一个动态链接库文件,它对于系统的正常运行起着重要的作用,本文将详细介绍... 在使用 Windows 操作系统的过程中,用户有时会遇到各种错误提示,其中“找不到 krpt.dll”

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

MySql死锁怎么排查的方法实现

《MySql死锁怎么排查的方法实现》本文主要介绍了MySql死锁怎么排查的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录前言一、死锁排查方法1. 查看死锁日志方法 1:启用死锁日志输出方法 2:检查 mysql 错误

Rsnapshot怎么用? 基于Rsync的强大Linux备份工具使用指南

《Rsnapshot怎么用?基于Rsync的强大Linux备份工具使用指南》Rsnapshot不仅可以备份本地文件,还能通过SSH备份远程文件,接下来详细介绍如何安装、配置和使用Rsnaps... Rsnapshot 是一款开源的文件系统快照工具。它结合了 Rsync 和 SSH 的能力,可以帮助你在 li

电脑密码怎么设置? 一文读懂电脑密码的详细指南

《电脑密码怎么设置?一文读懂电脑密码的详细指南》为了保护个人隐私和数据安全,设置电脑密码显得尤为重要,那么,如何在电脑上设置密码呢?详细请看下文介绍... 设置电脑密码是保护个人隐私、数据安全以及系统安全的重要措施,下面以Windows 11系统为例,跟大家分享一下设置电脑密码的具体办php法。Windo

怎么关闭Ubuntu无人值守升级? Ubuntu禁止自动更新的技巧

《怎么关闭Ubuntu无人值守升级?Ubuntu禁止自动更新的技巧》UbuntuLinux系统禁止自动更新的时候,提示“无人值守升级在关机期间,请不要关闭计算机进程”,该怎么解决这个问题?详细请看... 本教程教你如何处理无人值守的升级,即 Ubuntu linux 的自动系统更新。来源:https://

Ubuntu系统怎么安装Warp? 新一代AI 终端神器安装使用方法

《Ubuntu系统怎么安装Warp?新一代AI终端神器安装使用方法》Warp是一款使用Rust开发的现代化AI终端工具,该怎么再Ubuntu系统中安装使用呢?下面我们就来看看详细教程... Warp Terminal 是一款使用 Rust 开发的现代化「AI 终端」工具。最初它只支持 MACOS,但在 20

LinuxMint怎么安装? Linux Mint22下载安装图文教程

《LinuxMint怎么安装?LinuxMint22下载安装图文教程》LinuxMint22发布以后,有很多新功能,很多朋友想要下载并安装,该怎么操作呢?下面我们就来看看详细安装指南... linux Mint 是一款基于 Ubuntu 的流行发行版,凭借其现代、精致、易于使用的特性,深受小伙伴们所喜爱。对

macOS怎么轻松更换App图标? Mac电脑图标更换指南

《macOS怎么轻松更换App图标?Mac电脑图标更换指南》想要给你的Mac电脑按照自己的喜好来更换App图标?其实非常简单,只需要两步就能搞定,下面我来详细讲解一下... 虽然 MACOS 的个性化定制选项已经「缩水」,不如早期版本那么丰富,www.chinasem.cn但我们仍然可以按照自己的喜好来更换

Ubuntu 怎么启用 Universe 和 Multiverse 软件源?

《Ubuntu怎么启用Universe和Multiverse软件源?》在Ubuntu中,软件源是用于获取和安装软件的服务器,通过设置和管理软件源,您可以确保系统能够从可靠的来源获取最新的软件... Ubuntu 是一款广受认可且声誉良好的开源操作系统,允许用户通过其庞大的软件包来定制和增强计算体验。这些软件