做服务更好的
赢咖娱乐公司
当前地位:赢咖娱乐 > 建站资讯 > 赢咖娱乐

赢咖娱乐报道如何制作兼容性很高的网页(主求性价比,ie9)_最新拉菲腾讯分分彩运动上赢咖娱乐官网

颁布日期:2018-10-09 10:36:02作者来源:方维网络扫瞄次数:83 标签: 网站前端开拓    

制作一个兼容性很高的网页不难,但是追求性价比与兼容性的成比例的网页就很难了。笔者自己整理了一份笔记希望对看见的人有点帮助。
笔者写的网页基本上兼容主流扫瞄器(火狐,谷歌,360,qq,ie9以上【包括ie9】)。

从css动身:

基本使用的兼容代码:

(1)
transition: all 500ms;
-webkit-transition: all 500ms;
 
(2)
transform: scale(1.1);
-webkit-transform: scale(1.1);
 
(3) .box > li{}
 
(4)@media书写方法:
@media screen and (max-width: 1400px) {}
@media screen and (max-width: 1366px) {}
@media screen and (max-width: 1280px) {}

从js动身:

2.1使用前需要加的代码:

Js(未加载jquery):
window.onload=function(){}
Jquery
  $(function(){}
 

2.2使用js实现鼠标悬停效果肯定要写成这样!

    $(function(){
        $(".nav li").hover(function(e){
         $(this).children('.nav-cell').stop(fasle,true).slideToggle(250);
        });
        $(".nav-cell dd").hover(function(e){
            $(this).children('a').toggleClass("on");
        $(this).children('.nav-cell1').stop(fasle,true).slideToggle(500);
        });
    })
 
 
解释红色文字[stop(fasle,true)]的意义:
.stop 是jQuery中用于操纵页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。
   第一个参数的意义是是否清空动画序列,也就是stop的是当前元素的动画效果还是停止后面附带的一切动画效果,一般为false,跳过当前动画效果,执行下一个动画效果;
   第二个参数是是否将当前动画效果执行到最后,意义就是停止当前动画的时刻动画效果刚刚执行了一般,这个时刻想要的是动画执行之后的效果,那么这个参数就为true。否则动画效果就会停在stop执行的时刻。

2.3 图片轮播使用slick.js(具体使用方法我会在下个月写文档)

从html的基本代码动身:(重点!!!)

3.1 要有规律

Eg:
编写header代码
<header>
    <div class="header">
        <div class="box clearfix">
            <ul class="nav">
                <li><a href="index.html">赢咖娱乐</a></li>
<li>
                    <a href="jjzm.html" class="on">家居照明</a>
                    <div class="nav-cell">
                        <dl class="clearfix">
                            <dd>
                                <a>教室照明</a>
                                <div class="nav-cell1">
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                </div>
                            </dd>
                            <dd>
                                <a>黑板照明</a>
                                <div class="nav-cell1">
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                </div>
                            </dd>
                            <dd>
                                <a>应急照明</a>
                                <div class="nav-cell1">
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </li>
                <li><a href="jyzm.html">教训照明</a></li>
                <li><a href="brand.html">品牌中心</a></li>
                <li><a href="ser.html">服务中心</a></li>
                <li><a href="about.html">关于微观</a></li>
            </ul>
        </div>
    </div>
</header>
效果图:

前端制作

3.2编写进程要注释解释说明代码,块与块之前要注释分隔

  原因:代码后续可能由别人接手,方便他人,也方便自己后期修改。
效果图:

CSS代码

 
以上为笔者的经验,每个人写代码都有每个人的习惯。如有失误,希望您能指出;不喜勿喷,谢谢。

作者:方维网络冯秋宁
如没特别注明,文章均为方维网络原创,转载请注明来自/news/4642.html

相关网站设计案例

相关推举新闻

如何让你的网页焕然...

大家都知道,我们做网站的目的是吸引客户,这是一种述求,我们希望我们...

日期:2018-10-09 扫瞄次数:100

网页设计中的对齐、块面和...

设计中空间通过划分即发生了结构,这个结构图中使不同的元素统一成...

日期:2018-10-09 扫瞄次数:183

网页设计篇之微交互

今天方维网络便和大家介绍下在网页设计中十分细节的部分,但也是...

日期:2018-10-09 扫瞄次数:217

高品德网页平面配色要点

以基色70%、副色25%、重点色5%为标准 基色(基调色,即使用面积最大...

日期:2018-10-09 扫瞄次数:247

网页设计中字体的选择

赢咖娱乐文化其中一点值得自豪和宣传的就是书法艺术,由于操作系统默认...

日期:2018-10-09 扫瞄次数:301

T6官网登录移动端网页站点被百度...

近期方维网络官方移动端网页被百度强行转码了,转码后JS代码失效,在...

日期:2018-10-09 扫瞄次数:544

深圳网页制作:网页开展的...

网站这东西在如今已经最常见不过了,电脑网站、T6官网登录网站、微网站...

日期:2018-10-09 扫瞄次数:324

响应式网页设计中图片...

比较传统的网页设计和响应式网页设计,用户能够直观感受到一个不同...

日期:2018-10-09 扫瞄次数:362

简单介绍T6官网登录微信登录及PC...

在网上查到很多种微信扫码的方法,有些思路讲的很好,跟我的思路差不...

日期:2018-10-09 扫瞄次数:809

不能错过的网页设计专家

越来越多的公司和个人认识到了企业网站的重要性。然而,当...

日期:2018-10-09 扫瞄次数:292

找公司做网站 别提如下三...

顾客是上帝这句话,暗含这这样几层意义。 一,顾客的提议,都是对的,企...

日期:2018-10-09 扫瞄次数:113

如何让你的网页焕然...

大家都知道,我们做网站的目的是吸引客户,这是一种述求,我们希望我们...

日期:2018-10-09 扫瞄次数:100

相关标签
?网页设计网页设计网页分辨率开放式网页网页前端网页设计师
赢咖娱乐无极3娱乐
服装赢咖娱乐无极3娱乐微信小程序定制开拓无极3娱乐教训培训网站无极3娱乐
Sitemap
条评论
Sitemap
条评论