百度禁止转码的代码

最近一直在研究自适应的网站,在论坛查到百度禁止转码的代码,以及自适应的一点知识,现在贴出来,分享给大家。

第一步,把如下代码直接复制到<head></head>里面。

<meta http-equiv="Cache-Control" content="no-transform" /> 
 <meta http-equiv="Cache-Control" content="no-siteapp" />
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

前面两个meta,no-siteapp和no-transform,是告诉搜索引擎不要把网页转码。第三个meta,声明网页可以缩小放大。

 第二步,在<head></head>里加上如下css代码。

<style type="text/css"> 
 @media(max-width:960px)
 {
   
 }
 </style>

这段css代码,意思是在屏幕宽度小于960px的时候执行的样式,当然你可以把960px改为其他更小的宽度,例如760px。

 接下来,我们要做的就是把那些不需要在手机网页上显示的内容隐藏掉。如何隐藏?这就需要看懂网页的html代码了,需要分析每一个模块使用的div,例如头部的div、导航栏的div、正文的div、侧栏的div、页脚的div,然后,就使用css隐藏不用显示的div,代码很简单,就是display:none。


 手机网页只需显示正文,把其他部分全部隐藏,代码如下:

<style type="text/css"> 
 @media(max-width:960px)
 {
      /* 网页全屏显示 */
     body {width:100%;} 

     /* 正文全屏显示 */
     #divMain{width:100%} 

     /* 为了避免正文图片超出屏幕宽度 */
     /* 正文图片宽度最多是屏幕宽度的90% */
     #divMain img{max-width:90%} 

     /* 隐藏头部、导航、侧栏、页脚 */
     #divHead{display:none}
     #divNav{display:none}
     #divSide{display:none}
     #divBottom{display:none}
 }
 </style>

这样,当在手机浏览网页时,就只显示正文了。不过要把手机网页自适应得有头有尾,你还需要补充编写一些代码,例如编写针对手机网页的头部、导航和页脚的div,编写后默认为隐藏,在手机里再显示。

<style type="text/css"> 
 /* 默认隐藏手机版头部、导航和页脚 */
 #divHead_mobile{display:none}
 #divNav_mobile{display:none}
 #divBottom_mobile{display:none}
 @media(max-width:960px)
 {
      /* 网页全屏显示 */
     body {width:100%;} 

     /* 正文全屏显示 */
     #divMain{width:100%} 

     /* 为了避免正文图片超出屏幕宽度 */
     /* 正文图片宽度最多是屏幕宽度的90% */
     #divMain img{max-width:90%} 

     /* 隐藏头部、导航、侧栏、页脚 */
     #divHead{display:none}
     #divNav{display:none}
     #divSide{display:none}
     #divBottom{display:none}

     /* 显示手机版头部、导航和页脚 */
     #divHead_mobile{display:block}
     #divNav_mobile{display:block}
     #divBottom_mobile{display:block}
 }
 </style>


原创文章转载请注明:广告联盟大事记 www.shukoe.com

关键词:

相关文章

必填

必填

◎已有 2 人评论

  1. 2楼
    用户头像
    2016-12-19 18:15
    百度转码有时其实也很糟糕
  2. 1楼
    用户头像
    2016-12-19 12:31
    百度这作法都的好吗?[生气]