分享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

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.