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

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

作者: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:响应  网页  设计  快速  教程  适合  个人  
  • 相关搜索
图片推荐
    不改变这两点 你的B2B内容营销基本被判了死刑

    不改变这两点 你的B2B内容营销基本被判了死刑

    如果你认为内容营销算不上一个足够大的挑战,( 一方面花费大量的时间创建和分发内容,另一方面又要又要衡量这些内容是否能够驱动用户进行消费从而获取回报。)那么想象一下,B2B领域针对技术的内容营销人员,又
    SEO技巧篇01:一篇文章三个标题

    SEO技巧篇01:一篇文章三个标题

    可能很多人不明白我这个标题的意思,一篇文章就一个标题,怎么有三个标题呢?其实我说的标题是站在SEO的角度来阐述的文章标题(title1、title2、title3)。    文章是一个网站流量极其重要
    最近很火的小红书,是如何创造引爆点的?

    最近很火的小红书,是如何创造引爆点的?

    购物平台小红书成立不过两年,百度指数两周内飙升30倍,APP Store排名三天内超越京东、唯品会。6月6日周年庆,帅哥送快递引爆朋友圈。怎么做到的?从环境威力法则、个别人物法则及附着力法则来分析。 
    产品运营:APP上线前,如何做运营推广工作?

    产品运营:APP上线前,如何做运营推广工作?

    一 竞品分析  1.选择竞品,做好定位(选择两个产品最好,最多三个)  如何获取竞品?  A 百度搜索类似产品关键词,假设你的产品是一款旅游分享类APP,你可以输入主要关键词旅游app,一般排在自然排
    分析网站以提醒大家建站需注意哪些方面

    分析网站以提醒大家建站需注意哪些方面

    一、代码部分  (1)代码不完整,缺少结束标签,建议加上;另外核心关键词设置太多,建议3~5个最佳;而且title最好放到meta部分前面。  (2)可以适当使用一个h1标签,最好加在核心关键词上,增
    网络营销之——农田营销法则

    网络营销之——农田营销法则

    其实很多事情都是想通的,现下最流行的网络营销和传统的营销模式区别在那?就是营销的手段不同,采用的媒介不同,但是它们的最终目的都是相同的,为了品牌或是销售的提升。今天我们不讨论两种营销方式的优劣,从本质
你是怎么知道非凡网赚网的?
  •   
  • 联系QQ 邮箱:976382653@qq.com 微信:976382653
    在线留言
    发布软文
    广告自助购
    文章调用
    常见问题
    保存到桌面