移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂

为什么要写这个

以前写过关于webapp自适应屏幕的文章（链接），不过写的大多数群众看不懂，所以来个图文并茂的版本。虽然只是一个简单的页面，不过在做的过程中也遇到了一些问题，也算是好事吧！

该示例github地址：https://github.com/iwangx/WebApp

访问地址：https://csssprite.herokuapp.com/

准备

psd：这个是最重要的东西，用于测量尺寸，以及切图，我是不太同意切图的工作交给ui，自己切比较好，psd的分辨率我做的是640px的宽度，当然这个psd是网上下的

css雪碧图制作工具：最新版（v4.3）能够将多张图片拼接成一张图片并且生成代码的小程序（本人自主研发）

webstorm：前端开发利器

马克曼：前端尺寸颜色测量工具

photoshop：切图利器

sass：css预编译工具

第一步、切图

我用的是photoshop切的图，切图如下：

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第1张图片

当然可能看不太清楚，毕竟是白色的图

第二步、搭建框架

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第2张图片

 大体结构就是这个，地址：https://github.com/iwangx/WebApp

第二部、css结构

css主要采用sass作于预编译的工具，结构如下：

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第3张图片

reset.scss文件主要是对于元素样式的重置

app.scss文件是对单个页面样式

size.scss文件里面包含了手机端自适应1-400尺寸的变量

第二步、js结构

js中最重要的是自适应的的代码，地址：移动端自适应，zepto这些都没有引入，因为只是个简单的示例

第三步、html页面机构

页面结构如下图：

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第4张图片

header：头部标题

nav：头部的导航

controller：中间列表

footer：底部导航

第四步、生成雪碧图

利用雪碧图生成工具：生成雪碧图，并且生成代码：

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第5张图片

将代码copy到css目录中的app.scss目录下

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第6张图片

当然前提是要引入size这个里面方面变量的文件，要不然$_*就没法识别而报错了

第五步、页面以及css编码

css代码：

@import "size";
//所有图片变量
@mixin sprite{background:url(../images/sprite.png) no-repeat ;background-size:$_138 $_163;}
@mixin icon_right{height:$_59;width:$_59;background-position:0 -$_75 0 -$_5;}
@mixin icon_left{height:$_59;width:$_59;background-position:0 0;}
@mixin icon_tag{height:$_44;width:$_65;background-position:0 -$_1 0 -$_119;}
@mixin icon_person{height:$_44;width:$_65;background-position:0 0 -$_66;}
@mixin icon_book{height:$_44;width:$_65;background-position:0 -$_73 0 -$_71;}
@mixin icon_more{height:$_44;width:$_65;background-position:0 -$_73 0 -$_119;}

body{background: #fbfbfb}
.sprite{@include sprite;}
.header{position: fixed;background: #dd3131;height: $_90;line-height: $_90;;width: 100%;left: 0;top: 0;font-size: $_40;color: #fff;text-align: center;
  button{position: absolute;top: $_16;border: $_2 solid #fff;border-radius: 50%;box-sizing: content-box}
}
.btn-left{@include icon_left;left: $_16;}
.btn-right{@include icon_right;right: $_16;}
.nav{display: -webkit-box;position: fixed;left: 0;top: $_90;color: #3d3d3d;font-size: $_30;width: 100%;border-bottom: $_1 solid #e7e5e6;
  a{display: block;height: $_60;line-height: $_60;text-align: center;background: #fff;-webkit-box-flex: 1;border-right: $_1 solid #e7e5e6;box-sizing: border-box;}
}
.controller{padding: $_151 0 $_100 0;}
.list{
  li{border-bottom:$_1 solid #cfcfcf }
  a{display: -webkit-box;padding: $_16;}
  img{height: $_122;width: $_122;display: block}
}
.list-right{-webkit-box-flex: 1;padding-left: $_15;
  h1{color: #555;font-size: $_24;}
  p{color: #878787;font-size: $_18;margin-top: $_15;line-height: 1.5}
}
.footer{height: $_100;position: fixed;left: 0;bottom: 0;width: 100%;display: -webkit-box;background: #4a4a4a;text-align: center;
  a{display: block;-webkit-box-flex: 1;box-sizing: border-box;padding-top: $_10;border-right: $_1 solid #fff;
    &:last-child{border-right: none}
  }
  i{display: block;margin: 0 auto}
  span{color: #fff;font-size: $_24;display: block;margin-top: $_5;}
}
.icon_book{@include icon_book}
.icon_tag{@include icon_tag}
.icon_person{@include icon_person}
.icon_more{@include icon_more}
View Code

 html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui">
    <meta name="author" content="wangxing">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="format-detection" content="telephone=no">
    <title>app自适应</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/app.css">
    <script src="/js/lib/resize.js"></script>
</head>
<body>
    <header class="header">
        <button class="sprite btn-left"></button>
        <span>远程酒业</span>
        <button class="sprite btn-right"></button>
    </header>
    <nav class="nav">
        <a href="javascript:;">资讯</a>
        <a href="javascript:;">产品</a>
        <a href="javascript:;">实战</a>
        <a href="javascript:;">讨论</a>
    </nav>
    <section class="controller">
        <ul class="list">
            <li>
                <a href="#">
                    <img src="src" alt="图片">
                    <div class="list-right">
                        <h1>酒名字</h1>
                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="src" alt="图片">
                    <div class="list-right">
                        <h1>酒名字</h1>
                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="src" alt="图片">
                    <div class="list-right">
                        <h1>酒名字</h1>
                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="src" alt="图片">
                    <div class="list-right">
                        <h1>酒名字</h1>
                        <p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>
                    </div>
                </a>
            </li>
        </ul>
    </section>
    <footer class="footer">
        <a href="#">
            <i class="sprite icon_book"></i>
            <span>资讯</span>
        </a>
        <a href="#">
            <i class="sprite icon_tag"></i>
            <span>产品</span>
        </a>
        <a href="#">
            <i class="sprite icon_person"></i>
            <span>实战</span>
        </a>
        <a href="#">
            <i class="sprite icon_more"></i>
            <span>讨论</span>
        </a>
    </footer>
</body>
</html>
View Code

用到图片的地方，主要有两个class，一个是雪碧图的class，一个就是他本事引用的class，二者结合

大家可以看到css代码中的大小全都是$_*，也就是测量出来的大小，包括字号也是

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第7张图片

 这样就构成了我们的webapp

iphone5上是这样

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第8张图片

iphone6上是这样

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第9张图片

平板上是这样

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂_第10张图片

结语

希望这个博客对大家有帮助，尤其是新手，也希望大家多提意见

你可能感兴趣的:(webapp)

  • Web应用架构：从后端API到前端交互 AGI大模型与大数据研究院 DeepSeekR1&大数据AI人工智能javapythonjavascriptkotlingolang架构人工智能
    Web应用架构：从后端API到前端交互关键词：Microservices,RESTfulAPI,GraphQL,WebSocket,Serverless,ProgressiveWebApps,SinglePageApplication,ResponsiveDesign1.背景介绍随着互联网的发展，Web应用已成为人们日常生活和工作中不可或缺的部分。然而，构建一个高质量、可扩展、可维护的Web应用并
  • 中间件漏洞--tomcat 夜行者~ 安全tomcat中间件java
    1.后台地址泄露解决办法：1）.删除TOMCAT_HOME/webapps/docs、examples、manager、ROOT、host-manager2）.编辑TOMCAT_HOME/web.xml，修改org.apache.catalina.servlets.DefaultServlet下的初始化参数listings的默认值,改成（或增加）为：false2.中间件及版本信息泄露解决办法进入a
  • 网站安全攻防：十大常见漏洞及其防范对策_网络安全攻防演练常用漏洞 码农x马马 安全web安全运维linux人工智能漏洞
    **数据来源：**ChatGPTTOP10漏洞TOP10漏洞是OWASP（OpenWebApplicationSecurityProject）每年发布的最常见的网络安全漏洞排名。下面介绍TOP10漏洞及其原理、检测方式和修复措施。1）SQL注入漏洞**原理：**攻击者通过构造恶意SQL语句注入到应用程序的数据库中，从而获取敏感信息或控制数据库服务器。**检测方式：**使用工具或手工输入特殊字符并观
  • pythonjson数据_一文看懂Python类型数据JSON序列化 weixin_39582569 pythonjson数据
    现代网络应用WebAPP或大型网站的后台一般只有一个，然后客户端却是各种各样的(iOS,android,浏览器),而且客户端的开发语言很可能与后台的开发语言不一样。这时我们需要后台能够提供可以跨平台跨语言的一种标准的数据交换格式供前后端沟通(这就是WebAPI的作用)。如今大家最常用的跨平台跨语言数据交换格式就是JSON（JavaScriptObjectNotation）了。JSON是一种文本序列
  • spring mvc (七) 接收json数据 _painter JavaSpringMvcspringmvcjson
    注意：启动方式为maven插件启动以实体类方式接收json数据注册配置类packagecom.painter.config;importorg.springframework.web.context.WebApplicationContext;importorg.springframework.web.context.support.AnnotationConfigWebApplicationCo
  • 前端基础入门三大核心之HTML篇：PWA入门指南 —— 理解与构建现代化Web应用 DTcode7 HTML网站开发#前端基础入门三大核心之htmlHTML5前端web前端三大核心网页开发
    前端基础入门三大核心之HTML篇：PWA入门指南——理解与构建现代化Web应用PWA基本概念与优势关键技术组件构建PWA实战第一步：启用HTTPS第二步：创建WebAppManifest第三步：实现ServiceWorker注册ServiceWorker安全性与性能优化实际开发技巧遇到问题时的排查思路结语与讨论随着移动互联网的飞速发展，ProgressiveWebApps（简称PWA）凭借其接近原
  • 探索未来网页的强大力量： Awesome Progressive Web Apps 项目解析 秋或依
    探索未来网页的强大力量：AwesomeProgressiveWebApps项目解析awesome-progressive-web-apps:sunrise:Acollectionofawesomeresourcesforbuildingprogressivewebapps项目地址:https://gitcode.com/gh_mirrors/aw/awesome-progressive-web-a
  • webAPP开发三：实现数据的交互显示 lvzekun-IT 前端基础前端学习
    开发中遇到的错误:代码逻辑错误，将初始化函数放在了初始化对象之前，造成了“.html()”无法识别，表示未定义、http://read.t.imooc.io/参考代码下载地址。开发截图：代码结构：html{width:100%;height:100%;overflow-x:hidden;}body{text-align:left;width:100%;background:#e9dfc7;}.m-
  • 手写Tomcat：实现基本功能 2301_81535770 tomcatjava
    首先，Tomcat是一个软件，所有的项目都能在Tomcat上加载运行，Tomcat最核心的就是Servlet集合，本身就是HashMap。Tomcat需要支持Servlet，所以有servlet底层的资源：HttpServlet抽象类、HttpRequest和HttpResponse，否则我们无法新建Servlet。这样我们就可以在webapps写项目了，一个项目有两大资源：servlet资源和静
  • AWS WAF实战指南：从入门到精通 ivwdcwso 安全aws网络云计算WAF安全
    1.引言AmazonWebServices(AWS)WebApplicationFirewall(WAF)是一款强大的网络安全工具，用于保护Web应用程序免受常见的Web漏洞攻击。本文将带您从入门到精通，深入探讨AWSWAF的实际应用策略，并提供具体案例，帮助您更好地保护您的Web应用程序。2.AWSWAF基础2.1什么是AWSWAF？AWSWAF是一种Web应用程序防火墙，可以帮助保护您的Web
  • tomcat部署war包会先找什么 哥谭居民0001 tomcatjava
    当Tomcat部署一个WAR包时，它会按照一定的顺序和规则来处理和加载应用。以下是Tomcat部署WAR包时的主要步骤和查找顺序：1.检查webapps目录Tomcat会定期检查webapps目录，寻找新的WAR文件或目录。如果发现新的WAR文件或目录，Tomcat会尝试部署它们。2.解压WAR文件如果发现一个新的WAR文件，Tomcat会自动解压该文件到webapps目录下的一个同名文件夹中。例
  • tomcat的工作流程 My heart is toward you tomcat
    目录1、程序基本内容：2、实现原理：3、浏览器与tomcat4、tomcat核心功能5、总结：tomcat有主方法，servlet借助tomcat运行。tomcat文件夹1、程序基本内容：bin：包含各种脚本conf：是confige的缩写，有很多配置文件，程序启动肯定会读取配置文件lib：程序的主体部分，包含程序的主体代码logs：运行日志，运行期间的各种情况webapps：存放网站，一个文件就
  • python hack库_这里有123个黑客必备的Python工具！ weixin_39637571 pythonhack库
    123个Python渗透测试工具，当然不仅于渗透~如果你想参与漏洞研究、逆向工程和渗透，我建议你时候用Python语言。Python已经有很多完善可用的库，我将在这里把他们列出来。这个清单里的工具大部分都是Python写成的，一部分是现有C库的Python绑定，这些库在Python中都可以简单使用。一些强力工具(pentestframeworks、bluetoothsmashers、webappl
  • 【AI】从头到脚详解如何创建部署Azure Web App的OpenAI项目 小涵 Azure云企业实战指南本地离线DeepSeekAI方案部署实战教程【完全版】人工智能azurewebappAIdockerpython
    【AI】从头到脚详解如何创建部署AzureWebApp的OpenAI项目在AzureWeb应用上，您可以使用Python的OpenAI包方便快捷地调用官方API，上传您的训练数据，并利用他们的算法进行处理。本教程提供了一个逐步指南，帮助您在AzureWeb应用上部署您的OpenAI项目，涵盖了从资源设置到解决常见问题的所有内容。推荐超级课程：本地离线DeepSeekAI方案部署实战教程【完全版】D
  • ChromeOS 134 版本更新 前端浏览器chrome
    ChromeOS134版本更新一、ChromeOS134更新内容1.ChromeOS自助终端（Kiosk）模式支持隔离Web应用（IsolatedWebApps）从ChromeOS134开始，自助终端（Kiosk）模式支持隔离Web应用（IsolatedWebApps，IWA），提供更安全、更强大的应用解决方案，并可深度集成系统功能。1.1.主要特点更高的安全性：IWA运行在隔离环境中，减少安全风
  • .net 6.0 webapi支持 xml返回xml json返回json 故事里故去 自用C#.netxmljson
    //添加控制器并配置格式化器varbuilder=WebApplication.CreateBuilder();builder.Services.AddControllers(options=>{options.Filters.Add();options.ReturnHttpNotAcceptable=true;//强制要求Accept头匹配//添加XML格式化器options.InputForm
  • AWS WAFv2 自动保护 API Gateway 实现指南 ivwdcwso 安全awsgateway云计算
    AWSWAFv2（WebApplicationFirewallVersion2）是一项强大的服务，用于保护Web应用程序免受各种网络攻击。本文将重点介绍如何使用AWSWAFv2与Python脚本自动保护APIGateway，确保你的RESTAPI在暴露在互联网上时能够抵御常见的网络威胁。AWSWAFv2概述AWSWAFv2提供了先进的Web应用程序防火墙功能，可帮助你保护Web应用程序免受SQL注
  • WAF(Web应用防火墙) 墨菲斯托888 安全
    WAF（WebApplicationFirewall，Web应用防火墙）是一种专门用于保护Web应用程序的安全设备或软件。它通过监控、过滤和阻止恶意流量来防止Web应用程序遭受各种攻击，尤其是那些针对Web应用层的攻击。WAF通常部署在网络边缘，位于客户端和Web服务器之间，对进出Web应用程序的流量进行实时检查和分析。WAF的主要功能SQL注入防护：检测和阻止恶意的SQL注入攻击，防止攻击者通过
  • Tomcat服务器 小布不吃竹 tomcat服务器java
    目录一、bin目录二、conf目录三、lib目录四、logs目录五、temp目录六、webapps目录七、work目录Tomcat，作为JavaWeb应用的首选容器，其安装包内包含了一系列精心设计的目录和文件，这些组件共同协作，确保了Tomcat的稳定运行和高效管理。以下是Tomcat安装包目录结构的详细解析，以及各目录的功能扩展说明。一、bin目录位置：Tomcat安装包的根目录下功能：存放To
  • 网络安全工具汇总 Hacker_Fuchen web安全安全
    网络安全工具汇总漏洞及渗透练习平台WebGoat漏洞练习环境https://github.com/WebGoat/WebGoathttps://github.com/WebGoat/WebGoat-LegacyDamnVulnerableWebApplication（漏洞练习平台）https://github.com/RandomStorm/DVWA数据库注入练习平台https://github.
  • 工程化与框架系列（24）--跨平台解决方案 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端
    跨平台解决方案引言随着移动互联网的发展，跨平台开发已成为前端开发的重要趋势。本文将深入探讨前端跨平台开发的各种解决方案，包括响应式设计、混合开发、原生开发等方案，帮助开发者选择合适的跨平台策略。跨平台开发概述跨平台开发主要包括以下方向：响应式Web：适配不同设备的网页应用混合应用：Web技术开发的原生应用原生跨平台：使用统一框架开发原生应用渐进式应用：ProgressiveWebApps(PWA)
  • 在 Apache Tomcat 中，部署和删除项目 梦醒贰零壹柒 运维apachetomcatjava
    在ApacheTomcat中，部署和删除WAR文件是常见的操作。以下是详细步骤：1.删除WAR文件(1)停止应用进入Tomcat的管理界面（默认地址：http://localhost:8080/manager/html）。找到需要删除的应用，点击“停止”按钮停止其运行。(2)删除WAR文件进入Tomcat的webapps目录：cd/path/to/tomcat/webapps删除对应的WAR文件和
  • linux服务器部署war包 Famiglistimo-run 服务器linuxintellij-idea
    工具准备：xftp（跟服务器进行文件交互）1.对你所需要部署的项目进行打包个人采取用idea进行maven导包（个人觉得方便快捷）点击package进行打包，打包成功以后在项目的target中会出现一个war包2.利用xftp将打好的war包部署在tomcat的webapps目录下，tomcat会自动解压缩3.到这war包已经部署成功，在浏览器输入你的ip地址：端口号：文件名（你部署的war包的文
  • PowerShell中无法运行pnpm命令 一只小姜丝332 vue.js前端
    项目场景：PowerShell中无法运行pnpm命令，而在cmd中却能运行。问题描述pnpm:无法加载文件D:\webAPP\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅https:/go.microsoft.com/fwlink/?LinkID=135170中的about_Execution_Policies。原因分析：当你在Windows系统上尝试使用pnp
  • Servlet理论知识详解 wertuiop_ servlet
    文章目录前言一、网络架构1.1网络架构概述1.2B/S与C/S模式1.3Tomcat在网络架构中的角色二、Tomcat与云服务器的区别2.1Tomcat2.2云服务器2.3Tomcat与云服务器的结合三、Tomcat目录结构详解3.1bin目录3.2conf目录3.3lib目录3.4logs目录3.5webapps目录3.6work目录3.7temp目录四、Tomcat工作原理与目录结构的结合4.
  • vue 地图使用navigator_cordova+vue+webapp使用html5获取地理位置的方法 weixin_39759155 vue地图使用navigator
    1.在HTML5中使用Geolocation.getCurrentPosition()方法来获取地理位置。语法：navigator.geolocation.getCurrentPosition(success,error,options)参数：success:成功得到位置信息时的回调函数，使用Position对象作为唯一的参数。error:获取位置信息失败时的回调函数，使用PositionErro
  • safari 调试移动端_使用Safari开发工具调试iPhone移动Web应用程序 weixin_26735419 debugjavapython
    safari调试移动端IwasdevelopingamobilewebapplicationforworkthatscansaQRcodetochecksomeoneinforahiringevent,andIwantedtomakesurethedatabeingdecodedfromtheQRcodewascorrect.Ialsowantedtomakesureoneofmykeyfunct
  • javaweb将上传的图片保存在项目文件webapp下的upload文件夹下 yuren_xia 后端技术前端技术webappjavatomcateclipse
    前端HTML表单(upload.html)首先，创建一个HTML页面，允许用户选择并上传图片。图片上传上传图片注意：表单的method设置为"post"，enctype需设置成"multipart/form-data"2.后端Servlet(UploadServlet.java)接下来，创建一个Servlet来处理文件上传请求，并将上传的图片保存到webapp/load目录下。packagecom
  • COMPX322-25A Asynchronous Event Viewer 后端
    COMPX322-25AAssignmentOneDueDate:MondayMarch24th,10amAsynchronousEventViewerPARTONEForthiscourseworkyouaretoimplementawebapplicationthatdisplaysinformationaboutlocalevents.Yourimplementationwillrequir
  • COMPX322-25A Asynchronous Event Viewer 后端
    COMPX322-25AAssignmentOneDueDate:MondayMarch24th,10amAsynchronousEventViewerPARTONEForthiscourseworkyouaretoimplementawebapplicationthatdisplaysinformationaboutlocalevents.Yourimplementationwillrequir
  • 解读Servlet原理篇二---GenericServlet与HttpServlet 周凡杨 javaHttpServlet源理GenericService源码
    在上一篇《解读Servlet原理篇一》中提到，要实现javax.servlet.Servlet接口（即写自己的Servlet应用），你可以写一个继承自javax.servlet.GenericServletr的generic Servlet ，也可以写一个继承自java.servlet.http.HttpServlet的HTTP Servlet（这就是为什么我们自定义的Servlet通常是exte
  • MySQL性能优化 bijian1013 数据库mysql
            性能优化是通过某些有效的方法来提高MySQL的运行速度，减少占用的磁盘空间。性能优化包含很多方面，例如优化查询速度，优化更新速度和优化MySQL服务器等。本文介绍方法的主要有：         a.优化查询         b.优化数据库结构  
  • ThreadPool定时重试 dai_lm javaThreadPoolthreadtimertimertask
    项目需要当某事件触发时，执行http请求任务，失败时需要有重试机制，并根据失败次数的增加，重试间隔也相应增加，任务可能并发。 由于是耗时任务，首先考虑的就是用线程来实现，并且为了节约资源，因而选择线程池。 为了解决不定间隔的重试，选择Timer和TimerTask来完成 package threadpool; public class ThreadPoolTest {
  • Oracle 查看数据库的连接情况 周凡杨 sqloracle 连接
    首先要说的是，不同版本数据库提供的系统表会有不同，你可以根据数据字典查看该版本数据库所提供的表。 select * from dict where table_name like '%SESSION%'; 就可以查出一些表，然后根据这些表就可以获得会话信息 select sid,serial#,status,username,schemaname,osuser,terminal,ma
  • 类的继承 朱辉辉33 java
    类的继承可以提高代码的重用行，减少冗余代码；还能提高代码的扩展性。Java继承的关键字是extends 格式:public class 类名（子类）extends 类名（父类）{ } 子类可以继承到父类所有的属性和普通方法，但不能继承构造方法。且子类可以直接使用父类的public和 protected属性，但要使用private属性仍需通过调用。 子类的方法可以重写，但必须和父类的返回值类
  • android 悬浮窗特效 肆无忌惮_ android
    最近在开发项目的时候需要做一个悬浮层的动画，类似于支付宝掉钱动画。但是区别在于，需求是浮出一个窗口，之后边缩放边位移至屏幕右下角标签处。效果图如下：   一开始考虑用自定义View来做。后来发现开线程让其移动很卡，ListView+动画也没法精确定位到目标点。   后来想利用Dialog的dismiss动画来完成。   自定义一个Dialog后，在styl
  • hadoop伪分布式搭建 林鹤霄 hadoop
    要修改4个文件    1: vim hadoop-env.sh  第九行    2: vim core-site.xml            <configuration>     &n
  • gdb调试命令 aigo gdb
    原文：http://blog.csdn.net/hanchaoman/article/details/5517362   一、GDB常用命令简介   r run 运行.程序还没有运行前使用 c             cuntinue 
  • Socket编程的HelloWorld实例 alleni123 socket
    public class Client { public static void main(String[] args) { Client c=new Client(); c.receiveMessage(); } public void receiveMessage(){ Socket s=null; BufferedRea
  • 线程同步和异步 百合不是茶 线程同步异步
    多线程和同步 : 如进程、线程同步，可理解为进程或线程A和B一块配合，A执行到一定程度时要依靠B的某个结果，于是停下来，示意B运行；B依言执行，再将结果给A；A再继续操作。 所谓同步，就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回，同时其它线程也不能调用这个方法   多线程和异步:多线程可以做不同的事情,涉及到线程通知     &
  • JSP中文乱码分析 bijian1013 javajsp中文乱码
            在JSP的开发过程中，经常出现中文乱码的问题。         首先了解一下Java中文问题的由来：         Java的内核和class文件是基于unicode的，这使Java程序具有良好的跨平台性，但也带来了一些中文乱码问题的麻烦。原因主要有两方面，
  • js实现页面跳转重定向的几种方式 bijian1013 JavaScript重定向
            js实现页面跳转重定向有如下几种方式： 一.window.location.href <script language="javascript"type="text/javascript"> window.location.href="http://www.baidu.c
  • 【Struts2三】Struts2 Action转发类型 bit1129 struts2
     在【Struts2一】 Struts Hello World http://bit1129.iteye.com/blog/2109365中配置了一个简单的Action，配置如下   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configurat
  • 【HBase十一】Java API操作HBase bit1129 hbase
    Admin类的主要方法注释：   1. 创建表 /** * Creates a new table. Synchronous operation. * * @param desc table descriptor for table * @throws IllegalArgumentException if the table name is res
  • nginx gzip ronin47 nginx gzip
    Nginx GZip 压缩 Nginx GZip 模块文档详见：http://wiki.nginx.org/HttpGzipModule 常用配置片段如下： gzip on; gzip_comp_level 2; # 压缩比例，比例越大，压缩时间越长。默认是1 gzip_types text/css text/javascript; # 哪些文件可以被压缩 gzip_disable &q
  • java-7.微软亚院之编程判断俩个链表是否相交 给出俩个单向链表的头指针，比如 h1 ， h2 ，判断这俩个链表是否相交 bylijinnan java
    public class LinkListTest { /** * we deal with two main missions: * * A. * 1.we create two joined-List(both have no loop) * 2.whether list1 and list2 join * 3.print the join
  • Spring源码学习-JdbcTemplate batchUpdate批量操作 bylijinnan javaspring
    Spring JdbcTemplate的batch操作最后还是利用了JDBC提供的方法，Spring只是做了一下改造和封装 JDBC的batch操作： String sql = "INSERT INTO CUSTOMER " + "(CUST_ID, NAME, AGE) VALUES (?, ?, ?)";
  • [JWFD开源工作流]大规模拓扑矩阵存储结构最新进展 comsci 工作流
        生成和创建类已经完成,构造一个100万个元素的矩阵模型,存储空间只有11M大,请大家参考我在博客园上面的文档"构造下一代工作流存储结构的尝试",更加相信的设计和代码将陆续推出.........     竞争对手的能力也很强.......,我相信..你们一定能够先于我们推出大规模拓扑扫描和分析系统的....
  • base64编码和url编码 cuityang base64url
    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.io.StringWriter; import java.io.UnsupportedEncodingException;
  • web应用集群Session保持 dalan_123 session
    关于使用 memcached 或redis 存储 session ，以及使用 terracotta 服务器共享。建议使用 redis，不仅仅因为它可以将缓存的内容持久化，还因为它支持的单个对象比较大，而且数据类型丰富，不只是缓存 session，还可以做其他用途，一举几得啊。1、使用 filter 方法存储这种方法比较推荐，因为它的服务器使用范围比较多，不仅限于tomcat ，而且实现的原理比较简
  • Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式'] dcj3sjt126com 数据库
        public function getMinLimit () {        $sql = "...";        $result = yii::app()->db->createCo
  • solr StatsComponent（聚合统计） eksliang solr聚合查询solr stats
    StatsComponent 转载请出自出处：http://eksliang.iteye.com/blog/2169134 http://eksliang.iteye.com/ 一、概述        Solr可以利用StatsComponent 实现数据库的聚合统计查询，也就是min、max、avg、count、sum的功能   二、参数
  • 百度一道面试题 greemranqq 位运算百度面试寻找奇数算法bitmap 算法
    那天看朋友提了一个百度面试的题目：怎么找出{1,1,2,3,3,4,4,4,5,5,5,5}  找出出现次数为奇数的数字.   我这里复制的是原话，当然顺序是不一定的，很多拿到题目第一反应就是用map,当然可以解决，但是效率不高。   还有人觉得应该用算法xxx,我是没想到用啥算法好...！   还有觉得应该先排序...   还有觉
  • Spring之在开发中使用SpringJDBC ihuning spring
      在实际开发中使用SpringJDBC有两种方式：   1. 在Dao中添加属性JdbcTemplate并用Spring注入；     JdbcTemplate类被设计成为线程安全的，所以可以在IOC 容器中声明它的单个实例，并将这个实例注入到所有的 DAO 实例中。JdbcTemplate也利用了Java 1.5 的特定(自动装箱，泛型，可变长度
  • JSON API 1.0 核心开发者自述 | 你所不知道的那些技术细节 justjavac json
    2013年5月，Yehuda Katz 完成了JSON API(英文，中文) 技术规范的初稿。事情就发生在 RailsConf 之后，在那次会议上他和 Steve Klabnik 就 JSON 雏形的技术细节相聊甚欢。在沟通单一 Rails 服务器库—— ActiveModel::Serializers 和单一 JavaScript 客户端库——&
  • 网站项目建设流程概述 macroli 工作
    一.概念 网站项目管理就是根据特定的规范、在预算范围内、按时完成的网站开发任务。 二.需求分析 项目立项 　　我们接到客户的业务咨询，经过双方不断的接洽和了解，并通过基本的可行性讨论够，初步达成制作协议，这时就需要将项目立项。较好的做法是成立一个专门的项目小组，小组成员包括：项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。项目实行项目经理制。 客户的需求说明书 　　第一步是需
  • AngularJs 三目运算 表达式判断 qiaolevip 每天进步一点点学习永无止境众观千象AngularJS
    事件回顾：由于需要修改同一个模板，里面包含2个不同的内容，第一个里面使用的时间差和第二个里面名称不一样，其他过滤器，内容都大同小异。希望杜绝If这样比较傻的来判断if-show or not，继续追究其源码。 var b = "{{", a = "}}"; this.startSymbol = function(a) {
  • Spark算子：统计RDD分区中的元素及数量 superlxw1234 sparkspark算子Spark RDD分区元素
    关键字：Spark算子、Spark RDD分区、Spark RDD分区元素数量     Spark RDD是被分区的，在生成RDD时候，一般可以指定分区的数量，如果不指定分区数量，当RDD从集合创建时候，则默认为该程序所分配到的资源的CPU核数，如果是从HDFS文件创建，默认为文件的Block数。   可以利用RDD的mapPartitionsWithInd
  • Spring 3.2.x将于2016年12月31日停止支持 wiselyman Spring 3
                  Spring 团队公布在2016年12月31日停止对Spring Framework 3.2.x（包含tomcat 6.x）的支持。在此之前spring团队将持续发布3.2.x的维护版本。          请大家及时准备及时升级到Spring
  • fis纯前端解决方案fis-pure zccst JavaScript
    作者：zccst FIS通过插件扩展可以完美的支持模块化的前端开发方案，我们通过FIS的二次封装能力，封装了一个功能完备的纯前端模块化方案pure。 1，fis-pure的安装 $ fis install -g fis-pure $ pure -v 0.1.4 2，下载demo到本地 git clone https://github.com/hefangshi/f
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他