Naisu Xu
Naisu Xu

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现

文章目录

  • 目的
  • 风格特征
  • 代码实现
  • 辅助工具
  • 总结

目的

玻璃拟物化风格（Glassmorphism）是这两年有人提出来的一种风格，乍一看和以前的毛玻璃效果很像（至少再我看来是差不多啦~）。玻璃拟物化风格在以前毛玻璃的效果上再调整点细节，最终表现出一块块的磨砂玻璃悬浮在背景上，在光线的作用下产生晶莹剔透的效果。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第1张图片

风格特征

玻璃拟物化风格中元素都是一片片的悬浮在背景上的，通过设置与背景不同的远近来表现出空间纵深与立体感。越远离背景的透光性越好，同时阴影越大；相应的越靠近背景的透光性越差，阴影越小。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第2张图片

玻璃拟物化风格，或者说毛玻璃效果而言最重要的一点就是设置模糊。要注意的是需要模糊的是元素的背景，而不是元素本身。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第3张图片

使用玻璃拟物化风格时选用带有层次颜色或图片的背景会更有更好的展示效果。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第4张图片

可以添加较细的边框使元素从背景中脱离出来，表现出玻璃片似的拟物效果。如果配合上光照角度四周的边框展现出不同的明暗表现那将会更有表现力。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第5张图片

代码实现

使用下面代码可以实现玻璃拟物化风格效果：

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
            background: conic-gradient(#A9C9FF 0deg 120deg, #FFBBEC 120deg 210deg, #c2ff9f 210deg 300deg, #A9C9FF 300deg 360deg);
            display: grid;
            place-items: center;
        }

        div {
            width: 300px;
            height: 400px;
            border-radius: 30px;
            display: grid;
            place-items: center;
            backdrop-filter: blur(12px); /* 对元素背景进行模糊 */
            /* -webkit-backdrop-filter: blur(12px); */
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); /* 设置元素投射出的阴影 */
            border: solid 1px rgba(255, 255, 255, 0.5);  /* 设置元素边框 */
        }

        span {
            font-size: 2rem;
            color: white;
            text-align: center;
        }
    style>
head>

<body>
    <div>
        <span>
            玻璃拟物化风格<br>Glassmorphism<br>设计与实现
        span>
    div>
body>

html>

上面主要用到了 backdrop-filter: blur(12px); 来设置元素背景的模块效果，此外设置适当的阴影和边框增强玻璃拟物化效果。

上面代码中元素背景色未设置，默认就是透明的，实际情况中可以设置半透明的背景来使卡片之上其它的元素更容易被识别和阅读。

如果一个页面中有多个卡片元素，可以分布设置不同的卡片背景透明度和阴影大小体现出空间纵深与立体感。

辅助工具

下面两个网站可以辅助进行玻璃拟物化风格的效果预览和代码生成：
https://glassmorphism.com/
https://ui.glass/generator/

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第6张图片

总结

从代码角度来说在前端页面中实现玻璃拟物化风格挺简单的，不过从设计角度来说需要考虑的东西其实挺多的，更多内容可以参考下面文章：
《用户界面中Glassmorphism设计趋势正在流行》
《Glassmorphism - how to create in pure CSS》

你可能感兴趣的:(Web与JS相关,css,html,ui设计,前端,web)

  • 区块链在医疗数据共享中的应用：解锁安全与透明的新维度 Echo_Wish 人工智能前沿技术区块链安全
    区块链在医疗数据共享中的应用：解锁安全与透明的新维度近年来，区块链技术在金融领域取得了显著的突破，然而，它的潜力不仅仅局限于数字货币和支付领域。随着医疗数据的数字化和信息化程度不断提升，区块链技术在医疗数据共享中的应用正逐渐成为一个热门话题。区块链以其去中心化、不可篡改、透明且高效的特点，为医疗行业的数据管理提供了全新的解决方案，尤其是在患者隐私保护、数据共享以及医疗服务的透明度方面。那么，区块链
  • XPipe：一款新型开源终端管理神器 修己xj 工具开源
    最近，一位朋友在使用Docker时遇到了一个问题：他对宿主机与容器之间的文件复制以及在容器内执行命令等操作感到困惑。这让我开始思考，如果有一款远程管理工具能够直接连接到容器内部，操作是否会变得更加便捷？恰巧，今天在浏览GitHub时，我发现了这样一款名为XPipe的工具。工具介绍XPipe是一款创新的Shell连接中心和远程文件管理器，它能够让你从本地机器轻松访问整个服务器基础设施。这款工具运行在
  • 入门级带你实现一个安卓智能家居APP（2）kotlin版本 一粒程序米 androidkotlin智能家居WiFi单片机
    前言上一篇写过java版本的实现，这一篇就写一下kotlin版本的吧。效果展示本APP是通过tcp/ip协议与连了WiFi的单片机通信。其实除了主活动类和新建项目时有一丢丢不同，其他的都是一样的哈~第一步：你得会一点点kotlin基础，建议看一本书，是郭霖大神些的《第一行代码》第三版，里面除了安卓的基础教学，还有kotlin的。第二步：建议看一本书，是郭霖大神些的《第一行代码》，先入门安卓基础。不
  • vscode如何找letax模板_VScode如何实时预览LaTeX？ weixin_39789327
    好像感觉我要火了,这个必须专业回答下啊,看完别忘了点赞啊!!用户友好型实时预览的定义即不用手动编译,不用手动刷新文档(PDF)的LaTeX写作方式.实现方式与工具目前主要用的是Latexmk这个perl脚本或者支持实时预览的Markdown编辑器.关于TeX集成系统的一个建议个人建议用TeXLive而非MikTeX甚至CTeX套装,相比而言我用TeXLive时碰到的问题最少.后两种你可能发现好好的
  • Kubernetes配置全解析：从小白到高手的进阶秘籍 ivwdcwso 操作系统与云原生kubernetes容器云原生k8s配置
    导语在Kubernetes（K8s）的世界里，合理且精准的配置是释放其强大功能的关键。无论是搭建集群、部署应用，还是优化资源利用，配置都贯穿始终。然而，K8s配置涉及众多参数与组件，错综复杂，令不少初学者望而却步。本文将带你一步步深入K8s配置领域，从小白进阶为配置高手，轻松驾驭K8s集群。一、Kubernetes集群配置Master节点配置kube-api-server：这是K8s集群的“门面”
  • 【C++开源库】tinyxml2解析库使用介绍 小庞在加油 C++知识c++开源tinyxml2解析库
    TinyXML-2是一个在C++中使用的轻量级、简单且高效的XML解析库。它由LeeThomason开发，旨在提供快速解析和生成XML数据的功能，同时保持代码的简洁性和易于使用。TinyXML-2支持多种编译器和平台，包括Windows、Linux和macOS。特点与优势简单易用：TinyXML-2提供了直观的API，使得解析和生成XML文档变得简单。高性能：它经过优化，能够快速解析大型XML文件
  • github上传文件方法格式 镜宇秋霖丶 githubgithub
    echo"#myHtmlFirst1.0">>README.mdgitinitgitaddREADME.md(这条指令改成下面的)gitadd.gitcommit-m"firstcommit"[email protected]:xxxxxxxxx/myHtmlFirst1.0.gitgitpush-uoriginmain以上是第一次上传以
  • GPT-4o mini TTS：OpenAI 推出轻量级文本转语音模型！情感操控+白菜价冲击配音圈 蚝油菜花 每日AI项目与应用实例开源人工智能
    ❤️如果你也关注AI的发展现状，且对AI应用开发感兴趣，我会每日分享大模型与AI领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！AI在线答疑->智能检索历史文章和开源项目->丰富的AI工具库->每日更新->尽在微信公众号->搜一搜：蚝油菜花️“声优连夜转行送外卖！OpenAI新模型每分钟语音成本仅9分钱”大家好，我是蚝油菜花。当同行还在用机械音合成器折磨听众时，这个AI怪物已
  • Dify-Plus：企业级AI管理核弹！开源方案吊打SaaS，额度+密钥+鉴权系统全面集成 蚝油菜花 每日AI项目与应用实例人工智能开源开源人工智能
    ❤️如果你也关注AI的发展现状，且对AI应用开发感兴趣，我会每日分享大模型与AI领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！AI在线答疑->智能检索历史文章和开源项目->丰富的AI工具库->每日更新->尽在微信公众号->搜一搜：蚝油菜花“CTO集体失眠！这个开源项目让企业AI管理进入上帝模式”大家好，我是蚝油菜花。当同行还在为API调用次数和预算超支扯皮时，这个国产神器已
  • C++ 实例(二) 阳光向日葵向阳 c++算法数据结构
    交换两个数以下我们使用两种方法来交换两个变量：使用临时变量与不使用临时变量。实例-使用临时变量#includeusingnamespacestd;intmain(){inta=5,b=10,temp;cout#includeusingnamespacestd;intmain(){inta=5,b=10;coutusingnamespacestd;intmain(){intn;cout
  • 我们应该用尼古拉特斯拉的振动和频率的角度去观察整个世界包括电机万物的旋转呢？ 热爱电气 数学建模
    我不能去否定任何科学，也不能说谁的定义不准确，但是我坚信而我想的是是否粒子之间的自旋会扰动时空产生概率性的量子涨落现象呢？那么我们可以想办法设想一下结合尼古拉特斯拉的引力论1.特斯拉的哲学基础：振动、能量与介质特斯拉的理论体系以三个核心概念为基础振动是一切现象的本质：物质是能量的一种振动形式，不同频率的振动对应不同的物质态。以太假说：宇宙中存在一种充满空间的“介质”（以太），它是电磁波和引力的传播
  • 直面失能危机，众托帮守护家庭防线 市场
    根据中国保险行业协会发布的《中国中老年人风险保障研究》,人生不同阶段面临的风险复杂多变。45-55岁人群主要担忧重疾与高额医疗支出,而步入60岁后,失能风险一跃成为老年人心中的头等大事,与医疗、重疾风险共同构成晚年生活的挑战。中国老龄科学研究中心数据显示,截至2024年末,我国60岁及以上老年人中,失能、半失能群体已达约4400万人,且这一数字正急剧攀升。预计到2050年,失能、半失能老人数量将飙
  • Go 1.24 新特性一览 go资讯编程语言程序员
    Go1.24震撼登场，带来显著性能提升与诸多新功能，如泛型类型别名、优化工具链及标准库增强。可借助os.Root实现安全文件系统操作，运用testing.B.Loop优化基准测试，利用runtime.AddCleanup完善资源管理，还有weak包优化内存、crypto包保障FIPS140-3合规。速升级，提升Go应用效率与安全！文章目录语言特性更新泛型类型别名(GenericTypeAliase
  • 事务回滚核心技术 KBkongbaiKB java
    一、事务回滚的数学本质与核心挑战1.1事务状态机模型操作执行持久化完成系统故障事务回滚ActivePartiallyCommittedCommittedFailedAborted1.2核心技术挑战矩阵问题维度单机事务分布式事务原子性保证存储引擎WAL日志二阶段提交协议隔离性实现MVCC多版本控制全局锁调度机制可见性管理事务ID版本链向量时钟同步回滚触发条件SQL执行异常/死锁网络分区/节点故障二、
  • HTML语言的贪心算法 宇瞳月 包罗万象golang开发语言后端
    HTML语言的贪心算法：理论与实践引言在编程和算法研究中，贪心算法是一种广泛应用的解决问题的方法。它通过对每一阶段选择最优解的方式来构建整个问题的解决方案。贪心算法不一定能在所有情况下得到最优解，但在许多实际问题中，它能够提供一个足够好的近似解。本文将探讨贪心算法的基本概念、典型应用、优缺点，并结合HTML语言的特点，提出一些具体的实现示例和思考。一、贪心算法的基本概念贪心算法是一种求解最优化问题
  • 前端开发：这就是终点吗？ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读让我们重新回到2021年后远程办公风潮兴起的日子，那时候，程序员岗位炙手可热。机会遍地都是，你甚至只需参加少量培训，通过面试后便能轻松收获年薪超15万的工作，还有余暇拍摄一段《程序员的一天》上传网络。经过短短一年左右的培训，你便踏上了年薪六位数的职业道路——那时候，当程序员似乎是一个人人羡慕的理想职业。然而
  • 如何保证 Redis 缓存与数据库双写一致性？ 凌志学java 后端数据库缓存redis数据库
    在做系统优化时，想到了将数据进行分级存储的思路。因为在系统中会存在一些数据，有些数据的实时性要求不高，比如一些配置信息。基本上配置了很久才会变一次。而有一些数据实时性要求非常高，比如订单和流水的数据。所以这里根据数据要求实时性不同将数据分为三级。第1级：订单数据和支付流水数据；这两块数据对实时性和精确性要求很高，所以不添加任何缓存，读写操作将直接操作数据库。第2级：用户相关数据；这些数据和用户相关
  • 【网络】数据流（Data Workflow）Routes（路由）、Controllers（控制器）、Models（模型） 和 Middleware（中间件） 一袋米扛几楼98 网络工程/安全中间件
    在图片中，数据流（DataWorkflow）描述了应用程序中数据的流动过程，涉及Routes（路由）、Controllers（控制器）、Models（模型）和Middleware（中间件）。作为初学者，理解这些组件及其联系是掌握Web应用程序开发的关键。以下是对每个技术点的详细解释，以及它们如何相互关联的分析。1.Routes（路由）定义：路由定义了应用程序的URL端点（Endpoints）以及服
  • Python 用户账户(让用户拥有自己的数据) 钢铁男儿 Python从入门到精通python数据库sqlite
    Web应用程序的核心是让任何用户都能够注册账户并能够使用它，不管用户身处何方。在本章中，你将创建一些表单，让用户能够添加主题和条目，以及编辑既有的条目。你还将学习Django如何防范对基于表单的网页发起的常见攻击，这让你无需花太多时间考虑确保应用程序安全的问题。然后，我们将实现一个用户身份验证系统。你将创建一个注册页面，供用户创建账户，并让有些页面只能供已登录的用户访问。接下来，我们将修改一些视图
  • Python 用户账户(让用户能够输入数据) 钢铁男儿 Python从入门到精通python数据库sqlite
    Web应用程序的核心是让任何用户都能够注册账户并能够使用它，不管用户身处何方。在本章中，你将创建一些表单，让用户能够添加主题和条目，以及编辑既有的条目。你还将学习Django如何防范对基于表单的网页发起的常见攻击，这让你无需花太多时间考虑确保应用程序安全的问题。然后，我们将实现一个用户身份验证系统。你将创建一个注册页面，供用户创建账户，并让有些页面只能供已登录的用户访问。接下来，我们将修改一些视图
  • SpringBoot接口防抖(防重复提交)，接口幂等性，轻松搞定 web18285482512 面试学习路线阿里巴巴springboot后端java
    啥是防抖？所谓防抖，一是防用户手抖，二是防网络抖动。在Web系统中，表单提交是一个非常常见的功能，如果不加控制，容易因为用户的误操作或网络延迟导致同一请求被发送多次，进而生成重复的数据记录。要针对用户的误操作，前端通常会实现按钮的loading状态，阻止用户进行多次点击。而对于网络波动造成的请求重发问题，仅靠前端是不行的。为此，后端也应实施相应的防抖逻辑，确保在网络波动的情况下不会接收并处理同一请
  • 《Hello 算法》火了！！！一本写给算法初学者的入门算法书籍 遇码 分享算法hellohello算法算法书籍
    曾经也放出豪言壮语，决心要刷遍力扣上的所有算法题目。然而现实就很快啪啪的打脸。不知道多少人和我有过一样的经历。在读到《Hello算法》的序中，作者靳宇栋给了我们一个“台阶”。随后就表达了针对我们的现状，他特地写了《Hello算法》这本书，代表广大算法初学者表示感激涕零。《Hello算法》为什么适合入门动画图解、一键运行的数据结构与算法教程全书采用动画图解，内容清晰易懂、学习曲线平滑，引导初学者探索
  • 【MySQL】实战篇—数据库设计与实现：根据需求设计数据库架构 AI人H哥会Java MySQLsqlmysql数据库
    在设计数据库架构时，开发者需要遵循一系列步骤，以确保数据库能够高效、可靠地满足系统需求。以下是设计数据库架构的理论知识和步骤说明。1.需求分析需求分析是数据库设计的第一步，旨在理解系统的功能需求和数据需求。通过与利益相关者（如用户、开发人员和业务分析师）进行沟通，明确系统需要存储和管理的数据类型。步骤说明识别业务需求：确定系统的主要功能，例如用户管理、订单处理、库存管理等。收集数据需求：明确每个功
  • 一文读懂Python之random模块（31） 跟着杰哥学Python python
    random模块是Python的内置标准库，用于生成各类随机数，可以用作生成网站初始登录密码和随机验证码。一、random模块简介random模块可以生成随机数，包括随机整数、浮点数、随机元素等。二、random模块相关概念随机数：是指在一定范围内随机产生的数，每个数被选中的概率相等。随机数最重要的特性是其后产生的数与前面的数毫无关系，即随机性、不可预测性和不可重现性。三、random模块常用方法
  • 从“制造”到“智造”，看中集“灯塔”生产线与永洪“数据技术”的紧密融合 永洪科技 制造大数据数据分析BI数据可视化
    “灯塔”工厂，这一由世界经济论坛提出的概念，已成为制造业领域的一个新的标杆，它代表着制造业的最高智能化水平。作为全球领先的制造企业，中集集团一直致力于提升生产效率和产品质量，以满足全球贸易的不断增长需求。永洪科技与中集集团的合作，正是围绕打造制造业的“灯塔”生产线而展开的。中集集团成立于1980年，总部位于深圳，是中国制造业的领军企业之一，业务涵盖物流、能源、化工等领域。近年来，随着全球经济的复苏
  • 打造金融数据新引擎，看永洪科技助力头部农信社搭建一站式分析平台 永洪科技 金融数据可视化BI数据分析大数据
    在数字化转型的浪潮中，金融行业作为经济发展的核心引擎，正加速探索数字化、智能化的新路径。永洪科技，近日成功助力某省农村信用社联合社（简称：Z企业）完成了其数字化转型的重要一步，通过部署先进的商业智能解决方案，为Z企业的业务升级与效能提升注入了强劲动力。随着智能金融时代的来临，以大数据、人工智能、移动互联等新兴技术为核心的金融科技持续赋能银行金融业务数字化、智能化、开放化的发展，为金融机构营销体系的
  • 应用-构建并优化 Python 的 Rust 扩展 李星星BruceL 自动化测试pythonrust开发语言
    目录构建并优化Python的Rust扩展如果你的Python代码运行速度不够快，你可以选择使用编译语言来编写更快的扩展。本文将重点介绍Rust，它具有以下优势：现代工具链，包括名为crates.io的包仓库和内置的构建工具（cargo）。出色的Python集成和工具支持。Rust的Python支持包是PyO3。对于打包，你可以使用setuptools-rust来与现有的setuptools项目集成
  • 【地图 Map3d】——2 花花 Show Python pyecharts—从0到精通信息可视化数据分析python
    解锁数据可视化的魔法钥匙——pyecharts实战指南在这个数据为王的时代，每一次点击、每一次交易、每一份报告背后都隐藏着无尽的故事与洞察。但你是否曾苦恼于如何将这些冰冷的数据转化为直观、吸引人的视觉盛宴？欢迎来到《pyecharts图形绘制大师班》在这里，你将不再受限于单调的表格和图表，而是学会如何运用pyecharts这一强大的Python数据可视化库，将复杂的数据转化为令人惊叹的交互式图形。
  • 景联文科技：以高质量数据标注推动人工智能领域创新与发展 景联文科技 科技人工智能数据标注
    在当今这个由数据驱动的时代，高质量的数据标注对于推动机器学习、自然语言处理（NLP）、计算机视觉等领域的发展具有不可替代的重要性。数据标注过程涉及对原始数据进行加工，通过标注特定对象的特征来生成能够被机器学习模型识别和使用的编码格式，从而使数据更具有意义和可解读性。数据标注的主要类型包括：图像标注：指在图片中标识出目标物体的位置、形状或类别等信息，如自动驾驶技术中的行人、车辆及交通标志的识别。文本
  • 【块浮点（BFP）技术：原理、设计及应用】 youngerwang 移动5G测试验证之禅道matlab信息与通信基带工程
    文章目录块浮点（BFP）技术：原理、设计及应用摘要关键词：块浮点（BFP）技术；量化；数据压缩；自适应调整；联合编码；硬件实现；Matlab一、引言二、BFP原理（一）基本概念（二）量化过程（三）逆过程（解量化）三、BFP设计（一）块大小选择（二）缩放因子编码（三）量化比特宽度选择四、BFP设计难点解析（一）数据动态特性与块大小适配（二）缩放因子编码的复杂度与效率平衡（三）量化精度与压缩比的最优平
  • SQL的各种连接查询 xieke90 UNION ALLUNION外连接内连接JOIN
    一、内连接   概念：内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。                 内连接（join 或者inner join ）       SQL语法：       select * fron
  • java编程思想--复用类 百合不是茶 java继承代理组合final类
          复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书   一:组合语法:就是将对象的引用放到新类中即可     代码:     package com.wj.reuse; /** * * @author Administrator 组
  • [开源与生态系统]国产CPU的生态系统 comsci cpu
          计算机要从娃娃抓起...而孩子最喜欢玩游戏....       要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....       投入一些资金和资源,人力和政策,让游
  • JVM内存区域划分Eden Space、Survivor Space、Tenured Gen，Perm Gen解释 商人shang jvm内存
    jvm区域总体分两类，heap区和非heap区。heap区又分：Eden Space（伊甸园）、Survivor Space(幸存者区)、Tenured Gen（老年代-养老区）。 非heap区又分：Code Cache(代码缓存区)、Perm Gen（永久代）、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。 HotSpot虚拟机GC算法采用分代收
  • 页面上调用 QQ oloz qq
    <A href="tencent://message/?uin=707321921&amp;Site=有事Q我&amp;Menu=yes">   <img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
  • 一些问题 文强chu 问题
    1.eclipse 导出 doc  出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 ..... SQL:3.mysql  * 必须得放前面 否则  select&nbs
  • 生活没有安全感 小桔子 生活孤独安全感
           圈子好小，身边朋友没几个，交心的更是少之又少。在深圳，除了男朋友，没几个亲密的人。不知不觉男朋友成了唯一的依靠，毫不夸张的说，业余生活的全部。现在感情好，也很幸福的。但是说不准难免人心会变嘛，不发生什么大家都乐融融，发生什么很难处理。我想说如果不幸被分手(无论原因如何)，生活难免变化很大，在深圳，我没交心的朋友。明
  • php 基础语法 aichenglong php 基本语法
    1 .1 php变量必须以$开头 <?php $a=” b”; echo ?> 1 .2 php基本数据库类型 Integer  float/double Boolean string 1 .3 复合数据类型 数组array和对象 object 1 .4 特殊数据类型  null 资源类型(resource)    $co
  • mybatis tools 配置详解 AILIKES mybatis
    MyBatis Generator中文文档 MyBatis Generator中文文档地址： http://generator.sturgeon.mopaas.com/ 该中文文档由于尽可能和原文内容一致，所以有些地方如果不熟悉，看中文版的文档的也会有一定的障碍，所以本章根据该中文文档以及实际应用，使用通俗的语言来讲解详细的配置。 本文使用Markdown进行编辑，但是博客显示效
  • 继承与多态的探讨 百合不是茶 JAVA面向对象 继承 对象
    继承 extends   多态 继承是面向对象最经常使用的特征之一：继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类，这个新类拥有现有类的所有extends是使用继承的关键字：     在A类中定义属性和方法； class A{ //定义属性 int age； //定义方法 public void go
  • JS的undefined与null的实例 bijian1013 JavaScriptJavaScript
    <form name="theform" id="theform"> </form> <script language="javascript"> var a alert(typeof(b)); //这里提示undefined if(theform.datas
  • TDD实践（一） bijian1013 java敏捷TDD
    一.TDD概述         TDD：测试驱动开发，它的基本思想就是在开发功能代码之前，先编写测试代码。也就是说在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。     
  • [Maven学习笔记十]Maven Profile与资源文件过滤器 bit1129 maven
    什么是Maven Profile Maven Profile的含义是针对编译打包环境和编译打包目的配置定制，可以在不同的环境上选择相应的配置，例如DB信息，可以根据是为开发环境编译打包，还是为生产环境编译打包，动态的选择正确的DB配置信息   Profile的激活机制 1.Profile可以手工激活，比如在Intellij Idea的Maven Project视图中可以选择一个P
  • 【Hive八】Hive用户自定义生成表函数(UDTF) bit1129 hive
    1. 什么是UDTF   UDTF，是User Defined Table-Generating Functions，一眼看上去，貌似是用户自定义生成表函数，这个生成表不应该理解为生成了一个HQL Table， 貌似更应该理解为生成了类似关系表的二维行数据集   2. 如何实现UDTF 继承org.apache.hadoop.hive.ql.udf.generic
  • tfs restful api 加auth 2.0认计 ronin47
    　　目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点： 　　一是基于客户端的ip设置。这个比较容易实现。 　　二是基于OAuth2.0认证，这个需要lua，实现起来相对于一来说，有些难度。 　　现在重点介绍第二种方法实现思路。 　　 前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGe
  • jdk环境变量配置 byalias javajdk
    进行java开发，首先要安装jdk，安装了jdk后还要进行环境变量配置： 1、下载jdk（http://java.sun.com/javase/downloads/index.jsp），我下载的版本是：jdk-7u79-windows-x64.exe 2、安装jdk-7u79-windows-x64.exe 3、配置环境变量：右击"计算机"-->&quo
  • 《代码大全》表驱动法-Table Driven Approach-2 bylijinnan java
    package com.ljn.base; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collections; import java.uti
  • SQL 数值四舍五入 小数点后保留2位 chicony 四舍五入
    1.round() 函数是四舍五入用，第一个参数是我们要被操作的数据，第二个参数是设置我们四舍五入之后小数点后显示几位。 2.numeric 函数的2个参数，第一个表示数据长度，第二个参数表示小数点后位数。 例如： 　　select   cast(round(12.5,2)   as   numeric(5,2))  
  • c++运算符重载 CrazyMizzz C++
    一、加+，减-，乘*，除/ 的运算符重载 Rational operator*(const Rational &x) const{ return Rational(x.a * this->a); } 在这里只写乘法的，加减除的写法类似 二、<<输出,>>输入的运算符重载      &nb
  • hive DDL语法汇总 daizj hive修改列DDL修改表
    hive DDL语法汇总 １、对表重命名 hive> ALTER TABLE table_name RENAME TO new_table_name;   2、修改表备注 hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
  • jbox使用说明 dcj3sjt126com Web
    参考网址：http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [ 点击下载]  技术交流QQGroup：172543951 100521167 [2011-11-11] jBox v2.3 正式版 - [调整&修复] IE6下有iframe或页面有active、applet控件
  • UISegmentedControl 开发笔记 dcj3sjt126com
      //    typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {     //        UISegmentedControlStylePlain,     // large plain   &
  • Slick生成表映射文件 ekian scala
    Scala添加SLICK进行数据库操作，需在sbt文件上添加slick-codegen包 "com.typesafe.slick" %% "slick-codegen" % slickVersion 因为我是连接SQL Server数据库，还需添加slick-extensions，jtds包 "com.typesa
  • ES-TEST gengzg test
    package com.MarkNum; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation
  • 为何外键不再推荐使用 hugh.wang mysqlDB
    表的关联，是一种逻辑关系，并不需要进行物理上的“硬关联”，而且你所期望的关联，其实只是其数据上存在一定的联系而已，而这种联系实际上是在设计之初就定义好的固有逻辑。 在业务代码中实现的时候，只要按照设计之初的这种固有关联逻辑来处理数据即可，并不需要在数据库层面进行“硬关联”，因为在数据库层面通过使用外键的方式进行“硬关联”，会带来很多额外的资源消耗来进行一致性和完整性校验，即使很多时候我们并不
  • 领域驱动设计 julyflame VODAO设计模式DTOpo
    概念： VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来。 DTO（Data Transfer Object）：数据传输对象，这个概念来源于J2EE的设计模式，原来的目的是为了EJB的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，我泛指用于展示层与服务层之间的数据传输对
  • 单例设计模式 hm4123660 javaSingleton单例设计模式懒汉式饿汉式
           单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。      &nb
  • logback zhb8015 loglogback
    一、logback的介绍      Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块：logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
  • 整合Kafka到Spark Streaming——代码示例和挑战 Stark_Summer sparkstormzookeeperPARALLELISMprocessing
    作者Michael G. Noll是瑞士的一位工程师和研究员，效力于Verisign，是Verisign实验室的大规模数据分析基础设施（基础Hadoop）的技术主管。本文，Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间， Michael还提到了将Kafka整合到 Spark Streaming中的一些现状，非常值得阅读，虽然有一些信息在Spark 1.2版
  • spring-master-slave-commondao 王新春 DAOspringdataSourceslavemaster
    互联网的web项目，都有个特点：请求的并发量高，其中请求最耗时的db操作，又是系统优化的重中之重。 为此，往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层，要保证针对主库进行写操作，对多个从库进行读操作。当然在一些请求中，为了避免主从复制的延迟导致的数据不一致性，部分的读操作也要到主库上。（这种需求一般通过业务垂直分开，比如下单业务的代码所部署的机器，读去应该也要从主库读取数
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他