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

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

作者: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:响应  网页  设计  快速  教程  适合  个人  
  • 相关搜索
图片推荐
    从校内网、开心网到微博、微信 揭秘社交产品的十年

    从校内网、开心网到微博、微信 揭秘社交产品的十年

    摘要:在我看来,我们中国人很难通过简单的线上信息和线上交流建立信任,还是要见过面才能算真正结识一个人,也只有在线下才能进行真正深入有效的交流。所以我们做会会是尝试从线上线下结合的方式,帮助用户搭建一个
    阿里推出的“小铺”要重新打造移动端淘宝

    阿里推出的“小铺”要重新打造移动端淘宝

    [摘要]卖家通过手机淘宝登陆即可轻松实现上货、发货和店铺管理等功能。  腾讯科技讯(孙宏超)4月14日消息,今天上午阿里巴巴在无线卖家端推出战略级工具小铺,卖家通过手机淘宝登陆即可轻松实现上货、发货和
    浅谈如何做好长尾关键词

    浅谈如何做好长尾关键词

    相信做SEO的都听过长尾理论,与目标关键词一般用首页优化不同,长尾关键词一般存在于网站内容页面,尽管搜索量非常少,但这样的词的数量可以无限多,做好长尾关键词优化,可以源源不断的为网站带来庞大的流量。那
    关键词如何选择定位?新站长必知

    关键词如何选择定位?新站长必知

    关键词和普通的市场产品一样,也是同样有竞争度大小的,竞争度越大,说明这个词优化起来难度也就越大,就比如我搜索电影票预定这个词,收录结果为871万,说明竞争度还算可以,这种词如果优化的好,大概需要三个月
你是怎么知道非凡网赚网的?
  •   
  • 联系QQ 邮箱:976382653@qq.com 微信:976382653
    在线留言
    发布软文
    广告自助购
    文章调用
    常见问题
    保存到桌面