动易SW6.8网站系统改自适应支持手机访问。
由于本站所在服务器不支持最新动易SF整站系统，而动易sw6.8整站系统现在目前还有相当用户，在搜索一段时间任然无法找到修改支持自适应完美支持手机浏览方案，所以本人参考各家之长修改了这个动易sw6.8整站系统支持手机浏览。其实也简单，只是需要几步操作和修改。
第一步，非常简单，把如下代码直接复制到<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。
<link rel="stylesheet" rev="stylesheet" href="/Skin/hy.css" type="text/css" media="screen" />
<link href='/Skin/hympcss3.css' rel='stylesheet' type='text/css'>
hy.css是设定网页宽度等。而hympcss3.css是设定部分隐藏。
第三步：接下来，我们要做的就是把那些不需要在手机网页上显示的内容隐藏掉。如何隐藏？这就需要看懂网页的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>
第四步：改写主css，把默认的css改成自适应的
body{
margin:0 auto;
/*width:1180px;*/
width:1224px;
font-size:13px;
color:#1C1C1C;
/*background:#494949;*/
background:#EFEFEF;
font-family:verdana, "宋体";
}
a{
text-decoration: none;
font-family:verdana, "宋体";
}
a:link {
color: #000000;
}
a:visited {
color: #2A7A98;
}
a:hover {
color: #AE0927;
text-decoration: underline;
}
a:active {
color: #366C13;
text-decoration: none;
}
ul{
list-style-type:none;
list-style-position : outside;
margin:0 0 0 0;
padding:0 0 0 0;
word-break:break-all;
}
li{
margin:0 0 0 0;
padding:0 0 0 0;
}
p{
margin:0 0 0 0;
padding:0 0 0 0;
word-break:break-all;
}
img{
border:0;
}
第五步，修改内容页把原来代码框架table 改成div形式
<table class=main_title_760 style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width="100%" border=0>
<tr>
<td vAlign=center width="3%"><IMG src="{$InstallDir}Images/arrow.gif" align=absMiddle></td>
<td width="66%"><STRONG>{$ArticleTitle2}</STRONG></td>
<td width="18%">{$ArticleProperty}</td>
<td align=right width="13%">【字体：<A href="javascript:fontZoomA();"><FONT color=#ffffff>小</FONT></A> <A href="javascript:fontZoomB();"><FONT color=#ffffff>大</FONT></A>】</td>
</tr>
</table>
修改成：
<div class="post-body">
<p> <!--#include file="/logo/wz/webtopwz.htm"--> <br>
{$ArticleContent} <!--#include file="/logo/wz/webwxdowwz.htm"--> <p></p> <center>{$Vote}</center></p>
<p> {$Class_Custom_Content1} <br><script language='javascript' src='/Shop/JS/dianqi_news.js'></script></p>
<p class="height10"></p>
</div>
<ul class="msg mutuality">
<li class="mutarticle" style="font-size:14px;color:#4D6539;"><b>扩展阅读</b></li>
<li class="mutarticle" ></li>
</ul>
<div class="post-nav"> {$PrevArticle}</div>
<div class="post-nav"><a href="/">【返回网站首页】</a> <a href="">【返回{$ClassName}】</a> </div>
<div class="post-nav">{$NextArticle}</div>
<div class="post-nav"> 【字体：<a href="javascript:fontZoomA();" class="top_UserLogin">小</a> <a href="javascript:fontZoomB();" class="top_UserLogin">大</a>】{$ArticleAction} </div>
<div class="function" id="divSearchPanel"><h2 class="post-single-title"><h2>
</div>
这样，当在手机浏览网页时，就只显示正文了。
大家也可以下载本人改好的三个文件 hy.css、hympcss3.css和文章内容页手机模板代码
|
|
|
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）