鸡西网—微信标志
  • 鸡西网站制作
  • 鸡西网客服热线已更改为”400-0467-004“,请广大客户周知。
  • 鸡西网站设计为您提供免费技术问答.如有您有计算机的相关问题欢迎前来咨询!
  • 敢不敢在鸡西网High一下
  • 网站地图

大前端 D8主题 导航页面模板

WordPress Danny.✔ 8011浏览 0评论 百度收否

使用大前端D8主题的朋友们应该对大前端官网的导航页面不陌生了.

可是在模板里,并没有提供该页面的模板.导致很多想使用导航页面的朋友们无法使用.

鸡西网站制作公司现在免费公开此页面的制作方式.只要认真看完,一定就作出导航页面的.

查看演示

制作 D8导航页面 第一步:

新建立一个名为nav.php的文件,把如下代码粘贴进去.然后通过FTP上传到模板目录下的pages文件夹中.

<?php
/*
template name: 导航
description: template for www.7vnet.com seven theme
*/
get_header();
?>
<style>
.pagesider-menu{font-size: 12px;}
.sitetip{margin-top: 0;padding: 0 0 5px;line-height: 15px;}
.subbtn{margin-bottom: 20px;}
#navs{color: #aaa;}
#navs h2{font-size: 20px;font-weight: normal;color: #F15A23;}
#navs .items li{padding: 7px 0;border-bottom: solid 1px #f2f2f2;}
#navs .items a{font-size: 14px;}
#navs .items li:hover{background-color: #f7f7f7;border-bottom: 1px solid #eee;border-top: 1px solid #eee;margin: -1px -20px 0;padding: 7px 20px;}
#navs .items li:hover a{color: #F15A23;}
#navs .items li:hover a:hover{text-decoration: underline;}
#navs .items{width: 20%;float: left;}
#navs .item{padding: 10px 20px;}
#navs .item.active{background-color: #FCF8E3;}
#navs .items:nth-child(2n){background-color: #fdfdfd;}
#navs .items:nth-child(2n) .item{border-left: 1px solid #eee;border-right: 1px solid #eee;}

.navs-speed{position: fixed;right: 10px;bottom: 10px;background-color: #555;color: #eee;}
.navs-speed li{padding: 5px 15px 4px;border-bottom: 1px solid #616161;cursor: pointer;}
.navs-speed li.active{background-color: #428BD1;color: #fff;border-bottom-color: #555;padding-top: 6px;margin-top: -1px;position: relative;}

@media (max-width:979px){
#navs .items{width: 25%;}
}
@media (max-width:767px){
#navs .items{width: 50%;}
}
</style>
<div class="pagewrapper clearfix">

<header class="pageheader clearfix">
<h1 class="pull-left">
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</h1>
<div class="pull-right">
</div>
</header>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
</section>
</section>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/nav.js"></script>
<?php get_footer(); ?>

制作 D8导航页面 第二步:

新建立一个名为nav.js的文件,把如下代码粘贴进去.然后通过FTP上传到模板目录下的js文件夹中.

+(function($) {
	$('#navs a').attr('target', '_blank')
	var title = '<li>'+$('#navs h2').map(function(){ return $(this).html() }).get().join('</li><li>')+'</li>'
	$('.navs-speed li').each(function(e){
		$(this).click(function(){
			$(this).addClass('active').siblings().removeClass()
            $('html,body').animate({scrollTop: $('#navs h2:eq('+$(this).index()+')').offset().top-10}, 300)
            $('#navs .item:eq('+$(this).index()+')').parent().parent().find('.item.active').removeClass('active')
            $('#navs .item:eq('+$(this).index()+')').addClass('active')
		})
	})
})(window.jQuery);

制作 D8导航页面 第三步:

接下来,要登陆到网站后台.在页面菜单中选择 新建页面.在标题里输入 导航,把 默认模板 改成 导航.

然后以 文本(源代码)粘贴到内容编辑框里发布页面就可以了.

此方法的好处是可以在后台以编辑页面的方式 增删导航内容.

<div class="pagewrapper clearfix" id="navs">
<div class="items">
<div class="item">
<h2>资讯</h2>
<ul class="xoxo blogroll">
<li><a title="36氪是一个关注互联网创业的科技博客" href="http://www.36kr.com/" target="_blank">36氪</a>
36氪是一个关注互联网创业的科技博客</li>
<li><a title="目前国内即时新闻站点和网友交流平台" href="http://ie.cnbeta.com/" target="_blank">cnBeta</a>
目前国内即时新闻站点和网友交流平台</li>
<li><a title="i黑马创业项目策划及投资灵感聚集地" href="http://www.iheima.com/" target="_blank">i黑马</a>
i黑马创业项目策划及投资灵感聚集地</li>
<li><a title="科技创新创业媒体" href="http://tech2ipo.com/" target="_blank">Tech2IPO创见</a>
科技创新创业媒体</li>
<li><a title="新媒体、新技术、新商业互动交流平台" href="http://www.techweb.com.cn/" target="_blank">TechWeb</a>
新媒体、新技术、新商业互动交流平台</li>
<li><a title="提倡慢阅读,专注产品设计、交互体验、用户研究" href="http://reynold.cn/" target="_blank">互联网er的早读课</a>
提倡慢阅读,专注产品设计、交互体验、用户研究</li>
<li><a title="关注互联网关注运营" href="http://www.yixieshi.com/" target="_blank">互联网壹些事</a>
关注互联网关注运营</li>
<li><a title="聚焦互联网前沿资讯,网络精华内容,交流产品心得" href="http://www.alibuybuy.com/" target="_blank">互联网的那点事</a>
聚焦互联网前沿资讯,网络精华内容,交流产品心得</li>
<li><a title="关注中国最具创业家精神的企业领袖" href="http://www.chuangyejia.com/" target="_blank">创业家</a>
关注中国最具创业家精神的企业领袖</li>
<li><a title="汇聚全球新兴的商业模式与创新趋势" href="http://www.bukop.com/" target="_blank">商业不靠谱</a>
汇聚全球新兴的商业模式与创新趋势</li>
<li><a title="中国股权投资权威门户" href="http://www.pedaily.cn/" target="_blank">投资界</a>
中国股权投资权威门户</li>
<li><a title="聚焦互联网产品和科技趋势,目前国内互联网产品经理和产品相关人员的相互学习和交流碰撞的平台" href="http://www.geekpark.net/" target="_blank">极客公园</a>
聚焦互联网产品和科技趋势,目前国内互联网产品经理和产品相关人员的相互学习和交流碰撞的平台</li>
<li><a title="关注移动互联网、集中报道创业团队" href="http://www.ifanr.com/" target="_blank">爱范儿</a>
关注移动互联网、集中报道创业团队</li>
<li><a title="关于消费电子产品的流行科技网志与播客" href="http://cn.engadget.com/" target="_blank">瘾科技</a>
关于消费电子产品的流行科技网志与播客</li>
<li><a title="是一个有视角的商业资讯与交流平台" href="http://www.huxiu.com/" target="_blank">虎嗅网</a>
是一个有视角的商业资讯与交流平台</li>
<li><a title="专注于移动互联网创业&amp;创新" href="http://www.leiphone.com/" target="_blank">雷锋网</a>
专注于移动互联网创业&amp;创新</li>
</ul>
</div>
<div class="item">
<h2>数据研究</h2>
<ul class="xoxo blogroll">
<li><a title="中国互联网信息中心" href="http://www.cnnic.net/" target="_blank">CNNIC</a>
中国互联网信息中心</li>
<li><a title="讨论数据可视化的一个平台,由淘宝可视化团队发起" href="http://datavlab.org/" target="_blank">DataV</a>
讨论数据可视化的一个平台,由淘宝可视化团队发起</li>
<li><a title="提供最新的研究成果和这个领域大多数局部用例" href="http://datavisualization.ch/" target="_blank">Datavisual</a>
提供最新的研究成果和这个领域大多数局部用例</li>
<li><a title="著名的可视化案例网站,提供了一些令人震惊图表" href="http://flowingdata.com/" target="_blank">Flowingdata</a>
著名的可视化案例网站,提供了一些令人震惊图表</li>
<li><a title="国外电商数据趋势" href="http://www.internetretailer.com/trends/" target="_blank">internetretailer</a>
国外电商数据趋势</li>
<li><a title="提供大量信息可视化图例" href="http://visual.ly/" target="_blank">Visual</a>
提供大量信息可视化图例</li>
<li><a title="比较有名的可视化博客,介绍最新的可视化技术、软件资源和应用实践" href="http://www.visualisingdata.com/" target="_blank">Visualising Data</a>
比较有名的可视化博客,介绍最新的可视化技术、软件资源和应用实践</li>
<li><a title="中国互联网数据资讯中心用数据解读TMT行业" href="http://www.199it.com/" target="_blank">中国互联网数据资讯中心</a>
中国互联网数据资讯中心用数据解读TMT行业</li>
<li><a title="信息设计专业网站" href="http://www.tuyansuo.com/" target="_blank">图研所</a>
信息设计专业网站</li>
<li><a title="专注于信息图的学习与分享的中文博客" href="http://blog.sina.com.cn/huangyu4124" target="_blank">图表汇</a>
专注于信息图的学习与分享的中文博客</li>
<li><a title="网站分析在中国——从基础到前沿”是一个关于网站分析(WA,即Web Analytics)的博客" href="http://www.chinawebanalytics.cn/" target="_blank">数据分析在中国</a>
网站分析在中国——从基础到前沿”是一个关于网站分析(WA,即Web Analytics)的博客</li>
<li><a title="提供基于web的服务" href="http://vis.stanford.edu/" target="_blank">斯坦福大学可视化组</a>
提供基于web的服务</li>
<li><a title="电商购物数据分析" href="http://shu.taobao.com/" target="_blank">淘宝指数</a>
电商购物数据分析</li>
<li><a title="根据关键词进行数据分析" href="http://index.baidu.com/" target="_blank">百度指数</a>
根据关键词进行数据分析</li>
<li><a title="对当前浏览器、操作系统、屏幕分辨率、地域等详细分析" href="http://tongji.baidu.com/data/" target="_blank">百度流量研究院</a>
对当前浏览器、操作系统、屏幕分辨率、地域等详细分析</li>
<li><a title="专注于网络媒体、电子商务、网络游戏、无线增值等新经济领域,深入研究和了解消费者行为" href="http://www.iresearch.com.cn/" target="_blank">艾瑞</a>
专注于网络媒体、电子商务、网络游戏、无线增值等新经济领域,深入研究和了解消费者行为</li>
<li><a title="专业电子商务数据服务商" href="http://www.linezing.com/" target="_blank">量子恒道</a>
专业电子商务数据服务商</li>
</ul>
</div>
<div class="item active">
<h2>教程</h2>
<ul class="xoxo blogroll">
<li><a title="接触PS图像处理软件教程" href="http://photoshoptutorials.ws/" target="_blank">Contact</a>
接触PS图像处理软件教程</li>
<li><a title="国外关于创意、设计、交互、开发、营销、创业….等等的视频讲座类网站,不足的是很多讲座没有字幕" href="http://ontwik.com/" target="_blank">Ontwik视频教程</a>
国外关于创意、设计、交互、开发、营销、创业….等等的视频讲座类网站,不足的是很多讲座没有字幕</li>
<li><a title="提供详细的PS教程,涵盖3D效果、文字效果、文理与图案、照片及绘图效果等" href="http://www.photoshoplady.com/" target="_blank">Photoshop Lady</a>
提供详细的PS教程,涵盖3D效果、文字效果、文理与图案、照片及绘图效果等</li>
<li><a title="国外很系统的PS教程,从基础操作、图片修图、文字效果、图标设计、网页设计,站长够细心!" href="http://www.photoshopstar.com/" target="_blank">Photoshopstar</a>
国外很系统的PS教程,从基础操作、图片修图、文字效果、图标设计、网页设计,站长够细心!</li>
<li><a title="原创Ps教程,并归纳出比较适合初学者的部分" href="http://www.psdbox.com/" target="_blank">Psd box</a>
原创Ps教程,并归纳出比较适合初学者的部分</li>
<li><a title="专注于世界各地PS爱好者提供的所有高品质步骤化教程" href="http://www.psdvault.com/" target="_blank">PSD Vault</a>
专注于世界各地PS爱好者提供的所有高品质步骤化教程</li>
<li><a title="平易近人的展示一些优秀的PS教程" href="http://psd.tutsplus.com/" target="_blank">Psdtuts+</a>
平易近人的展示一些优秀的PS教程</li>
<li><a title="Photoshop专业中文教程网" href="http://www.68ps.com/" target="_blank">PS联盟</a>
Photoshop专业中文教程网</li>
<li><a title="国外很NB的PS教程" href="http://www.tutorialking.eu/" target="_blank">Tutorial King</a>
国外很NB的PS教程</li>
<li><a title="内容涵盖开发、动画、设计方面的教程" href="http://www.tutorial9.net/" target="_blank">Tutorial9</a>
内容涵盖开发、动画、设计方面的教程</li>
<li><a title="web design libray很系统的教程,从设计理论、配色、图标、FALSH、3D、栅格、编程…无所不有。可利用网址翻译辅助阅读,你会有收获!" href="http://www.webdesign.org/" target="_blank">网页设计实验室</a>
web design libray很系统的教程,从设计理论、配色、图标、FALSH、3D、栅格、编程…无所不有。可利用网址翻译辅助阅读,你会有收获!</li>
</ul>
</div>
<div class="item">
<h2>色彩</h2>
<ul class="xoxo blogroll">
<li><a title="Adobe出品的配色网站" href="https://kuler.adobe.com/" target="_blank">Adobe配色工具</a>
Adobe出品的配色网站</li>
<li><a title="输入网站地址就能得到它的配色方案" href="http://www.colorfyit.com/" target="_blank">colorfy</a>
输入网站地址就能得到它的配色方案</li>
<li><a title="上传照片提取配色方案" href="http://www.colorhunter.com/" target="_blank">ColorHunter</a>
上传照片提取配色方案</li>
<li><a title="提供丰富的用户创建和共享色彩灵感以及工具的平台" href="http://www.colourlovers.com/" target="_blank">Colourlovers</a>
提供丰富的用户创建和共享色彩灵感以及工具的平台</li>
<li><a title="配色利器!能够即时预览到简单的由所选配色搭建的页面效果" href="http://colorschemedesigner.com/" target="_blank">CSD配色利器</a>
配色利器!能够即时预览到简单的由所选配色搭建的页面效果</li>
<li><a title="一位从业18年的色彩专家分享的配色经验与案例" href="http://www.design-seeds.com/" target="_blank">设计种子</a>
一位从业18年的色彩专家分享的配色经验与案例</li>
</ul>
</div>
<div class="item">
<h2>设计圈子</h2>
<ul class="xoxo blogroll">
<li><a title="专业图标界面设计论坛,是GUI设计师、产品交互设计师交流经验和讨论学习的专业空间" href="http://www.iconfans.com/" target="_blank">IconFans</a>
专业图标界面设计论坛,是GUI设计师、产品交互设计师交流经验和讨论学习的专业空间</li>
<li><a title="有着专业设计师交流氛围的设计联盟" href="http://www.uisdc.com/" target="_blank">优设</a>
有着专业设计师交流氛围的设计联盟</li>
<li><a title="知乎是一个真实的网络问答社区,社区氛围友好、理性、认真,这里连接了各行各业的精英,分享彼此的专业知识、经验、见解,为中文互联网源源不断地提供高质量的信息,在这里,发现更大的世界" href="http://www.zhihu.com/" target="_blank">知乎</a>
知乎是一个真实的网络问答社区,社区氛围友好、理性、认真,这里连接了各行各业的精英,分享彼此的专业知识、经验、见解,为中文互联网源源不断地提供高质量的信息,在这里,发现更大的世界</li>
<li><a title="设计资源共享的大型设计类垂直网站平台" href="http://68design.net/" target="_blank">网页设计师联盟</a>
设计资源共享的大型设计类垂直网站平台</li>
<li><a title="老牌专业垂直社区,建设网站设计与开发人员之家" href="http://www.blueidea.com/" target="_blank">蓝色理想</a>
老牌专业垂直社区,建设网站设计与开发人员之家</li>
</ul>
</div>
</div>
<div class="items">
<div class="item">
<h2>UX研究所</h2>
<ul class="xoxo blogroll">
<li><a title="实录各类过场动画视频,直观的交互体验学习平台。" href="http://sixux.com/" target="_blank">SixUX</a>
实录各类过场动画视频,直观的交互体验学习平台。</li>
<li><a title="前端与用户体验为核心的杂志类知名博客" href="http://www.smashingmagazine.com/" target="_blank">SmashingMagazine</a>
前端与用户体验为核心的杂志类知名博客</li>
<li><a title="国外交互设计资讯平台" href="http://thenextweb.com/" target="_blank">THEnextweb</a>
国外交互设计资讯平台</li>
<li><a title="一个免费为用户体验研究人员和专家提供问答服务的社区" href="http://ux.stackexchange.com/" target="_blank">User Experience</a>
一个免费为用户体验研究人员和专家提供问答服务的社区</li>
<li><a title="设计、技术、用户体验等最好最新思想的原创文章" href="http://uxmag.com/" target="_blank">UX Magazine</a>
设计、技术、用户体验等最好最新思想的原创文章</li>
<li><a title="侧重用户体验、交互、可用性等内容" href="http://www.uxbooth.com/" target="_blank">UXbooth</a>
侧重用户体验、交互、可用性等内容</li>
<li><a title="提供交互设计和开发的灵感、教程、资源等" href="http://www.uxde.net/" target="_blank">UXDE</a>
提供交互设计和开发的灵感、教程、资源等</li>
<li><a title="提供持续、丰富、权威的用户体验和相关领域的信息" href="http://uxmag.com/" target="_blank">UX杂志</a>
提供持续、丰富、权威的用户体验和相关领域的信息</li>
<li><a title="产品原型设计,务实产品经理基本功" href="http://www.webppd.com/" target="_blank">WebPPD</a>
产品原型设计,务实产品经理基本功</li>
<li><a title="引领中国交互设计行业发展" href="http://ixdc.org/" target="_blank">交互设计专业委员会</a>
引领中国交互设计行业发展</li>
<li><a title="中国首个体验设计专业组织,倡导推广体验设计行业能力标准和业务流程,竭力促进体验设计与传统行业的对接,积极引领国内体验设计行业与国际接轨" href="http://www.uxdc.org/" target="_blank">深圳体验设计专业委员会</a>
中国首个体验设计专业组织,倡导推广体验设计行业能力标准和业务流程,竭力促进体验设计与传统行业的对接,积极引领国内体验设计行业与国际接轨</li>
<li><a title="IXDC旗下资讯网,引领中国交互设计行业发展" href="http://uxinfo.com/" target="_blank">用户体验资讯网</a>
IXDC旗下资讯网,引领中国交互设计行业发展</li>
<li><a title="丰富的线框知识与资源,UX必备" href="http://wireframes.linowski.ca/" target="_blank">线框杂志</a>
丰富的线框知识与资源,UX必备</li>
</ul>
</div>
<div class="item">
<h2>UX团队</h2>
<ul class="xoxo blogroll">
<li><a title="19楼UED" href="http://blog.19ued.com/" target="_blank">19楼UED</a>
19楼UED</li>
<li><a title="360UXC用户体验设计中心" href="http://uxc.360.cn/" target="_blank">360UXC</a>
360UXC用户体验设计中心</li>
<li><a title="奇虎360公司应用开发部Web前端工程师 + 部分特约嘉宾 组成的一个前端团队" href="http://www.75team.com/" target="_blank">360奇舞团</a>
奇虎360公司应用开发部Web前端工程师 + 部分特约嘉宾 组成的一个前端团队</li>
<li><a title="5173用户体验设计团队" href="http://ued.5173.com/" target="_blank">5173UED</a>
5173用户体验设计团队</li>
<li><a title="用户体验交流会" href="http://www.hiued.org/" target="_blank">HiUED</a>
用户体验交流会</li>
<li><a title="以用户为中心的设计" href="http://ucdchina.com/" target="_blank">UCD大社区</a>
以用户为中心的设计</li>
<li><a title="一淘体验工作平台" href="http://ued.alimama.com/" target="_blank">一淘体验工作平台</a>
一淘体验工作平台</li>
<li><a title="央视网、CNTV指定设计开发UED团队" href="http://uedteam.com/" target="_blank">中视力天</a>
央视网、CNTV指定设计开发UED团队</li>
<li><a title="人人网前端开发设计团队" href="http://fed.renren.com/" target="_blank">人人FED</a>
人人网前端开发设计团队</li>
<li><a title="天猫UED成员微博集合" href="http://ued.tmall.com/" target="_blank">天猫UED</a>
天猫UED成员微博集合</li>
<li><a title="搜狐无线UED团队" href="http://mued.sohu.com/" target="_blank">搜狐MUED</a>
搜狐无线UED团队</li>
<li><a title="搜狐MDC" href="http://mdc.sohu.com/" target="_blank">搜狐媒体设计中心</a>
搜狐MDC</li>
<li><a title="搜狐焦点UED团队" href="http://ued.focus.cn/wordpress/" target="_blank">搜狐焦点UED</a>
搜狐焦点UED团队</li>
<li><a title="畅游视觉设计中心" href="http://vc.changyou.com/" target="_blank">搜狐畅游VC</a>
畅游视觉设计中心</li>
<li><a title="搜狗UED团队" href="http://ued.sogou.com/" target="_blank">搜狗UED</a>
搜狗UED团队</li>
<li><a title="携程网UED团队" href="http://ued.ctrip.com/blog/" target="_blank">携程UED</a>
携程网UED团队</li>
<li><a title="支付宝用户体验部" href="http://ued.alipay.com/" target="_blank">支付宝用户体验部</a>
支付宝用户体验部</li>
<li><a title="新浪UED" href="http://ued.sina.com/" target="_blank">新浪UED</a>
新浪UED</li>
<li><a title="新浪微博设计团队" href="http://udc.weibo.com/" target="_blank">新浪微博设计团队</a>
新浪微博设计团队</li>
<li><a title="阿里巴巴中国站UED" href="http://www.aliued.cn/" target="_blank">有一点</a>
阿里巴巴中国站UED</li>
<li><a title="金蝶友商网UED" href="http://www.kdued.com/" target="_blank">有意思</a>
金蝶友商网UED</li>
<li><a title="淘宝UED" href="http://ued.taobao.com/" target="_blank">淘宝UED</a>
淘宝UED</li>
<li><a title="金山爱词霸UED" href="http://ued.iciba.com/" target="_blank">爱词霸UED</a>
金山爱词霸UED</li>
<li><a title="百度商业产品用户体验团队,关注消费者和企业主,以体验驱动商业价值" href="http://ued.baidu.com/" target="_blank">百度商业用户体验部</a>
百度商业产品用户体验团队,关注消费者和企业主,以体验驱动商业价值</li>
<li><a title="百度无线用户体验部" href="http://mux.baidu.com/" target="_blank">百度无线用户体验部</a>
百度无线用户体验部</li>
<li><a title="百度泛用户体验" href="http://www.baiduux.com/" target="_blank">百度泛用户体验</a>
百度泛用户体验</li>
<li><a title="百度UEO" href="http://ueo.baidu.com/" target="_blank">百度联盟用户体验中心</a>
百度UEO</li>
<li><a title="网易用户体验设计中心" href="http://uedc.163.com/" target="_blank">网易用户体验设计中心</a>
网易用户体验设计中心</li>
<li><a title="腾讯用户研究与体验设计中心" href="http://cdc.tencent.com/" target="_blank">腾讯CDC</a>
腾讯用户研究与体验设计中心</li>
<li><a title="腾讯电商用户体验设计部" href="http://ecd.tencent.com/" target="_blank">腾讯ecd</a>
腾讯电商用户体验设计部</li>
<li><a title="QQ空间、QQ会员、QQ秀、QQmusic、腾讯视频、拍拍、QQ商城等产品体验设计" href="http://isd.tencent.com/blog" target="_blank">腾讯ISD</a>
QQ空间、QQ会员、QQ秀、QQmusic、腾讯视频、拍拍、QQ商城等产品体验设计</li>
<li><a title="腾讯社交用户体验设计部" href="http://isux.tencent.com/" target="_blank">腾讯ISUX</a>
腾讯社交用户体验设计部</li>
<li><a title="腾讯游戏的专业设计团队" href="http://tgideas.qq.com/" target="_blank">腾讯TGideas</a>
腾讯游戏的专业设计团队</li>
<li><a title="腾讯移动互联网设计" href="http://mxd.tencent.com/" target="_blank">腾讯WSD</a>
腾讯移动互联网设计</li>
<li><a title="财付通设计中心" href="http://tid.tenpay.com/" target="_blank">腾讯财付通TID</a>
财付通设计中心</li>
<li><a title="淘宝良无限用户体验部UPD" href="http://www.lpued.com/" target="_blank">良无限用户体验部UPD</a>
淘宝良无限用户体验部UPD</li>
<li><a title="迅雷CUED" href="http://cued.xunlei.com/" target="_blank">迅雷CUED</a>
迅雷CUED</li>
</ul>
</div>
<div class="item">
<h2>图标</h2>
<ul class="xoxo blogroll">
<li><a title="按属性分类,国外免费图标下载" href="http://www.freeiconsdownload.com/" target="_blank">Dryicons</a>
按属性分类,国外免费图标下载</li>
<li><a title="图标搜索引擎,支持中文检索" href="http://www.easyicon.cn/" target="_blank">Easy Icon</a>
图标搜索引擎,支持中文检索</li>
<li><a title="在线生成ico浏览器图标" href="http://www.favicon.cc/" target="_blank">Favicon</a>
在线生成ico浏览器图标</li>
<li><a title="FindIcons图标搜索引擎" href="http://findicons.com/" target="_blank">FindIcons</a>
FindIcons图标搜索引擎</li>
<li><a title="国外专注于提供矢量素材下载的网站,更新频率较快" href="http://www.greatvectors.com/" target="_blank">Greatvectors</a>
国外专注于提供矢量素材下载的网站,更新频率较快</li>
<li><a title="强大的简约图标库" href="http://icomoon.io/" target="_blank">Icomoon</a>
强大的简约图标库</li>
<li><a title="国外免费图标下载" href="http://iconfever.com/" target="_blank">Iconfever</a>
国外免费图标下载</li>
<li><a title="iconfinder图标搜索引擎" href="http://www.iconfinder.com/" target="_blank">IconFinder</a>
iconfinder图标搜索引擎</li>
<li><a title="一套简笔Icon,包含各尺寸Icon上千个" href="http://iconmonstr.com/" target="_blank">Iconmonstr</a>
一套简笔Icon,包含各尺寸Icon上千个</li>
<li><a title="免费的图标下载网站,可选择多种尺寸和格式" href="http://www.iconsdb.com/" target="_blank">Icons DB</a>
免费的图标下载网站,可选择多种尺寸和格式</li>
<li><a title="收录了苹果客户端的所有的ios产品的图标" href="http://iosicongallery.com/" target="_blank">IOSIconGallery</a>
收录了苹果客户端的所有的ios产品的图标</li>
<li><a title="提供了免费的photoshop自定义形状、图标" href="http://www.shapes4free.com/" target="_blank">Shapes4free</a>
提供了免费的photoshop自定义形状、图标</li>
<li><a title="图标鉴赏" href="http://weloveicons.com/" target="_blank">WeLoveIcons</a>
图标鉴赏</li>
<li><a title="一淘UX团队的图标字体库" href="http://ux.etao.com/fonts" target="_blank">一淘UX图标库</a>
一淘UX团队的图标字体库</li>
<li><a title="IconPng图标搜索引擎" href="http://www.iconpng.com/" target="_blank">爱看图标</a>
IconPng图标搜索引擎</li>
</ul>
</div>
</div>
<div class="items">
<div class="item">
<h2>移动互联网</h2>
<ul class="xoxo blogroll">
<li><a title="Android人机交互规范" href="http://developer.android.com/design/index.html" target="_blank">Android</a>
Android人机交互规范</li>
<li><a title="移动应用介绍单页展示网站" href="http://www.appsites.com/" target="_blank">Appsites</a>
移动应用介绍单页展示网站</li>
<li><a title="移动互联网大杂烩" href="http://appstorm.net/" target="_blank">Appstorm</a>
移动互联网大杂烩</li>
<li><a title="发现优秀APP应用" href="http://appstorm.net/" target="_blank">Appstorm</a>
发现优秀APP应用</li>
<li><a title="收集了很多国内外手机APP界面设计图片,提供分类检索" href="http://appui.mobi/" target="_blank">AppUi</a>
收集了很多国内外手机APP界面设计图片,提供分类检索</li>
<li><a title="收集了iOS平台几百个代码,并且配有效果图和演示视频" href="http://code4app.com/" target="_blank">Code4app</a>
收集了iOS平台几百个代码,并且配有效果图和演示视频</li>
<li><a title="优秀APP设计截屏集合" href="http://www.cssiphone.com/" target="_blank">CssiPhone</a>
优秀APP设计截屏集合</li>
<li><a title="IOS人机交互规范" href="http://developer.apple.com/library/ios/navigation/" target="_blank">IOS人机交互规范</a>
IOS人机交互规范</li>
<li><a title="专注本土移动设计产业" href="http://www.mobiue.com/" target="_blank">MobiUE</a>
专注本土移动设计产业</li>
<li><a title="国外优秀APP聚合,总有一种创意你没见过" href="http://mycolorscreen.com/" target="_blank">Mycolorscreen</a>
国外优秀APP聚合,总有一种创意你没见过</li>
<li><a title="收集了许多精彩的iOS应用界面截" href="http://pttrns.com/" target="_blank">Pttrns</a>
收集了许多精彩的iOS应用界面截</li>
<li><a title="分享最棒的手机产品界面设计" href="http://www.tappgala.com/" target="_blank">TappGala</a>
分享最棒的手机产品界面设计</li>
<li><a title="专注移动客户端" href="http://mobile.tutsplus.com/" target="_blank">Tutsplus</a>
专注移动客户端</li>
<li><a title="精心挑选全球设计师优秀界面作品" href="http://www.uiparade.com/" target="_blank">Ui Parade</a>
精心挑选全球设计师优秀界面作品</li>
<li><a title="你可以在UI4App按照分类来查看众多优秀的App的优秀设计" href="http://ui4app.com/" target="_blank">UI4App</a>
你可以在UI4App按照分类来查看众多优秀的App的优秀设计</li>
<li><a title="WinPhone人机交互规范" href="http://msdn.microsoft.com/en-us/library/hh202915" target="_blank">WinPhone</a>
WinPhone人机交互规范</li>
<li><a title="大量APP界面展示" href="http://www.mobileawesomeness.com/" target="_blank">移动玩家</a>
大量APP界面展示</li>
</ul>
</div>
<div class="item">
<h2>栅格化</h2>
<ul class="xoxo blogroll">
<li><a title="方便直观的3X4栅格构建系统" href="http://www.3x4grid.com/" target="_blank">3X4栅格构建器</a>
方便直观的3X4栅格构建系统</li>
<li><a title="著名的960栅格化系统,能够简化网站开发流程" href="http://960.gs/" target="_blank">960栅格化系统</a>
著名的960栅格化系统,能够简化网站开发流程</li>
<li><a title="可手动拖拽调整栅格" href="http://www.gridlover.net/" target="_blank">Grid lover</a>
可手动拖拽调整栅格</li>
<li><a title="较全面的栅格化系统资源" href="http://www.thegridsystem.org/" target="_blank">The grid system</a>
较全面的栅格化系统资源</li>
<li><a title="ZURB CSS栅格化生成器" href="http://www.zurb.com/playground/css-grid-builder" target="_blank">ZURB CSS</a>
ZURB CSS栅格化生成器</li>
<li><a title="在线栅格化系统" href="http://modulargrid.org/" target="_blank">栅格化创造者</a>
在线栅格化系统</li>
<li><a title="提供可打印的栅格化白板下载" href="http://sneakpeekit.com/" target="_blank">栅格化白板</a>
提供可打印的栅格化白板下载</li>
<li><a title="响应式Web设计栅格化" href="http://goldengridsystem.com/" target="_blank">黄金栅格化</a>
响应式Web设计栅格化</li>
</ul>
</div>
<div class="item">
<h2>灵感</h2>
<ul class="xoxo blogroll">
<li><a title="每天发布一名设计师的优秀作品" href="http://365awesomedesigners.com/" target="_blank">365优秀设计师</a>
每天发布一名设计师的优秀作品</li>
<li><a title="创意灵感和教程" href="http://abduzeedo.com/" target="_blank">Abduzeedo</a>
创意灵感和教程</li>
<li><a title="网页设计及开发人员每日资源" href="http://www.andysowards.com/" target="_blank">Andysowards</a>
网页设计及开发人员每日资源</li>
<li><a title="著名设计社区,创意设计人士可以展示自己的作品,发现别人分享的创意作品" href="http://www.behance.net/" target="_blank">Behance</a>
著名设计社区,创意设计人士可以展示自己的作品,发现别人分享的创意作品</li>
<li><a title="广告媒体行业创意聚集地" href="http://www.brandnewschool.com/" target="_blank">Brand New School</a>
广告媒体行业创意聚集地</li>
<li><a title="国外优秀创意人的社区、并提供免费个人主页服务" href="http://cargocollective.com/" target="_blank">Cargocollective</a>
国外优秀创意人的社区、并提供免费个人主页服务</li>
<li><a title="记录一些鼓舞人心的设计故事,分享创新业务" href="http://www.fastcodesign.com/" target="_blank">Co.Design</a>
记录一些鼓舞人心的设计故事,分享创新业务</li>
<li><a title="COLORS杂志合作网站,分享音乐家、电影制作人、摄影师、艺术家和作家的色彩精神" href="http://lab.colorsmagazine.com/" target="_blank">COLORSLab</a>
COLORS杂志合作网站,分享音乐家、电影制作人、摄影师、艺术家和作家的色彩精神</li>
<li><a title="世界上最畅销的设计师和艺术家网络杂志Computer Arts" href="http://www.computerarts.co.uk/" target="_blank">Computer Arts</a>
世界上最畅销的设计师和艺术家网络杂志Computer Arts</li>
<li><a title="汇集全球创意人分享的经验和经历" href="http://www.creativetempest.com/" target="_blank">Creative Tempest</a>
汇集全球创意人分享的经验和经历</li>
<li><a title="设计廊展示了令人振奋的设计资源和教程" href="http://designshack.net/" target="_blank">Desige Gallery</a>
设计廊展示了令人振奋的设计资源和教程</li>
<li><a title="为Web设计与开发人员提供丰富的资源与信息" href="http://designmodo.com/" target="_blank">Designmodo</a>
为Web设计与开发人员提供丰富的资源与信息</li>
<li><a title="一群志同道合的设计迷们交流技术和灵感的社区" href="http://designrfix.com/" target="_blank">Designrfix</a>
一群志同道合的设计迷们交流技术和灵感的社区</li>
<li><a title="灵感垃圾场,内容涵盖摄影,广告,设计,包装,家具等等" href="http://ffffound.com/" target="_blank">FFFFound!</a>
灵感垃圾场,内容涵盖摄影,广告,设计,包装,家具等等</li>
<li><a title="发现有意味的设计!" href="http://www.hi-id.com/" target="_blank">ID公社</a>
发现有意味的设计!</li>
<li><a title="启发杂志合作网站" href="http://inspiredm.com/" target="_blank">Inspired Magazine</a>
启发杂志合作网站</li>
<li><a title="领先的网页设计师和开发人员设计灵感社区" href="http://www.instantshift.com/" target="_blank">Instantshift</a>
领先的网页设计师和开发人员设计灵感社区</li>
<li><a title="丰富的有关设计、技术和社交媒体的相关文章" href="http://mustified.com/" target="_blank">Mustified</a>
丰富的有关设计、技术和社交媒体的相关文章</li>
<li><a title="最权威的网络在线创意与潮流杂志,涵盖广告、网站、FLASH、平面、街头艺术、插画、3D、产品与包装、建筑与空间、摄影、时装、试验艺术等" href="http://www.newwebpick.com/" target="_blank">NewWebPick</a>
最权威的网络在线创意与潮流杂志,涵盖广告、网站、FLASH、平面、街头艺术、插画、3D、产品与包装、建筑与空间、摄影、时装、试验艺术等</li>
<li><a title="国外的花瓣网,以供整理与分享灵感" href="http://pinterest.com/" target="_blank">Pinterest</a>
国外的花瓣网,以供整理与分享灵感</li>
<li><a title="为大家带来国外最新的创意设计和设计理念" href="http://www.poboo.com/" target="_blank">Poboo</a>
为大家带来国外最新的创意设计和设计理念</li>
<li><a title="精选数位艺术杂志和Web设计画廊" href="http://www.quandtnet.de/" target="_blank">qnt画廊</a>
精选数位艺术杂志和Web设计画廊</li>
<li><a title="关注新鲜创意资讯的新锐网络媒体" href="http://since1984.cn/" target="_blank">SINCE1984</a>
关注新鲜创意资讯的新锐网络媒体</li>
<li><a title="为设计师和网页开发人员提供实用的文章、教程和资源" href="http://sixrevisions.com/" target="_blank">Six Revisions</a>
为设计师和网页开发人员提供实用的文章、教程和资源</li>
<li><a title="Speckyboy是专业的设计资源杂志,内容涵盖Web设计和开发、平面设计、广告、移动开发等" href="http://speckyboy.com/" target="_blank">Speckyboy</a>
Speckyboy是专业的设计资源杂志,内容涵盖Web设计和开发、平面设计、广告、移动开发等</li>
<li><a title="Vox传媒合作的涵盖交互技术、科技、艺术和文化成果展示平台" href="http://www.theverge.com/" target="_blank">The Verge</a>
Vox传媒合作的涵盖交互技术、科技、艺术和文化成果展示平台</li>
<li><a title="共享网页设计相关的知识和资源平台" href="http://webdesignledger.com/" target="_blank">Webdesignledger</a>
共享网页设计相关的知识和资源平台</li>
<li><a title="高质量的设计与开发资源,丰富的灵感汇集和教程" href="http://www.webdesignshock.com/" target="_blank">WebDesignShock</a>
高质量的设计与开发资源,丰富的灵感汇集和教程</li>
<li><a title="收集了大量创意图像和视频" href="http://www.wookmark.com/" target="_blank">What is Woo</a>
收集了大量创意图像和视频</li>
<li><a title="收集您喜爱的图片和视频,并获得灵感" href="http://www.wookmark.com/" target="_blank">Wookmark</a>
收集您喜爱的图片和视频,并获得灵感</li>
<li><a title="涵盖平面视频等等" href="http://adsoftheworld.com/" target="_blank">世界优秀广告</a>
涵盖平面视频等等</li>
<li><a title="设计垂直型综合门户" href="http://www.chinaui.com/" target="_blank">优艾网</a>
设计垂直型综合门户</li>
<li><a title="为您带来最新的设计灵感" href="http://pixelclouds.com/" target="_blank">像素云</a>
为您带来最新的设计灵感</li>
<li><a title="一个基于作品集的社交网站,为创意人才和企业的搭建沟通桥梁" href="http://chuangyiren.cn/" target="_blank">创意人</a>
一个基于作品集的社交网站,为创意人才和企业的搭建沟通桥梁</li>
<li><a title="一个交流、分享国内外优秀设计资源的博客" href="http://blog.enqoo.com/" target="_blank">我们爱网页设计</a>
一个交流、分享国内外优秀设计资源的博客</li>
<li><a title="中国最具人气的大型综合性设计网站,聚集了中国绝大部分的专业设计师、艺术院校师生、潮流艺术家等年轻创意人群,是国内最活跃的原创设计交流平台" href="http://www.zcool.com.cn/" target="_blank">站酷</a>
中国最具人气的大型综合性设计网站,聚集了中国绝大部分的专业设计师、艺术院校师生、潮流艺术家等年轻创意人群,是国内最活跃的原创设计交流平台</li>
<li><a title="Behance服务网站" href="http://www.webdesignserved.com/" target="_blank">网页设计服务</a>
Behance服务网站</li>
<li><a title="发现网络上你喜欢的事物.你可以用它收集灵感,保存有用的素材" href="http://huaban.com/" target="_blank">花瓣网</a>
发现网络上你喜欢的事物.你可以用它收集灵感,保存有用的素材</li>
<li><a title="视觉中国是中国最具活力的视觉图片分享社区及创意设计产品社会化电商平台" href="http://shijue.me/" target="_blank">视觉中国</a>
视觉中国是中国最具活力的视觉图片分享社区及创意设计产品社会化电商平台</li>
<li><a title="视觉创意产业门户" href="http://shijue.me/home" target="_blank">视觉中国</a>
视觉创意产业门户</li>
<li><a title="全球顶尖创意分享平台" href="http://www.topys.cn/" target="_blank">顶尖文案</a>
全球顶尖创意分享平台</li>
</ul>
</div>
</div>
<div class="items">
<div class="item">
<h2>前端开发</h2>
<ul class="xoxo blogroll">
<li><a title="超多的浏览器兼容性在线测试,免去了在本机安装N多浏览器的烦恼" href="http://browsershots.org/" target="_blank">Browsershot</a>
超多的浏览器兼容性在线测试,免去了在本机安装N多浏览器的烦恼</li>
<li><a title="前端工程师必备的技术网站" href="http://codepen.io/" target="_blank">CodePen</a>
前端工程师必备的技术网站</li>
<li><a title="css3在线生成器" href="http://www.css3maker.com/" target="_blank">Css3Maker</a>
css3在线生成器</li>
<li><a title="HTML5中文网" href="http://www.html5china.com/" target="_blank">HTML5中文网</a>
HTML5中文网</li>
<li><a title="HTML5研究小组" href="http://www.mhtml5.com/" target="_blank">HTML5研究小组</a>
HTML5研究小组</li>
<li><a title="以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文" href="http://www.w3cplus.com/" target="_blank">w3cplus</a>
以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文</li>
<li><a title="web标准化交流会" href="http://w3ctech.com/" target="_blank">w3ctech</a>
web标准化交流会</li>
<li><a title="W3C在线检验" href="http://validator.w3.org/" target="_blank">W3C在线检验</a>
W3C在线检验</li>
<li><a title="关注跨平台开发以及Web App技术发展与实践" href="http://www.webapptrend.com/" target="_blank">Web App Trend</a>
关注跨平台开发以及Web App技术发展与实践</li>
<li><a title="苹果、Google、微软、Facebook等巨头强势联盟,加入W3C共推维基式开放网站Web Platform。该网站将提供关于HTML5, CSS3以及其他跟Web标准相关的最新优质内容,并提供关于这类技术开发、实践技巧,打造互联网上该类内容的单一、权威发布平台" href="http://www.webplatform.org/" target="_blank">Web Platform</a>
苹果、Google、微软、Facebook等巨头强势联盟,加入W3C共推维基式开放网站Web Platform。该网站将提供关于HTML5, CSS3以及其他跟Web标准相关的最新优质内容,并提供关于这类技术开发、实践技巧,打造互联网上该类内容的单一、权威发布平台</li>
<li><a title="专注前端开发,关注用户体验" href="http://www.css88.com/" target="_blank">前端开发</a>
专注前端开发,关注用户体验</li>
<li><a title="专注于网站前端设计与前端开发" href="http://www.qianduan.net/" target="_blank">前端观察</a>
专注于网站前端设计与前端开发</li>
<li><a title="前端开发为主的综合性博客性媒体,将前端分析的很透彻" href="http://www.daqianduan.com/" target="_blank">大前端</a>
前端开发为主的综合性博客性媒体,将前端分析的很透彻</li>
</ul>
</div>
<div class="item">
<h2>设计大赏</h2>
<ul class="xoxo blogroll">
<li><a title="收集和分享国内外优秀网站、优秀网页设计团队" href="http://css51.com/" target="_blank">51酷站</a>
收集和分享国内外优秀网站、优秀网页设计团队</li>
<li><a title="网页设计师联盟酷站加油" href="http://cwd.68design.net/" target="_blank">68Design酷站</a>
网页设计师联盟酷站加油</li>
<li><a title="由一些国际知名设计师组成的国际评委会" href="http://www.awwwards.com/" target="_blank">Awwwards</a>
由一些国际知名设计师组成的国际评委会</li>
<li><a title="搜罗优秀网页设计作品" href="http://bestwebgallery.com/" target="_blank">Best Web Gallery</a>
搜罗优秀网页设计作品</li>
<li><a title="优秀设计作品展示" href="http://www.cnpsd.net/" target="_blank">CNPSD</a>
优秀设计作品展示</li>
<li><a title="按类别检索设计内容" href="http://coolhomepages.com/" target="_blank">Coolhomepages</a>
按类别检索设计内容</li>
<li><a title="通过高标准评价体系来推荐网页设计作品" href="http://www.csswinner.com/" target="_blank">CSS Winner</a>
通过高标准评价体系来推荐网页设计作品</li>
<li><a title="建立于2006年,按年份月份分类索引的酷站设计集合" href="http://www.css-design-yorkshire.com/" target="_blank">Css-D-Yorks</a>
建立于2006年,按年份月份分类索引的酷站设计集合</li>
<li><a title="强大的配色分类酷站集合" href="http://cssclip.com/" target="_blank">CSSclip</a>
强大的配色分类酷站集合</li>
<li><a title="Metro风格的酷站聚合" href="http://cssdesignawards.com/" target="_blank">CSSdesignawards</a>
Metro风格的酷站聚合</li>
<li><a title="可以按分栏、菜单等不同维度筛选的酷站集合" href="http://www.cssdrive.com/" target="_blank">CssDrive</a>
可以按分栏、菜单等不同维度筛选的酷站集合</li>
<li><a title="韩国网页设计欣赏" href="http://www.dbcut.com/" target="_blank">DBCUT</a>
韩国网页设计欣赏</li>
<li><a title="精选每周40个酷站" href="http://www.designcharts.com/" target="_blank">DesignCharts</a>
精选每周40个酷站</li>
<li><a title="超过19万注册会员,众多艺术家和艺术爱好者的活跃的国际网络社区" href="http://www.deviantart.com/" target="_blank">DeviantART</a>
超过19万注册会员,众多艺术家和艺术爱好者的活跃的国际网络社区</li>
<li><a title="分享设计细节分享聚合" href="http://dribbble.com/" target="_blank">Dribbble</a>
分享设计细节分享聚合</li>
<li><a title="收集了大量电商网站优秀的模块设计方案" href="http://www.ecommr.com/" target="_blank">Ecommr</a>
收集了大量电商网站优秀的模块设计方案</li>
<li><a title="游戏设计圈聚集地" href="http://www.gameui.cn/" target="_blank">GAME UI</a>
游戏设计圈聚集地</li>
<li><a title="来自韩国的综合设计鉴赏网站,可根据分类检索" href="http://www.gdweb.co.kr/" target="_blank">GDweb</a>
来自韩国的综合设计鉴赏网站,可根据分类检索</li>
<li><a title="全球HTML 5酷站展示" href="http://html5-showcase.com/" target="_blank">html5-showc</a>
全球HTML 5酷站展示</li>
<li><a title="全球HTML 5酷站展示" href="http://www.iiiimg.com/" target="_blank">HTML5酷站</a>
全球HTML 5酷站展示</li>
<li><a title="图标界面设计欣赏" href="http://www.icondeposit.com/" target="_blank">IconDeposit</a>
图标界面设计欣赏</li>
<li><a title="韩国网页设计欣赏" href="http://www.ksodesign.com/" target="_blank">Ksodesign</a>
韩国网页设计欣赏</li>
<li><a title="优秀LOGO聚合,可根据关键词搜索" href="http://logopond.com/" target="_blank">Logopond</a>
优秀LOGO聚合,可根据关键词搜索</li>
<li><a title="内容丰富的酷设计集合" href="http://loveui.cn/" target="_blank">LoveUI</a>
内容丰富的酷设计集合</li>
<li><a title="丰富的设计作品展示" href="http://medialoot.com/" target="_blank">Medialoot</a>
丰富的设计作品展示</li>
<li><a title="响应式设计酷站集合" href="http://mediaqueri.es/" target="_blank">MediaQueries</a>
响应式设计酷站集合</li>
<li><a title="高品质中文设计交流平台" href="http://www.moosee.net/" target="_blank">Moosee摩色</a>
高品质中文设计交流平台</li>
<li><a title="高质量的网页设计的链接收集的网站" href="http://muuuuu.org/" target="_blank">MUUUUU</a>
高质量的网页设计的链接收集的网站</li>
<li><a title="超酷的设计集合,种类丰富全面" href="http://patterntap.com/" target="_blank">Patterntap</a>
超酷的设计集合,种类丰富全面</li>
<li><a title="通过色彩刷选酷站,界面本身很酷" href="http://reeoo.com/" target="_blank">Reeoo</a>
通过色彩刷选酷站,界面本身很酷</li>
<li><a title="更新频率较高的国外酷站集" href="http://siteinspire.com/" target="_blank">SiteinSpire</a>
更新频率较高的国外酷站集</li>
<li><a title="创意标志设计聚合" href="http://stocklogos.com/" target="_blank">StockLogos</a>
创意标志设计聚合</li>
<li><a title="日本优秀设计公司旗下,精选酷站,更新频率较高" href="http://bm.straightline.jp/" target="_blank">Straightline</a>
日本优秀设计公司旗下,精选酷站,更新频率较高</li>
<li><a title="Styleboost画廊" href="http://styleboost.com/" target="_blank">Styleboost</a>
Styleboost画廊</li>
<li><a title="非凡的网页、移动应用等方面的设计集合" href="http://www.thebestdesigns.com/" target="_blank">Thebestdesigns</a>
非凡的网页、移动应用等方面的设计集合</li>
<li><a title="较权威的优秀设计收录网站" href="http://www.thefwa.com/" target="_blank">TheFWA</a>
较权威的优秀设计收录网站</li>
<li><a title="国内具影响力UIRSS作品列表" href="http://www.uirss.com/gallery.html" target="_blank">UIRSS</a>
国内具影响力UIRSS作品列表</li>
<li><a title="侧重收集手机等移动客户端的优秀设计聚合" href="http://www.uisheji.com/" target="_blank">UI设计网</a>
侧重收集手机等移动客户端的优秀设计聚合</li>
<li><a title="通过详细分类展示CSS设计作品的酷站" href="http://unmatchedstyle.com/" target="_blank">unmatchedstyle</a>
通过详细分类展示CSS设计作品的酷站</li>
<li><a title="网页设计灵感" href="http://www.webcreme.com/" target="_blank">Web creme</a>
网页设计灵感</li>
<li><a title="韩国网页设计欣赏" href="http://webprogram.co.kr/" target="_blank">Webprogram</a>
韩国网页设计欣赏</li>
<li><a title="通过板式、颜色筛选的酷站集合" href="http://tympanus.net/webzibitio" target="_blank">Webzibition</a>
通过板式、颜色筛选的酷站集合</li>
<li><a title="国外一家提供html5+css3网站模版和主题的人气站点" href="https://wrapbootstrap.com/" target="_blank">Wrapbootstrap</a>
国外一家提供html5+css3网站模版和主题的人气站点</li>
<li><a title="专注互动设计" href="http://www.damndigital.com/" target="_blank">互动中国</a>
专注互动设计</li>
<li><a title="鸡西网站制作" href="http://www.7vnet.com/" target="_blank">鸡西网站制作</a>
鸡西网站制作</li>
<li><a title="书签概念的网页设计鉴赏聚合" href="http://www.designmadeingermany.de/sites-we-like/" target="_blank">德国酷站收藏</a>
书签概念的网页设计鉴赏聚合</li>
<li><a title="来自日本的网页设计鉴赏聚合" href="http://bm.straightline.jp/" target="_blank">日本每日一站</a>
来自日本的网页设计鉴赏聚合</li>
<li><a title="可按国家地区、行业、色彩来筛选酷站的聚合" href="http://www.iguoguo.net/" target="_blank">爱果果酷站集</a>
可按国家地区、行业、色彩来筛选酷站的聚合</li>
<li><a title="分享以用户体验为中心的设计" href="http://www.boxui.com/" target="_blank">盒子UI</a>
分享以用户体验为中心的设计</li>
<li><a title="国内老牌酷站欣赏" href="http://www.sj63.com/" target="_blank">设计路上</a>
国内老牌酷站欣赏</li>
</ul>
</div>
</div>
<div class="items">
<div class="item">
<h2>工具</h2>
<ul class="xoxo blogroll">
<li><a title="包含Ps、Ae、Au、Br、Dw、En、Fw、Fb、Fl、Ai、Id、Pl、Pr、Sg等Adobe家族全系列工具,简体中文,支持更新,稳定无报错" href="http://kuai.xunlei.com/d/2KvOAwIenABKGzhRab0" target="_blank">Adobe CS6 大</a>
包含Ps、Ae、Au、Br、Dw、En、Fw、Fb、Fl、Ai、Id、Pl、Pr、Sg等Adobe家族全系列工具,简体中文,支持更新,稳定无报错</li>
<li><a title="一款可以跨平台、跨设备开发应用程序设计模型的网页应用程序" href="https://www.fluidui.com/editor/live/" target="_blank">Fluid UI</a>
一款可以跨平台、跨设备开发应用程序设计模型的网页应用程序</li>
<li><a title="提供在线的JPEG格式图片优化" href="http://www.jpegmini.com/main/shrink_photo?test_coo" target="_blank">JPEG优化</a>
提供在线的JPEG格式图片优化</li>
<li><a title="在线线框制作工具" href="https://gomockingbird.com/" target="_blank">Mockingbird</a>
在线线框制作工具</li>
<li><a title="独特的油漆滤镜,上传自己的图片,通过笔刷将图片手动或自动转化成油漆图画" href="http://www.psykopaint.com/index.html" target="_blank">Psykopaint</a>
独特的油漆滤镜,上传自己的图片,通过笔刷将图片手动或自动转化成油漆图画</li>
<li><a title="分辨率测试工具,友好的列出了常用的终端分辨率" href="http://resizemybrowser.com/" target="_blank">ResizeMyBrowser</a>
分辨率测试工具,友好的列出了常用的终端分辨率</li>
<li><a title="序列号共享,你懂的" href="http://www.youserials.com/" target="_blank">YouSerials</a>
序列号共享,你懂的</li>
<li><a title="输入网址搜索出同类网站,做竞品分析利器" href="http://www.similarsitesearch.com/" target="_blank">搜索相似网站</a>
输入网址搜索出同类网站,做竞品分析利器</li>
<li><a title="浏览国外网站必备,即时翻译工具" href="http://fanyi.youdao.com/web2/" target="_blank">有道网页翻译2.0</a>
浏览国外网站必备,即时翻译工具</li>
</ul>
</div>
<div class="item">
<h2>综合素材</h2>
<ul class="xoxo blogroll">
<li><a title="每天更新的PSD素材下载" href="http://365psd.com/" target="_blank">365PSD</a>
每天更新的PSD素材下载</li>
<li><a title="背景实验室,通过标签、颜色、风格检索背景图案" href="http://www.backgroundlabs.com/" target="_blank">Backgroundlabs</a>
背景实验室,通过标签、颜色、风格检索背景图案</li>
<li><a title="国外大量优质笔刷、背景免费下载" href="http://www.brusheezy.com/" target="_blank">Brusheezy</a>
国外大量优质笔刷、背景免费下载</li>
<li><a title="WP模版下载" href="http://charmingwp.com/" target="_blank">Charmingwp</a>
WP模版下载</li>
<li><a title="按模版类型检索的素材下载" href="http://www.creattor.com/" target="_blank">CreaTTor</a>
按模版类型检索的素材下载</li>
<li><a title="一些很酷的WP主题,PSD模板" href="http://www.cssjunction.com/" target="_blank">Cssjunction</a>
一些很酷的WP主题,PSD模板</li>
<li><a title="完全免费的Web设计资源" href="http://www.designkindle.com/" target="_blank">Designkindle</a>
完全免费的Web设计资源</li>
<li><a title="设计资源分享网站" href="http://designmoo.com/" target="_blank">Designmoo</a>
设计资源分享网站</li>
<li><a title="个人博客,大量免费笔刷、纹理等下载" href="http://www.designshard.com/" target="_blank">DesignShard</a>
个人博客,大量免费笔刷、纹理等下载</li>
<li><a title="提供在线搜索LOGO功能" href="http://www.easylogo.cn/" target="_blank">Easy Logo</a>
提供在线搜索LOGO功能</li>
<li><a title="海量笔刷下载" href="http://fbrushes.com/" target="_blank">Fbrushes</a>
海量笔刷下载</li>
<li><a title="国外热门模板商场" href="http://www.flashmint.com/" target="_blank">Flash Mint</a>
国外热门模板商场</li>
<li><a title="国外较高质量矢量、PSD、图片素材免费下载" href="http://freebiesbug.com/" target="_blank">Freebiesbug</a>
国外较高质量矢量、PSD、图片素材免费下载</li>
<li><a title="设计素材搜索引擎" href="http://www.freepik.com/" target="_blank">Freepik</a>
设计素材搜索引擎</li>
<li><a title="提供免费的UI设计资源,纹理、图标等Psd文件" href="http://www.nicetabs.com/" target="_blank">NiceTabs</a>
提供免费的UI设计资源,纹理、图标等Psd文件</li>
<li><a title="国外老牌PSD文件分享网站" href="http://officialpsds.com/" target="_blank">Officialpsds</a>
国外老牌PSD文件分享网站</li>
<li><a title="种类丰富的设计资源下载" href="http://www.pixeden.com/" target="_blank">Pixeden</a>
种类丰富的设计资源下载</li>
<li><a title="丰富的设计资源,包含笔刷、PSD、模版等" href="http://www.premiumpixels.com/" target="_blank">PremiumPixels</a>
丰富的设计资源,包含笔刷、PSD、模版等</li>
<li><a title="笔刷按分类下载" href="http://www.psbrushes.net/" target="_blank">PSbrushes</a>
笔刷按分类下载</li>
<li><a title="收集大量来自追波的精致Psd文件" href="http://psddd.co/" target="_blank">Psddd</a>
收集大量来自追波的精致Psd文件</li>
<li><a title="搜罗了大量微妙的纹理图案并提供下载" href="http://subtlepatterns.com/" target="_blank">Subtle Patterns</a>
搜罗了大量微妙的纹理图案并提供下载</li>
<li><a title="网页PSD模板下载" href="http://www.templatemonster.com/" target="_blank">Templatemonster</a>
网页PSD模板下载</li>
<li><a title="综合素材下载" href="http://themeforest.net/" target="_blank">ThemeForest</a>
综合素材下载</li>
<li><a title="UI界面素材搜索引擎" href="http://ui-cloud.com/" target="_blank">UI-Cloud</a>
UI界面素材搜索引擎</li>
<li><a title="大量优秀设计教程及高质量素材下载" href="http://www.uimaker.com/" target="_blank">UI制造</a>
大量优秀设计教程及高质量素材下载</li>
<li><a title="分享网页设计资源,内容包括大量精致图片、模版、教程等" href="http://www.webdesignburn.com/" target="_blank">Webdesignburn</a>
分享网页设计资源,内容包括大量精致图片、模版、教程等</li>
<li><a title="基于PS的各种素材下载" href="http://webtreats.mysitemyway.com/" target="_blank">WebTreatsETC</a>
基于PS的各种素材下载</li>
<li><a title="视觉中国旗下素材站,提供高质量的素材资料" href="http://down.chinavisual.com/" target="_blank">下吧</a>
视觉中国旗下素材站,提供高质量的素材资料</li>
<li><a title="囊括世界上众多品牌及公司的LOGO源文件并提供下载" href="http://brandsoftheworld.com/" target="_blank">世界品牌LOGO检索</a>
囊括世界上众多品牌及公司的LOGO源文件并提供下载</li>
<li><a title="品味经典包装设计,版式设计" href="http://www.epinv.com/" target="_blank">亿品元素</a>
品味经典包装设计,版式设计</li>
<li><a title="专注于提供网页素材下载,其内容涵盖网页素材,矢量素材,JS广告代码,小图片,网页背景,导航菜单,PNG图标等" href="http://www.lanrentuku.com/" target="_blank">懒人图库</a>
专注于提供网页素材下载,其内容涵盖网页素材,矢量素材,JS广告代码,小图片,网页背景,导航菜单,PNG图标等</li>
<li><a title="素材设计共享平台、优质图片及源文件下载" href="http://www.nipic.com/" target="_blank">昵图网</a>
素材设计共享平台、优质图片及源文件下载</li>
<li><a title="站酷设计素材分类" href="http://www.zcool.com.cn/gfxs/" target="_blank">站酷素材</a>
站酷设计素材分类</li>
<li><a title="2006年创办的中文素材网站" href="http://www.sccnn.com/" target="_blank">素材中国</a>
2006年创办的中文素材网站</li>
</ul>
</div>
<div class="item">
<h2>字体</h2>
<ul class="xoxo blogroll">
<li><a title="优秀英文字体精选,各个经典有特色" href="http://www.dafont.com/" target="_blank">Dafont</a>
优秀英文字体精选,各个经典有特色</li>
<li><a title="直观的英文字体下载网站" href="http://www.ddfont.com/" target="_blank">DdFont</a>
直观的英文字体下载网站</li>
<li><a title="免费为Windows和Mac系统提供下载免费的字体" href="http://zh.fonts2u.com/" target="_blank">Fonts2u</a>
免费为Windows和Mac系统提供下载免费的字体</li>
<li><a title="上传字体图片帮您找到英文字体安装文件" href="http://www.myfonts.com/WhatTheFont/" target="_blank">Myfonts</a>
上传字体图片帮您找到英文字体安装文件</li>
<li><a title="英文字体下载网站,预览直观" href="http://www.showfont.net/" target="_blank">ShowFont</a>
英文字体下载网站,预览直观</li>
<li><a title="提供在线预览的文字组合排版工具" href="http://font-combinator.com/" target="_blank">The Web Font</a>
提供在线预览的文字组合排版工具</li>
<li><a title="上传字体图片帮您找到中文字体安装文件" href="http://www.qiuziti.com/" target="_blank">求字体</a>
上传字体图片帮您找到中文字体安装文件</li>
<li><a title="个性字体不必用图片,用字符就可以实现" href="http://www.google.com/webfonts" target="_blank">谷歌网络字体</a>
个性字体不必用图片,用字符就可以实现</li>
</ul>
</div>
<div class="item">
<h2>图库</h2>
<ul class="xoxo blogroll">
<li><a title="微利正版创意图片素材服务" href="http://www.123rf.net/" target="_blank">123RF</a>
微利正版创意图片素材服务</li>
<li><a title="顶级摄影图片分享网站" href="http://500px.com/" target="_blank">500px</a>
顶级摄影图片分享网站</li>
<li><a title="国外超全的免费背景图,各种材质纹理" href="http://www.cgtextures.com/" target="_blank">Cgtextures</a>
国外超全的免费背景图,各种材质纹理</li>
<li><a title="著名的创意资源供应机构" href="http://www.corbisimages.com/" target="_blank">Corbis</a>
著名的创意资源供应机构</li>
<li><a title="flickr全球图片库" href="http://www.flickr.com/" target="_blank">flickr</a>
flickr全球图片库</li>
<li><a title="来自日本的原尺寸图片检索工具,丫竟然支持中文搜索!并且无底线啊!" href="http://gensun.org/" target="_blank">GenSun</a>
来自日本的原尺寸图片检索工具,丫竟然支持中文搜索!并且无底线啊!</li>
<li><a title="寻找美轮美奂的无版权限制的图片" href="http://pixabay.com/" target="_blank">pixabay</a>
寻找美轮美奂的无版权限制的图片</li>
<li><a title="知名的收费图片网站" href="http://www.shutterstock.com/" target="_blank">Shutterstock</a>
知名的收费图片网站</li>
<li><a title="国外创意图片图库" href="http://www.studio25.ro/EN" target="_blank">studio25</a>
国外创意图片图库</li>
<li><a title="国外创意广告设计图库" href="http://www.timtadder.com/" target="_blank">TimTadder</a>
国外创意广告设计图库</li>
<li><a title="韩国图库网站" href="http://www.topicimages.com/" target="_blank">TOPicimages</a>
韩国图库网站</li>
<li><a title="国外创意图片库" href="http://vi.sualize.us/" target="_blank">visualizeus</a>
国外创意图片库</li>
<li><a title="强大的检索功能图库,尺寸超大" href="http://wallbase.cc/home" target="_blank">Wallbase</a>
强大的检索功能图库,尺寸超大</li>
<li><a title="国内人气较高版权图库" href="http://www.quanjing.com/" target="_blank">全景视觉</a>
国内人气较高版权图库</li>
<li><a title="提供来自全球的优质创意图片和影视素材" href="http://www.gettyimages.cn/" target="_blank">华盖创意</a>
提供来自全球的优质创意图片和影视素材</li>
</ul>
</div>
</div>
<ul class="navs-speed">
<li>资讯</li>
<li>数据研究</li>
<li>教程</li>
<li>色彩</li>
<li>设计圈子</li>
<li>UX研究所</li>
<li>UX团队</li>
<li>图标</li>
<li>移动互联网</li>
<li>栅格化</li>
<li>灵感</li>
<li>前端开发</li>
<li>设计大赏</li>
<li>工具</li>
<li>综合素材</li>
<li>字体</li>
<li>图库</li>
</ul>
</div>

转载请注明:七网科技 » 大前端 D8主题 导航页面模板

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (11)

  1. 有没有 后台使用说明啊 后台的页面案例展示怎么做啊 显示 No param pid
  2. 噢,为这种分享精神赞一个~
    梦想家2014-07-04 23:39 回复
    • 感谢对七网科技的支持!
      Danny.✔2014-07-05 14:57 回复
  3. 请问,设置好了可以呈现网址导航的界面,但在左侧会有一个导航分类的条,如何设置不显示?
    大师兄来了2015-01-10 10:11 回复
  4. 不赖的主题,感谢分享。
    娱乐名人榜2015-01-27 02:02 回复
  5. 请问下 你这个高亮代码 是用的什么插件 还是什么编辑器?
    窗外雨潺潺2015-01-28 23:08 回复
  6. 博主。我模仿你这个d8主题,写了dux主题适应—————大前端dux主题导航页面模板,以下是链接,需要的同学可以到我的网站看下。知园博客。 http://www.zycsdn.com/dux-navs/ 查看demo。
    知园2015-05-10 19:08 回复
  7. 好久没来了,过来踩踩
    爱奇趣分享网2015-08-24 21:15 回复
  8. 网站不错很漂亮,欢迎互访!
    歪妖内涵网2015-09-01 20:59 回复