一个足球粉丝该怎么建个个人博客？
做一个个人博客第一步该怎么做？
好多零基础的同学们不知道怎么迈出第一步。
那么，就找一个现成的模板学一学呗，毕竟我们是高贵的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也不算长，好学得嘞！
嘻嘻(#^.^#)
相关文章：
一个足球粉丝该怎么建个个人博客？
做一个个人博客第一步该怎么做？ 好多零基础的同学们不知道怎么迈出第一步。 那么，就找一个现成的模板学一学呗，毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题，那就是，那些模板都，太！…...
缩放算法优化步骤详解
添加链接描述 背景 假设数据存放在在unsigned char* m_pData 里面，宽和高分别是：m_nDataWidth m_nDataHeight 给定缩放比例：fXZoom fYZoom，返回缩放后的unsigned char* dataZoom 这里采用最简单的缩放算法即： 根据比…...
[axios]使用指南
axios使用指南 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios 安装 npm安装 $ npm install axios 使用cdn <script src"https://unpkg.com/axios/dist/axios.min.js"></script> axios API axios(config)…...
HTML5基础2
drag 可以把拖放事件拆分成4个步骤 设置元素为可拖放。为了使元素可拖动，把 draggable 属性设置为 true 。 <img draggable"true"> 拖动什么。ondragstart 和 setData() const dragestart (ev)>{ev.dataTransfer.setData(play,ev.target.id)} …...
数据结构与算法-希尔排序
引言 在计算机科学中，数据结构和算法是构建高效软件系统的基石。而排序算法作为算法领域的重要组成部分，一直在各种应用场景中发挥着关键作用。今天我们将聚焦于一种基于插入排序的改进版本——希尔排序（Shell Sort），深…...
蓝桥杯算法错题记录
这里写目录标题 本文还在跟新，最新更新时间24/3/91. nextInt () next() nextLine() 的注意事项2 . 转换数据类型int ,string,charint -> string , charstring -> int ,charchar -> int , string 进制转换十六进制转化为10 进制 最大公约数 本文还在跟新&am…...
【Python 图像处理 PIL 系列 13 -- PIL 及 Image.convert 函数介绍】
文章目录 Python PIL 介绍PIL 使用介绍PIL convert 介绍PIL convert 使用示例 Python PIL 介绍 PIL 是 Python Image Library 的简称。PIL 库中提供了诸多用来处理图片的模块，可以对图片做类似于 PS（Photoshop） 的编辑。比如：改变…...
使用docker datascience-notebook进行数据分析
Jupyter/datascience-notebook 简介 jupyter/datascience-notebook 是 Docker Hub 上可用的 Docker 镜像：https://hub.docker.com/。该镜像提供了一个开箱即用的环境，用于数据科学任务，包括： Jupyter Notebook: 一个基于 Web 的…...
VR全景技术在VR看房中有哪些应用，能带来哪些好处
引言： 随着科技的不断发展，虚拟现实（VR）技术在房地产行业中的应用也越来越广泛。其中，VR全景技术在VR看房中的运用尤为突出。今天，让我们一起深入探讨VR全景技术在VR看房中的应用及其带来的种种好处。 一、…...
Winform窗体随着屏幕的DPI缩放，会引起窗体变形及字体变形，superTabControl标签字体大小不匹配
一、前言 superTabControl做的浏览器标签（cefsharp）在缩放比例（125%，150%时字体不协调） 物联网浏览器，定制浏览器，多媒体浏览器（支持H264）参考栏目文章即可 二、配置参数 app.manifest参数 dpiAware =true <application xmlns="urn:schemas-microsoft-c…...
java网络编程 01 IP，端口，域名，TCP/UDP, InetAddress
01.IP 要想让网络中的计算机能够互相通信，必须为计算机指定一个标识号，通过这个标识号来指定要接受数据的计算机和识别发送的计算机，而IP地址就是这个标识号，也就是设备的标识。 ip地址组成： ip地址分类：…...
第十篇 - 如何利用人工智能技术做好营销流量整形管理？（Traffic Shaping）- 我为什么要翻译介绍美国人工智能科技巨头IAB公司
IAB平台，使命和功能 IAB成立于1996年，总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司，互动广告局（IAB- the Interactive Advertising Bureau）自1996年成立以来，先…...
npm ERR! errno -13具体问题处理
npm ERR! errno -13具体问题处理 出现问题的报错 npm ERR! code EACCES npm ERR! syscall open npm ERR! path /Users/xxxx/.npm/_cache/index-v5/c6/06/xxxxx npm ERR! errno -13 npm ERR! npm ERR! Your cache folder contains root-owned files, due to a bug in npm ERR! …...
【Python】3. 基础语法(2) -- 语句篇
顺序语句 默认情况下, Python 的代码执行顺序是按照从上到下的顺序, 依次执行的. print("1") print("2") print("3")执行结果一定为 “123”, 而不会出现 “321” 或者 “132” 等. 这种按照顺序执行的代码, 我们称为 顺序语句. 这个顺序是很关…...
IPsec VPN之安全联盟
一、何为安全联盟 IPsec在两个端点建立安全通信，此时这两个端点被称为IPsec对等体。安全联盟，即SA，是指通信对等体之间对某些要素的约定，定义了两个对等体之间要用何种安全协议、IP报文的封装方式、加密和验证算法。SA是IPsec的基…...
012集——显示高考天数倒计时——vba实现
以下代码实现高考倒计时： Sub 高考倒计时() 高考日期 CDate("06,07," & Year(Date)) If Date > 高考日期 Then高考日期 CDate("06-07-" & Year(Date) 1) End If 年月日 Year(Date) & "年" & Month(Date) &am…...
1.1 深度学习和神经网络
首先要说的是：深度学习的内容，真的不难。你要坚持下去。 神经网络 这就是一个神经网络。里面的白色圆圈就是神经元。神经元是其中最小的单位。 神经网络 单层神经网络： 感知机 （双层神经网络） 全连接层： …...
sentinel docker 基础配置学习
1：去官网下载 Releases alibaba/Sentinel GitHub 2：保存到linux 3：编写dockerfile FROM openjdk:8-jreLABEL authors"xxx" #第二步创建一个文件夹Z RUN mkdir /app #第三步复制jar 到app 下 COPY xxxxxx-1.8.7.jar /app/#第四…...
与缓存相关的状态码
与缓存相关的 HTTP 状态码主要涉及客户端和服务器之间对资源缓存的处理和验证，以下是一些常见的与缓存相关的状态码： 1. **200 OK**： - 当服务器成功处理了客户端的请求时，会返回状态码 200 OK。这意味着请求成功，…...
影刀_如何点击桌面图片上的指定区域
问题：如图，桌面上有一张打开的图片，如何点击“J&T极兔快递”的左上角和右下角？ 总体流程： 1、用“影刀离线OCR”指令获取目标区域坐标值。 分别是：x1,y1,x2,y2 2、用快捷键ctrlalt键获取图片左上角的…...
AGI因果能力评估白皮书（工信部AI安全重点实验室内部版·限发200份）
第一章：AGI因果推理能力评估的理论基础与战略意义 2026奇点智能技术大会(https://ml-summit.org) 通用人工智能（AGI）的核心跃迁不在于模式匹配的精度，而在于能否构建可迁移、可解释、可干预的因果模型。因果推理能力是AGI实现真…...
CSS如何消除图片下方多余间隙_设置display-block改变盒模型
图片下方空白源于img默认inline导致的基线对齐；display:block最直接有效，vertical-align:middle等有兼容性与场景限制，font-size:0或line-height:0副作用大。图片下方空白是行内元素的基线对齐导致的默认情况下 <img> 是行内元素&#…...
JavaScript正则表达式实战：从EDUCODER关卡解析到日常开发应用
JavaScript正则表达式实战：从EDUCODER关卡解析到日常开发应用 正则表达式就像程序员的瑞士军刀，能在文本处理中解决各种棘手问题。第一次接触正则时，那些看似神秘的符号组合让我望而生畏，直到在EDUCODER平台通过实战关卡逐步掌握…...
从Linux到Uboot：手把手带你理解DM驱动模型的迁移与实战配置
从Linux到Uboot：深入解析DM驱动模型的迁移与实战配置 1. 嵌入式开发者的跨平台驱动认知重构 对于熟悉Linux设备驱动开发的工程师而言，初次接触Uboot的Driver Model(DM)架构往往会经历一段认知调适期。这种调适本质上是从一个成熟完备的驱动框架向一个精简…...
LangGraph 并行执行优化：如何提升多智能体任务处理效率？
第一部分：引言与基础 (Introduction & Foundation) 1. 引人注目的标题 (Compelling Title) 主标题： LangGraph 并行执行优化：从单节点链式 → 百万级 Token 吞吐量的多智能体系统设计副标题： 解锁 ConditionalBranch、ParallelMap、AsyncAgent、StreamMode、Executor、…...
终极指南：HandheldCompanion虚拟控制器连接与性能优化全攻略
终极指南：HandheldCompanion虚拟控制器连接与性能优化全攻略 【免费下载链接】HandheldCompanion ControllerService 项目地址: https://gitcode.com/gh_mirrors/ha/HandheldCompanion HandheldCompanion是一款专为Windows手持游戏设备设计的强大控制器服务工…...
MTools使用指南：整合图片处理、音视频编辑和AI智能工具
MTools使用指南：整合图片处理、音视频编辑和AI智能工具 1. MTools简介与核心功能 1.1 什么是MTools？ MTools是一款现代化桌面工具集，将图片处理、音视频编辑、AI智能工具和开发辅助功能整合到一个界面精美的应用中。它就像数字工作台上一把…...
从一次失败的下载说起：给运维新手的Linux HTTPS工具链兼容性自查清单
从一次失败的下载说起：给运维新手的Linux HTTPS工具链兼容性自查清单 那天凌晨两点，服务器上的自动化脚本突然报错，屏幕上一行刺眼的红色文字让我瞬间清醒："SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 unrecognized name&qu…...
PSoC Creator硬件配置避坑指南：以LED控制为例（CY8C5868AXI-LP035芯片）
PSoC Creator硬件配置避坑指南：以LED控制为例（CY8C5868AXI-LP035芯片） 在嵌入式开发领域，PSoC Creator作为一款强大的集成开发环境，为开发者提供了硬件和固件协同设计的独特体验。然而，对于初次接触PSoC Cr…...
【LaTeX实战】跨越语言障碍：精准处理参考文献中的俄文与西班牙文人名
1. 当LaTeX遇上多语言人名：问题诊断与场景还原 第一次在LaTeX文档里遇到俄文人名"Дмитрий"编译失败时，我盯着报错信息发了半小时呆。学术写作本就够头疼了，参考文献里突然冒出的西里尔字母更是让人崩溃。这种情况太常见了—…...