分享html模板的大佬,请务必把我当弱智一样地教 T_T

2024-01-19 10:52

本文主要是介绍分享html模板的大佬,请务必把我当弱智一样地教 T_T,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

那么,就找一个现成的模板学一学呗,毕竟我们是高贵的Ctrl c v 工程师。

但是这样也有个问题,那就是,那些模板都,太!复!杂!了!!!!

直接打击了我99%的学习积极性。

直到我找到了这一款极其简单,只有一个html页面和css的个人博客模板。

麻雀虽小,五脏俱全。

基本上有了个人博客所需要的很多基本功能,下一步只要花个一两小时学会它,然后开始加图片美化就完了。

简直爽歪歪,虽然直接用肯定不行,但是拿来当一个学习材料,那还是相当的顺手。

界面看起来是这个样子的。

虽然只有一个页面,但是,像什么标题,导航,侧边栏,快捷菜单,友链,搜索,列表,简介,预览页,就很全。代码也很简单。我们可以先学,然后,再用我们的知识把它完美化,不知不觉就学会了这套技术。

这可比直接下载那些美轮美奂的模板要好的多,看也看不懂,学也学不会。

下载地址在这里↓↓↓↓↓↓

https://download.csdn.net/download/qqhxmdq/88759245

代码我就全贴到这儿了,大家可以看一看。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="Author" content="Author" />
<meta name="Robots" content="index,follow" />
<meta name="Description" content="Description" />
<meta name="Keywords" content="key, words" />
<link rel="stylesheet" type="text/css" href="images/style.css" />
<title>Sonia Template</title>
</head>
<body><div id="bg"><div id="sadrzaj"><div id="toplinks"><a href="#">Home</a><a href="#">Blog</a><a href="#">Forum</a><a href="#">Search</a><a href="#">Submit URL</a><a href="#">Login</a></div><div id="zaglavlje"><div id="title"><a href="#">Sonia Template</a></div><div id="title_info"><p><i>Artice of the week:</i></p><p><b><a href="#">Integrating designs into Content Management Systems</a></b></p></div></div><div id="navigacija"><ul><li><a href="#">Home</a></li><li><a href="#">Blog</a></li><li><a href="#">Partners</a></li><li><a href="#">Forum</a></li><li><a href="#">Design gallery</a></li><li><a href="#">Technology</a></li></ul><div class="lijevo"><p><b>Lorem ipsum</b></p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate.</p></div></div><div id="clanci"><h2><a href="#">About Sonia Template</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br /><p class='datum'>June, 4th 2005 <img src='images/strelica2.gif' width='3px' height='5px' alt='' /> <a href='index.php?id=29'>READ MORE</a></p><h2><a href="#">Just some text filler</a></h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. vel eum iriure dolor in hendrerit in vulputate.</p><br /><p class='datum'>June, 4th 2005 <img src='images/strelica2.gif' width='3px' height='5px' alt='' /> <a href='index.php?id=29'>READ MORE</a></p>						</div><div id="desna_rubrika"><h3>Recent articles</h3><p><a href="#"><img src="images/strelica2.gif" width="3px" height="5px" alt="" /> CSS retrospective</a><a href="#"><img src="images/strelica2.gif" width="3px" height="5px" alt="" /> Open Source Web Design</a><a href="#"><img src="images/strelica2.gif" width="3px" height="5px" alt="" /> Designing a business site</a><a href="#"><img src="images/strelica2.gif" width="3px" height="5px" alt="" /> Creating table shaddows</a><a href="#"><img src="images/strelica2.gif" width="3px" height="5px" alt="" /> CSS coding techniques</a><a href="#"><img src="images/strelica2.gif" width="3px" height="5px" alt="" /> Tabless design?</a><a href="#"><img src="images/strelica2.gif" width="3px" height="5px" alt="" /> Talking about CM systems</a></p><div id="podaci"><p><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict!</a></p><p>Design: Luka Cvrk, <a title="Awsome Web Templates" href="http://www.xxxxxxxx.com/">xxxxxxxx.com</a></p>	</div></div><div id="lijeva_rubrika"><p><b>Lorem Ipsum</b><br />Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a href="#">aliquam erat volutpat.</a> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a href="#">aliquam erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div></div></div>
</body>
</html>

只有106行,简单的一批,十几分钟就搞清楚每块该怎么弄了。

下面是css

/* Sonia Template */body {margin: 0 auto;padding: 0;font: 9pt Arial, Verdana, Sans-Serif;background: #fff;
}a {text-decoration: none;color: #2489DB;
}a:hover {color: #808080;
}a img {border: 0;
}h3 {font-size: 1.3em;margin: 0 0 5px 0;padding: 2px 0px 0px 0px;
}#bg { width: 760px;margin: 0 auto;padding: 5px 10px 10px 10px;background: url(bg.gif) top left no-repeat;
}#sadrzaj {padding-top: 9px;color: #303030;width: 736px;padding-left: 2px;}#toplinks {height: 20px;background: #2489DB;text-align: right;padding-right: 10px;	padding-top: 5px;
}#toplinks a {font-size: 8pt;display: inline;padding-left: 8px;padding-right: 5px;background: url(strelica.gif) left no-repeat;padding-bottom: 3px;margin-right: 5px;color: #fff;
}#toplinks a:hover {border-bottom: 2px solid #fff;	
}#zaglavlje {clear: both;margin: 0px 0 5px 0;height: 70px;background: url(header.gif) repeat-x;
}#title {float: left;font-size: 14pt;font-weight: bold;padding-top: 25px;padding-left: 5px;
}#title_info {float: right;height: auto;padding: 8px;width: 310px;margin: 10px 5px 0 0;border: 2px solid #fff;	background: #FFF5D9;color: #808080;
}#title_info p {margin: 0;
}#navigacija {clear: left;float: left;width: 150px;margin: 0 0 10px 0;padding: 0;font-size: 0.9em;
}#navigacija ul {	list-style: none;width: 150px;margin: 0 0 3px 0;padding: 0;font-size: 1.1em;
}	#navigacija li {margin-bottom: 4px;
}#navigacija li a, #navigacija li a:visited {text-align: right;height: 20px;text-decoration: none;color: #fff;display: block;padding: 6px 8px 0 10px;background: #2489DB;
}	#navigacija li a:hover {background: #A9CAEB;color: #286ea0;
}.lijevo {margin: 2px 0 10px 0;padding: 3px 10px 5px 10px;width: 130px;border-top: 1px solid #DDD;border-bottom: 1px solid #DDD;color: #6B6B6B;background: #eee url(lijevo.gif) repeat-x;
}.lijevo a, .lijevo a:visited {text-decoration: underline;
}#desna_rubrika {float: right;width: 223px;margin: 0 0 10px 0;padding: 5px 13px 20px 10px;border-top: 1px solid #DDD;border-bottom: 1px solid #DDD;background: #eee url(lijevo.gif) repeat-x;color: #5D5D5D;line-height: 1.5em;
}#desna_rubrika p {margin: 0px;font-size: 90%;
}#desna_rubrika h3 {font-size: 9pt;	
}#desna_rubrika a {display: block;height: 12px;padding-bottom: 4px;margin-bottom: 2px;border-bottom: 1px solid #ccc;
}#podaci {margin: 15px 0 0 0;border: 2px solid #fff;background: #E5EFF9 url(plavo.gif);padding: 3px 3px 3px 6px;color: #70C256;
}#podaci a, #podaci a:visited {display: inline;border: none;	
}#clanci {margin:  0 0 5px 155px;padding: 0 10px 5px 6px;line-height: 1.4em;background: url(clanak.gif) repeat-x bottom left;
}#clanci h2 {margin: 0px;padding: 4px 0 4px 0;font-size: 12pt;
}#clanci p {margin: 0;
}.datum {padding-top: 2px;height: 30px;margin: 5px 0 6px 0;border-top: 1px solid #eee;font-size: 80%;text-transform: uppercase;	color: #808080;
}#lijeva_rubrika {margin: 0 250px 20px 155px;border-top: 1px solid #AFCEED;border-bottom: 1px solid #AFCEED;background: #E5EFF9 url(plavo.gif) repeat-x;padding: 5px 6px 5px 6px;line-height: 1.6em;text-align: left;color: #5D5D5D;
}#lijeva_rubrika a, #lijeva_rubrika a:visited {text-decoration: underline;	
}#lijeva_rubrika h2 {font-size: 1.5em;margin: 0 0 0.5em 0;color: #808080;padding-top: 3px;
}#lijeva_rubrika p {padding: 0;margin: 0;
}

 css也不算长,好学得嘞!

嘻嘻(#^.^#)

这篇关于分享html模板的大佬,请务必把我当弱智一样地教 T_T的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

poj3468(线段树成段更新模板题)

题意:包括两个操作:1、将[a.b]上的数字加上v;2、查询区间[a,b]上的和 下面的介绍是下解题思路: 首先介绍  lazy-tag思想:用一个变量记录每一个线段树节点的变化值,当这部分线段的一致性被破坏我们就将这个变化值传递给子区间,大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作,那么就从根节点[1,n]开始调用update函数进行操作,如果刚好执行到一个子节点,

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

【专题】2024飞行汽车技术全景报告合集PDF分享(附原数据表)

原文链接: https://tecdat.cn/?p=37628 6月16日,小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞,这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示,公司准备量产,并计划今年四季度开启预售小鹏汇天分体式飞行汽车,探索分体式飞行汽车城际通勤。阅读原文,获取专题报告合集全文,解锁文末271份飞行汽车相关行业研究报告。 据悉,业内人士对飞行汽车行业

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

uva 1342 欧拉定理(计算几何模板)

题意: 给几个点,把这几个点用直线连起来,求这些直线把平面分成了几个。 解析: 欧拉定理: 顶点数 + 面数 - 边数= 2。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#inc