精华内容
下载资源
问答
  • 网页常用加载页面的实现原理

    千次阅读 2019-04-09 15:11:01
    根据网页上各种加载页面,大概总结了下面几种比较常用的实现方法: 1.利用定时器实现加载页面; 2.利用readyState判断实现加载页面; 3.利用滚动条+readyState判断实现加载页面; 4.利用滚动条+onload实现加载...

    本文主要是来分析加载页面的实现原理,因为好的加载页面可以提高用户访问的兴趣度,也能让用户远离枯燥的等待;根据网页上各种加载页面,大概总结了下面几种比较常用的实现方法:

    1.利用定时器实现加载页面;

    2.利用readyState判断实现加载页面;

    3.利用滚动条+readyState判断实现加载页面;

    4.利用滚动条+onload实现加载页面;

    5.利用百分比增加+onload实现加载页面。

    利用定时器实现加载页面

    html代码和css样式如下图,这一块比较简单,也不是本文重点,代码可自行查看下图。

    Tips:加载页面的动画效果是图标进行旋转,可根据实际情况修改成属于自己的动画效果(现在很多网页的动画效果都不错,可进行参考)。

    实现原理是利用了定时器(setTimeout)功能,对加载页面显示3s(3000),然后消失隐藏。

    Tips:缺点就是由于写死了显示时间,所以图片太大加载比较慢,会导致加载页面隐藏了,但是图片还未全部加载完;或者图片太小加载比较快,又会导致多等待时间。

    利用readyState判断实现加载页面

    html和css跟第一种方法共用,可自行查看上面的代码。

    实现原理是利用了页面加载状态改变时的事件(onreadystatechange),判断readyState的状态如果是载入完成(complete),则隐藏加载页面。

    利用滚动条+readyState判断实现加载页面

    html代码和css样式如下图,这一块比较简单,也不是本文重点,代码可自行查看下图。

    Tips:只贴出不同于第一种方法的css样式。

    实现原理是利用animate让滚动条先显示到90%(运行时间1s),然后判断readyState的状态如果是载入完成(complete),则让滚动条显示到100%并隐藏加载页面。

    Tips:适合于打开就想要一个交互体验的用户。

    利用滚动条+onload实现加载页面

    html和css跟第三种方法共用,可自行查看上面的代码。

    实现原理详细步骤如下:

    1.首先使用$.each方法遍历图片数组(imgArray)来获取图片的地址(val);

    2.然后使用Image的onload方法,每加载完一张图片数量就加1(count++);

    3.最后使用animate显示滚动条的宽度(Math.round(count / len * 100) + '%'),实现滚动条一个动态加载的过程;当全部图片加载完毕后(count >= len),隐藏加载页面。

    利用百分比增加+onload实现加载页面

    html代码和css样式如下图,这一块比较简单,也不是本文重点,代码可自行查看下图。

    Tips:百分比的外框利用round进行旋转。

    实现原理详细步骤如下:

    1.首先使用$.each方法遍历图片数组(imgArray)来获取图片的地址(val);

    2.然后使用Image的onload方法,每加载完一张图片数量就加1(count++);

    3.最后把计算出的百分比(Math.round(count / len * 100) + '%')替换span的html内容,实现百分比动态变化过程;当全部图片加载完毕后(count >= len),隐藏加载页面。

     

    展开全文
  • 网页页面布局常见的命名规范

    千次阅读 2018-10-28 08:54:50
    头:header 内容:content、container ...页面外围控制整体布局宽度:wrapper 左、右、中:left、right、center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:dow...

    头:header

    内容:content、container

    尾:footer

    导航:nav

    子导航:subnav

    侧栏:sidebar

    栏目:column

    页面外围控制整体布局宽度:wrapper

    左、右、中:left、right、center

    登录条:loginbar

    标志:logo

    广告:banner

    页面主体:main

    热点:hot

    新闻:news

    下载:download

    菜单:menu

    子菜单:submunu

    搜索:search

    友情链接:friendlink

    页脚:footer

    版权:copyright

    滚动:scroll

    内容:content

    标签页:tab

    文章列表:list

    提示信息:msg

    小技巧:tips

    栏目标题:title

    加入:joinus

    指南:guild

    服务:service

    注册:regsiter

    状态:status

    投票:vote

    合作伙伴:partner

    展开全文
  • Web_CSS_DIV_网页页面常用布局:

    Web_CSS_DIV_网页页面常用布局:

    如上图: 1-1-1布局、1-2-1布局以及1-3-1布局

    如上图: 1+(1-1)布局、1-(1+(1-2))-1等布局

    展开全文
  • 用Bootstrap实现网页常见页面效果,首先要引入插件,引入的方式有两种,一种本地引入,一种是CDN引入。  第一种效果:静态模态框;    页面效果如下:    第二种效果:动态模态框;    页面效果如下:  ...

      用Bootstrap实现网页中常见的页面效果,首先要引入插件,引入的方式有两种,一种本地引入,一种是CDN引入。

      第一种效果:静态模态框;

      

      页面效果如下:

      

      第二种效果:动态模态框;

      

      页面效果如下:

      

      第三种效果:分页;

      

      页面效果如下:

      

      第四种效果:徽章(比如聊天APP中的未读消息);

      

      页面效果如下:

      

      第五种效果:巨幕效果;

      

      页面效果如下:

      

      第六种效果:页头;

      

      效果图如下:

      

      第七种效果:进度条(由于进度条的样式比较多,代码综合写在一起,可以根据自己需要的进度条按照注释一一参考。。。)

      

      效果图如下:

      

      第八种效果:警告框;

      

      效果如下:

      


       以上的几种效果是浏览网页中经常会见到的,当然也不是Bootstrap中所有的页面效果样式,比如还有工具提示条,弹出框以及分页的其他效果等等,具体的可参考Bootstrap官网去了解学习!

    展开全文
  • 网页列表页面展示

    千次阅读 2018-09-16 15:36:28
    列表页面展示 需求: 将友情链接页面通过列表展示出来 技术分析: 列表标签 ... 常用标签<li></li>列表项 超链接标记: <a></a
  • 很low的方法——直接使用定时器 常见网页进度条1 使用定时器的方法(不会判断页面加载,只是在定时器完成之后将也面显示出来) ** 这种方法是直接给一个时间,等结束以后,加载效果...
  • 这也是最近开发中常见的要求。怎么达到要求呢?请跟我往下看。。 2、做准备 想要在网页端唤起App。首先,你必须在App 中设置有 URL Schemes 。设置的位置如下图所示: 我们本次demo 就使用上图的 URL ...
  • 网页设计页面尺寸

    千次阅读 2012-12-30 15:02:22
    在大学自学做网站已经有几年的时间了,也做过好几个网站了,但那都是用一些模板改的。最近又给学校做了一个网站,由于前端全是自己设计的,...网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方
  • web网页 页面布局的几种方式

    万次阅读 多人点赞 2017-06-16 12:19:40
    网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,这位网页提供了很强的可塑性和流动性。换句话说...
  • 网页页面尺寸一般设置多大才合适

    千次阅读 2013-10-20 12:23:20
    网页页面尺寸一般设置多大才合适   网页设计在初始要界定出网页的尺寸大小 . 就像绘画给出一块画版来 . 这样才能方便设计 .      网页的尺寸受限于两个因素 : 一个是显示器屏幕 ...
  • 1.网页设计的布局 “国”字型布局: 国型布局也称为同型布局,布局结构与“国”字相似而得名 是一些大型网站所喜欢的类型 页面最上部分一般放置网站的标志和导航栏或Banner广告, 接下来是网站的主要内寄,左右分列...
  • 常见网页布局

    2017-07-13 13:51:14
    常见网页布局
  • 一般运行 web 项目的时候大部分人选用的是 tomcat 服务器,今天在运行之前的一个项目的时候,遇到一个无厘头的问题,tomcat 启动项目没问题,但是页面却打不开,出现一片空白,404可怕吗?500 可怕吗?可怕!更可怕的是...
  • bootstrap页面左侧导航栏 右侧网页

    万次阅读 热门讨论 2017-12-17 22:25:47
    我们在浏览网页的时候,左侧导航栏,右侧网页页面常见,那么你有好奇过那些炫酷好看的页面是怎么做的吗? 下面小编带你了解一下这种页面是怎么做的。 首先介绍一下用的框架:Asp.net mvc+EF+BootStrap 第一步...
  • 前端网页 (页面布局) 教程

    千次阅读 2020-09-18 17:17:54
    页面布局 一.盒模型: 1.所谓盒模型,就是浏览器为页面中的每个HTML元素(标签)生成的矩形盒子。这些盒子们都要按照可见 板式模型在页面上排布。可见的板式模型主要由三个属性控制: (1)position属性:position属性...
  • HTML前端网页制作web页面入门

    千次阅读 2017-03-06 18:23:24
    开发页面在很多人眼里很简单,大部分的人都会说不就是把效果图变成网页嘛,哪里需要那么多的时间,一点技术含量都没有。确实html页面没有js那么多复杂的交互,也不需要和后台数据打交道,但并不能代表就没有技术含量...
  • 安卓通过js与网页的H5页面进行交换

    千次阅读 2017-06-16 17:46:27
    常见遇到的需求是,从网页端调起本地的分享或者支付等……思路是APP端与H5页面协定好一个方式,来调用APP里面的方法。H5本地交换的js 安卓需要写的代码: /**AndroidJavaScript * 本地与h5页面交互的js类,这里写...
  • 页面中的勾选框还是比较常见的啊,一般都是请勾选 同意什么协议什么 七天登录什么的 但是我们要自己制作一个呢 先看下下面的几种效果 上面用了四个方法 做出来的勾选情况 接下来进行一一讲解 1.最常见的 使我们 ...
  • 我们在前面讲到httpclient抓取网页内容的时候 通常都是获取到页面的源代码content存入数据库。 详见下文: HTTPClient模块的HttpGet和HttpPost httpclient常用基本抓取类 那么如果我们除了获得页面源代码之外 还想...
  • 今天这篇文章和大家分享36个非常精美的登录页面设计案例。 您可能还喜欢 30佳别出心裁的企业网站设计优秀作品 30个与众不同的国外优秀网站设计案例 10个精美的 HTML5 商业网站设计案例 让人...
  • 1. 首先PhantomJS快速入门 PhantomJS它全面支持web而不需浏览器支持, DOM 处理, CSS 选择器... PhantomJS 可以用于 页面自动化 , 网络监测 , 网页截屏 ,以及无界面测试 等。 2. php如何使用PhantomJS来做一些事情
  • 大家都知道”细节决定成败”这句名言不仅在其他行业非常重要,而在页面设计当中更是颠扑不破的真理。需求的眼睛和感觉总是非常敏锐的,对于一个页面没有得到需求方的认可,但是他们又说不出什么理由,这个时候就是...
  • 网页中嵌入外部页面的四种方法

    万次阅读 2015-01-08 09:15:33
    ---- 要在宿主页面中嵌入外部页面的方法是,在宿主页面中包含外部页面的位置插入“”语句即可(注意: 标签中的各种属性含义请查阅相关技术手册)。 ---- 如果想在嵌入的外部页面过长时不出现滚动条,在外部文件标签...
  • 如图,需要点击左侧菜单后在灰色区域显示对应的页面,我想的是每一个菜单的超链接触发js函数,函数里改变右侧iframe的src,不知实际中常用的做法是什么,望指教! (本人大四,是做java后端的,前端了解的比较少)
  • 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000...
  • 网页设计\网页制作常用软件大全

    千次阅读 多人点赞 2014-03-04 12:08:26
    网页设计\网页制作常用软件 一、专业的网页设计、网页制作软件: 1、CorelDraw:通过CorelDRAW9的全方面的设计及网页功能融合到现有的设计方案中,制作矢量的插图、设计及图像,出色地设计公司标志、简报、彩页、...
  • 我在网上尝试了常见的多种方法 1、在浏览器内修改起始页。 我最初尝试的这种方式,没有做用,打开之后还是指向360浏览器页面 2、在注册表中修改Start Page 的其实地址,给位自己想要设置的地址 或者更改为空的页面,...
  • 通常,我们使用各种事件,判断用户是否正在离开当前页面。 visibilityStatepageshowpagehidebeforeunloadunload 但是,手机浏览器往往不会触发这些事件,原因是浏览器进程会被突然关闭或者切换到后台,从而没有...
  • 最近用webview发现返回上个页面总是又自动刷新页面,我的需求是进入下页的时候不用缓存,而返回上个页面的时候不要刷新页面回到顶部,要保持在原来页面进入下页的位置。 首先来了解一下webview加载网页的几个...
  • 常见网页状态码

    千次阅读 2018-04-19 20:04:44
    通常,这表示服务器提供了请求的网页。 201 (已创建) 请求成功并且服务器创建了新的资源。 202 (已接受) 服务器已接受请求,但尚未处理。 203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 319,464
精华内容 127,785
关键字:

常见的网页页面