传统的网站如何完成向移动设备的快速转型？ 通过移动适配技术可以实现，而移动适配主要通过底层的web技术开发手段来完成，下面将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃！

1、允许网页宽度自动调整
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。

<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

查看更多内容...

WampServer服务器多站点配置后打不开phpMyAdmin的解决办法 (Forbidden You don't have permission to access / on this server.解决方法)

1、首先找到wampserver安装目录下面的httpd.conf配置文件 文件路径：电脑磁盘:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf打开httpd.conf配置文件，找到下面代码：

#   onlineoffline tag - don't remove
    Order Deny,Allow
    Deny from all
    Allow from 127.0.0.1

将这段代码修改为：

查看更多内容...

WampServer介绍：
WampServer是一款由法国人开发的Apache Web服务器、PHP解释器以及MySQL数据库的整合软件包。或多多少减少了开发人员将时间花费在繁琐的配置环境过程，从而腾出更多的时间去做开发。WampServer即是window下的apache、php和mysql的服务器软件。

语言：
wampserver支持22种语言，其中有中文简体和中文繁体（安装并启动后右键托盘图标即可轻松更改）。

特点：
支持中文语言，一键安装，省时省力；任何人都可以轻松搭建；集成Apache/MySQL/PHP/PhpMyadmin；支持PHP扩展、Apache的mod_rewrit；一键启动、重启、停止所有服务，一键切换到离线状态等等。 支持：
支持phpmyadmin,SQLiteManager。不用去输入复杂的SQL语句管理MYSQL数据库，直接从phpmyadmin管理即可。

查看更多内容...

最近在给客户建站的过程中遇到一个问题，使用dedecms织梦的时候，搜索部分关键在时，搜索结果显示页面会错位，调试了很久，终于找到了解决的办法，把它分享给大家。

文章描述用的是cn_substr进行字数限制是，在织梦搜索页面很有可能因为cn_substr函数把描红的html文件截取，描红的html为$k。

估计dedecms织梦的搜索试图在info出来完成后在把关键字描红，而cn_substr是在织梦的搜索试图描红后今天字符的截取，所以造成搜索页布局混乱，页面错位。

查看更多内容...

常用css初始化：

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,h12,
p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,
em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,
center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,
tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,
figcaption,footer,header,hgroup,menu,nav,output,ruby,section,
summary,time,mark,audio,video
{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
abbr[title],acronym[title]{border-bottom:thin solid;cursor:help;}
ul li{list-style:none;}
body{width:100%;height:100%;text-align:left;font-size:12px;font-family:Microsoft Yahei;background-color:#fff;}
h1,h2,h3,h4,h5,h6,h12{font-weight:bold;font-family:Microsoft Yahei,;}
h1{font-size:24px;line-height:30px;}
h2{font-size:22px;line-height:26px;}
h3{font-size:16px;line-height:24px;}
h4{font-size:14px;line-height:20px;}
h5{font-size:14px;line-height:20px;}
h6{font-size:14px;line-height:20px;}
h12{font-size:20px;line-height:26px;}
small{font-size:10px;line-height:16px;}
dl{font-size:12px;}
dt{font-weight:bold;}
a{color:#000;text-decoration:none;outline:0;}
a:hover{color:#000;text-decoration:none;}
fieldset,img{border:0;}
.clear{clear:both;}

HTML代码：

<div id="show"></div>

查看更多内容...

下拉菜单网页代码：

<li class="dropdown">
    <a href="" title="">一级菜单</a>
    <ul>
        <li><a href="" title="">二级菜单</a></li>
        <li><a href="" title="">二级菜单</a></li>
        <li><a href="" title="">二级菜单</a></li>
        <li><a href="" title="">二级菜单</a></li>
        <li><a href="" title="">二级菜单</a></li>
    </ul>
</li>

查看更多内容...

要显示时间的地方：

<div id="time"></div>

查看更多内容...

背景层样式：

.index-adv{ 
    width:100%; 
    height:600px; 
    background:url(../images/brand1.jpg) no-repeat 50% 50%; 
    background-size:1920px; 
    transition:all ease-out 5s;
    -moz-transition:all ease-out 5s;
    -webkit-transition:all ease-out 5s;
    -o-transition:all ease-out 5s;
    -ms-transition:all ease-out 5s;
}

查看更多内容...

效果基于jquery，首先需要引入jquery。

HTML代码：

<div id="backTop" style="display: block;"></div>

CSS代码：

#backTop {
    width: 54px;
    height: 54px;
    overflow: hidden;
    right: 15px;
    position: fixed;
    z-index: 100;
    bottom: 30px;
}
#backTop a {
    display: block;
    border-radius: 2px;
    width: 54px;
    height: 54px;
    overflow: hidden;
    background: url('图片路径') no-repeat;
}

查看更多内容...