当前位置:首页响应式网页设计的快速教程(适合个人站) 举报文章

响应式网页设计的快速教程(适合个人站)

作者:admin    来源:用户投稿    时间:2015.6.11   

自适应网页设计 响应式网页设计 响应式 移动建站

  做 过wap站、做过siteApp、做过第三方,也做过独立APP,现在又做了个自适应的模板。所谓“响应式网页设计(Responsive Web Design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。就是入本站域名,手机、平板、PC端显示的效果不同的,但是 URL确是相同的。

  响应式网站,利于SEO(统一了URL),利于用户体验,也利于用户分享,如下图所示:

  

自适应网页设计 响应式网页设计 响应式 移动建站

  (图为iphone显示效果)

  

自适应网页设计 响应式网页设计 响应式 移动建站

  (图为ipad显示效果,注意导航的变化)

  

自适应网页设计 响应式网页设计 响应式 移动建站

  (图为安卓手机微信上显示效果)

  

自适应网页设计 响应式网页设计 响应式 移动建站

  (PC版的直接就是现在这个界面了)

  这是怎么做的呢?

  其实完全是靠张力博主(QQ445671696)的鼎力相助,他用的是本站移植到Wordpress的模板,后面经过多次修正与完善,制作了响应式的网页模板,后自发的为我制作了一套z-blog的自适应模板,可谓青出于蓝而胜于蓝。

  在他的协助下,我只用了一个下午时间,把卢松松博客的全站替换成了自适应主题。

  核心内容在于:导航栏和CSS的两个变化。

  希望学习的朋友请自行查看本站源代码,请注意:

  1,网站导航两个,一个PC端,一个移动端,注意加粗部分。

  PC段导航:

  

自适应网页设计 响应式网页设计 响应式 移动建站
好文打赏,给Ta鼓励
扫一扫用手机阅读本文
Tags:响应  网页  设计  快速  教程  适合  个人  
  • 相关搜索
图片推荐
    企业网站优化内容建设出现的几大突出问题

    企业网站优化内容建设出现的几大突出问题

    笔者在维护企业网站的过程中发现了几个非常重要的问题,企业网站在内容建设的过程中出现了很多问题,这些问题如果长时间的不去改正日后势必会造成很严重的问题,那么,当下作为站长我们在进行内容优化的过程中需要重
    【QQ空间营销】之QQ营销的三个概念

    【QQ空间营销】之QQ营销的三个概念

    昨天的文章,被和谐了,检查了几遍,没查出来敏感词在哪里。重新翻写一下,发出来。  首先提到三个概念。流量,人气,粉丝。  流量也就是访问量,人气建立在流量的基础,代表着一种氛围。一些网站有流量没人气,
    网站关键词该如何布局与设置

    网站关键词该如何布局与设置

    网站关键词该如何布局?关键词布局一般分为首页关键词、栏目关键词、内容页关键词、专题页与营销页是网站运营一段时间后才能得出来的页面。通过用户访问数据及点击页面、停留时间及业务咨询后可以更深的了解用户真正
    变废为宝的创业公司:垃圾里隐藏的商机

    变废为宝的创业公司:垃圾里隐藏的商机

    创造力为企业重新注入了活力。现在让我们来了解一下环保行业这一系列独特的产品,服务和技术,以及那些把自己的梦想变成现实的商业巨头是如何破茧而出的。  当其他人看到的是废品、有瑕疵或未完成的事物时,精明的
    实操手册与心得:小米是如何引爆的?

    实操手册与心得:小米是如何引爆的?

    虎嗅注:《参与感小米口碑营销内部手册》为小米联合创始人黎万强先生的新书,已成为近期互联网圈内外竞相传阅的红宝书,连素来与小米唱反调的周鸿祎亦在360内部推荐员工阅读此书:360的同事们特别是产品经理和
    卖掉用户和产品 情怀过后科技雅虎已死 投资雅虎重生

    卖掉用户和产品 情怀过后科技雅虎已死 投资雅虎重生

    摘要:雅虎完成核心业务的出售,互联网上满满都是唏嘘。情怀过后,你也需要知道:这到底是场什么交易,雅虎还给自己剩下点什么?    雅虎卖掉的,首先是用户  在经历了四个多月的拍卖后,雅虎终于将自己的核心
你是怎么知道非凡网赚网的?
  •   
  • 联系QQ 邮箱:976382653@qq.com 微信:976382653
    在线留言
    发布软文
    广告自助购
    文章调用
    常见问题
    保存到桌面