响应式个人blog模板.zip资源-CSDN文库

共16个文件

jpg：11个

png：2个

css：1个

版权申诉

193 浏览量 2021-09-24 19:09:40 上传评论收藏 729KB ZIP 举报

响应式个人Blog模板是现代网页设计中非常流行的一种布局方式，它能够自动适应不同设备的屏幕尺寸，确保在手机、平板电脑和桌面电脑等不同设备上都能提供良好的用户体验。这个压缩包“响应式个人blog模板.zip”包含了构建一个响应式博客网站所需的基本组件。我们来看`index.html`文件，这是网站的主页源代码。HTML（超文本标记语言）是网页的基础，用于定义页面结构和内容。在这个模板中，`index.html`可能包含了头部信息、导航栏、博客文章列表、侧边栏小工具以及页脚等内容。响应式设计通常会利用CSS3的媒体查询（Media Queries）来根据设备的视口宽度调整布局。例如，当屏幕尺寸变小时，原本的多列布局可能会变为单列，以适应更小的屏幕。接着是`images`目录，这里存放了网站所需的图片资源。这些图片可能包括博客文章的配图、logo、背景图像或其他装饰性元素。响应式设计中，图片的处理也非常重要，可能需要设置适当的宽度属性，如`max-width: 100%`，确保图片在任何设备上都不会超出其容器的宽度。 `js`目录包含了JavaScript文件，这是实现动态交互功能的关键。JavaScript可以用来添加诸如滚动效果、下拉菜单、表单验证、模态窗口等功能。现代Web开发常使用库和框架，如jQuery、Vue.js或React.js，来简化JavaScript的编写和提高性能。在这个模板中，JavaScript可能用于实现响应式的导航栏、图片懒加载、或者用于在不同屏幕尺寸下隐藏/显示某些元素。 `css`目录存储了样式表文件，这些文件定义了网页的外观和布局。CSS（层叠样式表）负责控制颜色、字体、布局以及所有视觉元素。响应式设计的核心就是CSS，尤其是媒体查询，它们允许我们为不同的设备或屏幕尺寸设置不同的样式规则。例如，我们可以用`@media screen and (max-width: 768px)`这样的查询来指定当屏幕宽度小于或等于768px时应用的样式。这个“响应式个人blog模板.zip”包含了创建一个功能齐全、适应各种设备的个人博客所需的所有基本元素。通过合理地组织HTML结构、巧妙运用CSS和JavaScript，我们可以构建出一个既美观又实用的响应式博客平台，无论用户是在大屏幕的桌面电脑还是小屏幕的移动设备上，都能享受到优质的阅读体验。

资源推荐

资源详情

资源评论

收起资源包目录

响应式个人blog模板.zip （16个子文件）

index.html 6KB

images

ex.jpg 136KB

h_line.jpg 1KB

ph.jpg 3KB

ex02.jpg 153KB

li.jpg 1KB

ex03.png 341KB

photos2.jpg 19KB

logo.jpg 10KB

weixin.jpg 30KB

r_title_bg.jpg 1KB

banner_top.jpg 43KB

5891.png 457B

time.jpg 1KB

modernizr.js 28KB

css

base.css 6KB

<!doctype html> <html> <head> <meta charset="gb2312"> <title>响应式个人博客模板</title> <meta name="keywords" content="个人博客,个人博客模板,响应式,响应式博客模板" /> <meta name="description" content="杨青个人博客，是一个站在web前端设计之路的女程序员个人网站，提供个人博客模板免费资源下载的个人原创网站。" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <link href="css/base.css" rel="stylesheet">  </head> <body> <div class="wrapper"> <header> <h1 id="logo"><a href="/"><img src="images/logo.jpg" width="260" height="60" alt="杨青个人博客"></a></h1> <nav> <ul> <li id="active"><a href="">网站首页</a></li> <li><a href="">关于我</a></li> <li><a href="">慢生活</a></li> <li><a href="">碎言碎语</a></li> <li><a href="">模板分享</a></li> <li><a href="">学无止境</a></li> <li><a href="">留言版</a></li> </ul> </nav> </header> <div class="banner"> <div class="headerPic"><a href="/"><span>杨青个人博客</span></a></div> <div class="websiteDescription"> <h2>渡人如渡己，渡已，亦是渡</h2> <p>当我们被误解时，会花很多时间去辩白。但没有用，没人愿意听，大家习惯按自己的所闻、理解做出判别，每个人其实都很固执。与其努力且痛苦的试图扭转别人的评判，不如默默承受，给大家多一点时间和空间去了解。而我们省下辩解的功夫，去实现自身更久远的人生价值。其实，渡人如渡己，渡已，亦是渡人。</p> </div> </div> <div class="mainContent"> <h2 class="title_tj"> <p>文章<span>推荐</span></p> </h2> <div class="bloglist"> <h3>程序员请放下你的技术情节，与你的同伴一起进步</h3> <figure><img src="images/ex03.png"></figure> <ul> <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话，那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展...</p> </ul> <div class="dateview"><a title="/" href="/" target="_blank" class="readmore">阅读全文>></a><span>2013-11-04</span><span>作者：杨青</span><span>个人博客：[<a href="/news/life/">程序人生</a>]</span></div> <h3>程序员请放下你的技术情节，与你的同伴一起进步</h3> <figure><img src="images/ex.jpg"></figure> <ul> <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话，那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展...</p> </ul> <div class="dateview"><a title="/" href="/" target="_blank" class="readmore">阅读全文>></a><span>2013-11-04</span><span>作者：杨青</span><span>个人博客：[<a href="/news/life/">程序人生</a>]</span></div> <h3>程序员请放下你的技术情节，与你的同伴一起进步</h3> <figure><img src="images/ex02.jpg"></figure> <ul> <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话，那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展...</p> </ul> <div class="dateview"><a title="/" href="/" target="_blank" class="readmore">阅读全文>></a><span>2013-11-04</span><span>作者：杨青</span><span>个人博客：[<a href="/news/life/">程序人生</a>]</span></div> <h3>程序员请放下你的技术情节，与你的同伴一起进步</h3> <figure><img src="images/ex03.png"></figure> <ul> <p>如果说掌握一门赖以生计的技术是技术人员要学会的第一课的话，那么我觉得技术人员要真正学会的第二课，不是技术，而是业务、交流与协作，学会关心其他工作伙伴的工作情况和进展...</p> </ul> <div class="dateview"><a title="/" href="/" target="_blank" class="readmore">阅读全文>></a><span>2013-11-04</span><span>作者：杨青</span><span>个人博客：[<a href="/news/life/">程序人生</a>]</span></div> </div> </div> <div class="sidebar"> <div class="news"> <h3> <p>最新<span>文章</span></p> </h3> <ul class="rank"> <li><a href="/" title="Column 三栏布局个人网站模板" target="_blank">Column 三栏布局个人网站模板</a></li> <li><a href="/" title="with love for you 个人网站模板" target="_blank">with love for you 个人网站模板</a></li> <li><a href="/" title="免费收录网站搜索引擎登录口大全" target="_blank">免费收录网站搜索引擎登录口大全</a></li> <li><a href="/" title="做网站到底需要什么?" target="_blank">做网站到底需要什么?</a></li> <li><a href="/" title="企业做网站具体流程步骤" target="_blank">企业做网站具体流程步骤</a></li> <li><a href="/" title="建站流程篇——教你如何快速学会做网站" target="_blank">建站流程篇——教你如何快速学会做网站</a></li> <li><a href="/" title="box-shadow 阴影右下脚折边效果" target="_blank">box-shadow 阴影右下脚折边效果</a></li> <li><a href="/" title="打雷时室内、户外应该需要注意什么" target="_blank">打雷时室内、户外应该需要注意什么</a></li> </ul> <h3 class="ph"> <p>点击<span>排行</span></p> </h3> <ul class="paih"> <li><a href="/" title="Column 三栏布局个人网站模板" target="_blank">Column 三栏布局个人网站模板</a></li> <li><a href="/" title="withlove for you 个人网站模板" target="_blank">with love for you 个人网站模板</a></li> <li><a href="/" title="免费收录网站搜索引擎登录口大全" target="_blank">免费收录网站搜索引擎登录口大全</a></li> <li><a href="/" title="做网站到底需要什么?" target="_blank">做网站到底需要什么?</a></li> <li><a href="/" title="企业做网站具体流程步骤" target="_blank">企业做网站具体流程步骤</a></li> </ul> <h3 class="links"> <p>友情<span>链接</span></p> </h3> <ul class="website"> <li><a href="/">个人博客</a></li> <li><a href="/">谢泽文个人博客</a></li> <li><a href="/">3DST技术网</a></li> <li><a href="/">思衡网络</a></li> </ul> <div class="guanzhu">扫描二维码关注<span>杨青博客</span>官方微信账号</div> <a href="/" class="weixin"><img src="images/weixin.jpg"></a> </div> </div> <div class="clearfloat"></div> <footer> <ul> Designed by <a href="/" title="杨青个人博客">DanceSmile</a> </ul> </footer> </div> </body> </html>

评论收藏

内容反馈

版权申诉