【免费】灰色简洁扁平化设计博客整站模板_灰色简洁扁平化博客整站幻灯大气菜单jquery交互设计案例html.rar资源-CSDN文库

共500个文件

jpg：207个

png：136个

gif：79个

需积分: 0 2 浏览量 2023-09-12 08:48:17 上传评论收藏 9.65MB RAR 举报

这个压缩包文件包含的是一款基于HTML的灰色简洁扁平化设计的博客整站模板，适合用于创建具有现代感和个人风格的在线博客。该模板利用了jQuery库和一系列CSS样式表来实现动态效果和美观的布局。我们来看一下这个模板的核心技术： 1. **HTML**：这是网站的基础结构语言，定义了网页的内容和布局。描述中提到“html”，意味着这个模板是用HTML5构建的，可能包含了语义化元素和新特性，如<section>、<article>等，以提高网页的可读性和SEO优化。 2. **CSS**：样式表文件包括style.css和其他多个特定功能的CSS文件，如： - **jquery.fancybox-1.3.4.css**：这与jQuery的Fancybox插件相关，用于创建弹出式图像画廊或媒体查看器，为用户提供沉浸式的体验。 - **nivo-slider.css**：Nivo Slider是一种流行的jQuery滑块插件，用于在网页上展示图片或内容滑动效果，增加视觉吸引力。 - **content_carousel.css**：内容轮播样式，可能用于首页或其他页面的特色内容展示，使用户能轻松浏览多个项目。 - **vertical_sliding_accordion.css**：垂直滑动的折叠菜单样式，通常用于导航菜单，节省空间并提供互动性。 - **ie7.css**、**ie8.css**、**ie.css**：这些是针对Internet Explorer浏览器（尤其是较旧版本）的样式修复，因为IE对CSS的支持有时与其他现代浏览器不同，需要额外的兼容性处理。 3. **jQuery**：这是一种广泛使用的JavaScript库，简化了DOM操作、事件处理和动画效果。在这个模板中，jQuery可能被用来实现交互功能，如幻灯片、滑动菜单和内容轮播等。 4. **jQuery插件**：除了Fancybox和Nivo Slider，模板可能还使用了其他jQuery插件来增强用户体验，例如导航菜单的交互效果、表单验证等。此模板的设计理念是“灰色简洁扁平化”，这意味着它采用的是无过多装饰、清晰易读的界面设计，这种设计趋势在现代网页设计中非常流行，因为它提高了内容的可读性，并且在各种设备上都有良好的表现。这款博客整站模板通过HTML5、CSS3和jQuery技术，结合扁平化设计和动态效果，提供了用户友好的界面和丰富的交互功能，适用于个人博客或者内容展示型网站。开发者可以依据自己的需求进行定制，添加自定义内容，调整颜色方案，或集成更多的功能。

资源推荐

资源详情

资源评论

收起资源包目录

灰色简洁扁平化设计博客整站模板_灰色简洁扁平化博客整站幻灯大气菜单jquery交互设计案例html.rar （500个子文件）

style.css 44KB

jquery.fancybox-1.3.4.css 9KB

nivo-slider.css 4KB

content_carousel.css 3KB

vertical_sliding_accordion.css 3KB

ie7.css 1KB

reset.css 1KB

ie8.css 721B

jcarousel.css 558B

ie.css 63B

OpenSans-Semibold.eot 19KB

OpenSans.eot 19KB

tf_260x120_v2.gif 19KB

tutorials_125x125_v1.gif 10KB

gr_125x125_v4.gif 10KB

22_s.gif 3KB

23_s.gif 3KB

15_s.gif 2KB

2_s.gif 2KB

35_s.gif 2KB

30_s.gif 2KB

9_s.gif 2KB

43_s.gif 2KB

13_s.gif 2KB

18_s.gif 2KB

1_s.gif 2KB

38_s.gif 2KB

7_s.gif 2KB

42_s.gif 2KB

11_s.gif 2KB

20_s.gif 2KB

19_s.gif 2KB

17_s.gif 2KB

44_s.gif 1KB

28_s.gif 1KB

25_s.gif 1KB

21_s.gif 1KB

46_s.gif 1KB

16_s.gif 1KB

8_s.gif 1KB

4_s.gif 1KB

12_s.gif 1KB

40_s.gif 1KB

loading.gif 1KB

32_s.gif 1KB

27_s.gif 1KB

45_s.gif 1KB

14_s.gif 1KB

34_s.gif 1KB

24_s.gif 1KB

31_s.gif 931B

39_s.gif 861B

41_s.gif 831B

6_s.gif 825B

3_s.gif 776B

26_s.gif 741B

48_s.gif 635B

10_s.gif 586B

5_s.gif 494B

29_s.gif 450B

37_s.gif 441B

36_s.gif 326B

arrow_img_tab.gif 316B

vertical_slider_line.gif 293B

carousel_nav_line.gif 277B

bird.gif 205B

47_s.gif 159B

nav_control_bg.gif 131B

close.gif 97B

Cinnabar.gif 90B

Mauvelous.gif 90B

East_Side.gif 90B

Di_Serria.gif 90B

Viking.gif 90B

Santa_Fe.gif 90B

33_s.gif 90B

Gulf_Stream.gif 90B

Hillary.gif 90B

Husk.gif 90B

Manatee.gif 90B

Boulder.gif 90B

Green_Smoke.gif 90B

arrows.gif 67B

right_bg_r.gif 66B

left_bg_r.gif 57B

b_next.gif 56B

b_prev.gif 56B

h_dotted.gif 54B

main_bg_r.gif 51B

blank.gif 43B

h_line.gif 43B

home3.html 42KB

home2.html 42KB

typography.html 42KB

home4.html 40KB

portfolio_in.html 39KB

blog_in.html 39KB

portfolio3.html 38KB

portfolio4.html 38KB

portfolio2.html 38KB

共 500 条

<!DOCTYPE html> <html> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# githubog: http://ogp.me/ns/fb/githubog#"> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery.BlackAndWhite/LICENSE.txt at 8ee84647fe36d05f555a569086f21c81641bc4ea · GianlucaGuarini/jQuery.BlackAndWhite · GitHub</title> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub" /> <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <meta content="authenticity_token" name="csrf-param" /> <meta content="qm3nm+D5qhVXHYGMxgwS/S9k/KMSCBwsIMoNdRjUZjM=" name="csrf-token" /> <link href="https://a248.e.akamai.net/assets.github.com/stylesheets/bundles/github-3b88ba716cf7cea0b149db6ded551c6235cd3a3b.css" media="screen" rel="stylesheet" type="text/css" /> <link href="https://a248.e.akamai.net/assets.github.com/stylesheets/bundles/github2-9d7659c12d7dfbdfcf4d5f2c6d01adc9dd4577af.css" media="screen" rel="stylesheet" type="text/css" /> <script src="https://a248.e.akamai.net/assets.github.com/javascripts/bundles/frameworks-a450c7f907bdc1ee6b362ab1ecca811c761fd259.js" type="text/javascript"></script> <script defer="defer" src="https://a248.e.akamai.net/assets.github.com/javascripts/bundles/github-6794f2c277257830cc1fb49dbcb48c0932ca8a08.js" type="text/javascript"></script> <link rel='permalink' href='/GianlucaGuarini/jQuery.BlackAndWhite/blob/8ee84647fe36d05f555a569086f21c81641bc4ea/LICENSE.txt'> <meta property="og:title" content="jQuery.BlackAndWhite"/> <meta property="og:type" content="githubog:gitrepository"/> <meta property="og:url" content="https://github.com/GianlucaGuarini/jQuery.BlackAndWhite"/> <meta property="og:image" content="https://a248.e.akamai.net/assets.github.com/images/gravatars/gravatar-140.png?1334862345"/> <meta property="og:site_name" content="GitHub"/> <meta property="og:description" content="jQuery.BlackAndWhite - This plug-in can easily convert every colored image (in an html page) into a B&W greyscale image."/> <meta name="description" content="jQuery.BlackAndWhite - This plug-in can easily convert every colored image (in an html page) into a B&W greyscale image." /> <link href="https://github.com/GianlucaGuarini/jQuery.BlackAndWhite/commits/8ee84647fe36d05f555a569086f21c81641bc4ea.atom" rel="alternate" title="Recent Commits to jQuery.BlackAndWhite:8ee84647fe36d05f555a569086f21c81641bc4ea" type="application/atom+xml" /> </head> <body class="logged_out page-blob windows vis-public env-production " data-blob-contribs-enabled="yes"> <div id="wrapper"> <div id="header" class="true clearfix"> <div class="container clearfix"> <a class="site-logo" href="https://github.com/">  <img alt="GitHub" class="github-logo-4x" height="30" src="https://a248.e.akamai.net/assets.github.com/images/modules/header/logov7@4x.png?1337118066" /> <img alt="GitHub" class="github-logo-4x-hover" height="30" src="https://a248.e.akamai.net/assets.github.com/images/modules/header/logov7@4x-hover.png?1337118066" /> </a>  <ul class="top-nav logged_out"> <li class="pricing"><a href="https://github.com/plans">Signup and Pricing</a></li> <li class="explore"><a href="https://github.com/explore">Explore GitHub</a></li> <li class="features"><a href="https://github.com/features">Features</a></li> <li class="blog"><a href="https://github.com/blog">Blog</a></li> <li class="login"><a href="https://github.com/login?return_to=%2FGianlucaGuarini%2FjQuery.BlackAndWhite%2Fblob%2F8ee84647fe36d05f555a569086f21c81641bc4ea%2FLICENSE.txt">Login</a></li> </ul> </div> </div> <div class="site hfeed" itemscope itemtype="http://schema.org/WebPage"> <div class="container hentry"> <div class="pagehead repohead instapaper_ignore readability-menu"> <div class="title-actions-bar"> <ul class="pagehead-actions"> <li> <span class="watch-button"><a href="/login?return_to=%2FGianlucaGuarini%2FjQuery.BlackAndWhite" class="minibutton btn-watch js-toggler-target entice tooltipped leftwards" title="You must be logged in to use this feature" rel="nofollow"><span class="icon"></span> Watch</a><a class="social-count js-social-count" href="/GianlucaGuarini/jQuery.BlackAndWhite/watchers">28</a></span> </li> <li> <a href="/login?return_to=%2FGianlucaGuarini%2FjQuery.BlackAndWhite" class="minibutton btn-fork js-toggler-target fork-button entice tooltipped leftwards" title="You must be logged in to use this feature" rel="nofollow"><span class="icon"></span>Fork</a><a href="/GianlucaGuarini/jQuery.BlackAndWhite/network" class="social-count">11</a> </li> </ul> <h1 itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="entry-title public"> <span class="repo-label"><span>public</span></span> <span class="mega-icon mega-icon-public-repo"></span> <span class="author vcard"> <a href="/GianlucaGuarini" class="url fn" itemprop="url" rel="author"> <span itemprop="title">GianlucaGuarini</span> </a></span> / <strong><a href="/GianlucaGuarini/jQuery.BlackAndWhite" class="js-current-repository">jQuery.BlackAndWhite</a></strong> </h1> </div> <ul class="tabs"> <li><a href="/GianlucaGuarini/jQuery.BlackAndWhite/tree/" class="selected" highlight="repo_sourcerepo_downloadsrepo_commitsrepo_tagsrepo_branches">Code</a></li> <li><a href="/GianlucaGuarini/jQuery.BlackAndWhite/network" highlight="repo_network">Network</a> <li><a href="/GianlucaGuarini/jQuery.BlackAndWhite/pulls" highlight="repo_pulls">Pull Requests <span class='counter'>0</span></a></li> <li><a href="/GianlucaGuarini/jQuery.BlackAndWhite/issues" highlight="repo_issues">Issues <span class='counter'>1</span></a></li> <li><a href="/GianlucaGuarini/jQuery.BlackAndWhite/graphs" highlight="repo_graphsrepo_contributors">Graphs</a></li> </ul> <div class="frame frame-center tree-finder" style="display:none" data-tree-list-url="/GianlucaGuarini/jQuery.BlackAndWhite/tree-list/8ee84647fe36d05f555a569086f21c81641bc4ea" data-blob-url-prefix="/GianlucaGuarini/jQuery.BlackAndWhite/blob/8ee84647fe36d05f555a569086f21c81641bc4ea" > <div class="breadcrumb"> <span class="bold"><a href="/GianlucaGuarini/jQuery.BlackAndWhite">jQuery.BlackAndWhite</a></span> / <input class="tree-finder-input js-navigation-enable" type="text" name="query" autocomplete="off" spellcheck="false"> </div> <div class="octotip"> <p> <a href="/GianlucaGuarini/jQuery.BlackAndWhite/dismiss-tree-finder-help" class="dismiss js-dismiss-tree-list-help" title="Hide this notice forever" rel="nofollow">Dismiss</a> <span class="bold">Octotip:</span> You've activated the <em>file finder</em> by pressing <span class="kbd">t</span> Start typing to filter the file list. Use <span class="kbd badmono">↑</span> and <span class="kbd badmono">↓</span> to navigate, <span class="kbd">enter</span> to view files. <

评论收藏

内容反馈