我真是服了!你们刚开始学习的时候也是造火箭吗?能不能有一个简单的纯纯纯html模板给我学学,真的看不懂好嘛!

本文主要是介绍我真是服了!你们刚开始学习的时候也是造火箭吗?能不能有一个简单的纯纯纯html模板给我学学,真的看不懂好嘛!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

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

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

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

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

麻雀虽小,五脏俱全。

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

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

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head><title>Free CSS template Collect from xxxxx.com</title><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><link rel="shortcut icon" href="css/images/favicon.ico" /><link rel="stylesheet" href="css/style.css" type="text/css" media="all" /><!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><script src="js/png-fix.js" type="text/javascript" charset="utf-8"></script><![endif]--><script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery.jcarousel.js" type="text/javascript" charset="utf-8"></script><script src="js/cufon-yui.js" type="text/javascript" charset="utf-8"></script><script src="js/Arial.font.js" type="text/javascript" charset="utf-8"></script><script src="js/js-func.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- header -->
<div id="header" class="center"><h1 id="logo" class="notext"><a href="#">Software Company</a></h1><div class="cl">&nbsp;</div>
</div>
<!-- end header -->
<!-- shell -->
<div class="shell"><!-- slider --><div id="slider"><!-- slider content --><div class="content"><ul><li><img src="css/images/slider-image.gif" alt="" class="slide-image" /><div class="text-container"><h2>Lorem ipsum dolor sit amet.</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur ante vel augue egestas ac accumsan nunc sollicitudin. Fusce gravida vehicula neque, vitae fringilla ante aliquet in.</p><a href="#" class="btn"><span>read more</span></a><div class="cl">&nbsp;</div></div><div class="cl">&nbsp;</div></li><li><img src="css/images/slider-image.gif" alt="" class="slide-image" /><div class="text-container"><h2>Lorem ipsum dolor sit amet.</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur ante vel augue egestas ac accumsan nunc sollicitudin. Fusce gravida vehicula neque, vitae fringilla ante aliquet in.</p><a href="#" class="btn"><span>read more</span></a><div class="cl">&nbsp;</div></div><div class="cl">&nbsp;</div></li><li><img src="css/images/slider-image.gif" alt="" class="slide-image" /><div class="text-container"><h2>Lorem ipsum dolor sit amet.</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur ante vel augue egestas ac accumsan nunc sollicitudin. Fusce gravida vehicula neque, vitae fringilla ante aliquet in.</p><a href="#" class="btn"><span>read more</span></a><div class="cl">&nbsp;</div></div><div class="cl">&nbsp;</div></li></ul></div><!-- end slider content --><!-- slider navigation --><div class="nav"><a href="#" id="up" class="notext">&nbsp;</a><a href="#" id="down" class="notext">&nbsp;</a></div><!-- end slider navigation --></div><!-- end slider --><div class="copyrights">Collect from <a href="http://www.xxxxx.com/" >xxxxx</a> <a href="http://guantaow.taobao.com" target="_blank">xxxxx</a></div><!-- navigation --><div id="navigation"><ul><li><a href="#" class="active"><span>Home</span></a></li><li><a href="#"><span>About</span></a></li><li><a href="#"><span>Products</span></a></li><li><a href="#"><span>Services</span></a></li><li><a href="#"><span>Blog</span></a></li><li><a href="#"><span>Contact</span></a></li></ul></div><!-- end navigation --><!-- main --><div id="main"><!-- content --><div id="content" class="left"><!-- welcome  --><div class="welcome"><h2>Welcome</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lobortis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec mi nisl, sollicitudin eget hendrerit eu, molestie in odio. Suspendisse quis orci vitae purus scelerisque porttitor sollicitudin porttitor sem.</p></div><!-- end welcome  --><!-- news --><div class="news"><!-- news item --><div class="news-item"><span class="news-pointer">1</span><div class="news-body"><h3>Vehicula neque</h3><a href="#" class="btn"><span><em>read more</em></span></a><div class="cl">&nbsp;</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lobortis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec mi nisl, sollicitudin eget hendrerit eu, molestie in odio. Suspendisse quis orci vitae purus scelerisque porttitor sollicitudin porttitor sem.</p></div><div class="cl">&nbsp;</div></div><!-- end news item --><!-- news item --><div class="news-item"><span class="news-pointer">2</span><div class="news-body"><h3>Primis in faucibus luctus</h3><a href="#" class="btn"><span><em>read more</em></span></a><div class="cl">&nbsp;</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lobortis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p></div><div class="cl">&nbsp;</div></div><!-- end news item --><!-- news item --><div class="news-item"><span class="news-pointer">3</span><div class="news-body"><h3>Nulla lovortis cubilia</h3><a href="#" class="btn"><span><em>read more</em></span></a><div class="cl">&nbsp;</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lobortis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec mi nisl, sollicitudin eget hendrerit eu, molestie in odio. Suspendisse quis orci vitae purus scelerisque porttitor sollicitudin porttitor sem.</p></div><div class="cl">&nbsp;</div></div><!-- end news item --></div><!-- end news --></div><!-- end content --><!-- sidebar --><div id="sidebar" class="right"><!-- blog roll --><div class="blog-roll"><a href="#" class="rss-feed notext">&nbsp;</a><h2>Blog Roll</h2><div class="cl">&nbsp;</div><!-- blog roll item --><div class="blog-item"><h4><a href="#">Nulla at lobortis mauris.</a></h4><span class="blog-date">23.05.09</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lobortis mauris.</p></div><!-- end blog roll item --><!-- blog roll item --><div class="blog-item"><h4><a href="#">Ipsum dolor sit</a></h4><span class="blog-date">23.05.09</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lobortis mauris.</p></div><!-- end blog roll item --><!-- blog roll item --><div class="blog-item"><h4><a href="#">Suspedisse quis orci vitae</a></h4><span class="blog-date">23.05.09</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lobortis mauris.</p></div><!-- end blog roll item --></div><!-- end blog roll --><!-- contact --><div class="contact"><h2>Contact</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lobortis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.</p></div><!-- end contact --></div><!-- end sidebar --><div class="cl">&nbsp;</div></div><!-- end main --><!-- footer --><div id="footer"><p class="left"><a href="#">TERMS OF USE</a><span>|</span><a href="#">PRIVACY POLICY</a></p><p class="right">&copy; Sitename.com. Collect form <a href="http://www.xxxxx.com" target="_blank" title="The Sweetest CSS Templates WorldWide">xxxxx</a></p></div><!-- end footer --></div>
<!-- end shell -->
<script type="text/javascript" charset="utf-8">Cufon.now();
</script>
</body>
</html>

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

js和css就不往上贴了。大家感兴趣可以下下来看一下哈。

嘻嘻(#^.^#)

这篇关于我真是服了!你们刚开始学习的时候也是造火箭吗?能不能有一个简单的纯纯纯html模板给我学学,真的看不懂好嘛!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

如何使用Python实现一个简单的window任务管理器

《如何使用Python实现一个简单的window任务管理器》这篇文章主要为大家详细介绍了如何使用Python实现一个简单的window任务管理器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 任务管理器效果图完整代码import tkinter as tkfrom tkinter i

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...