设计师工作日常
设计师工作日常

有趣的css - 第一个字符串自动生成文字图标

1200_670 5.png

在设计 app 界面的时候，要展示一部分最新的资讯入口，然后出了一张下面的 UI 稿。

UI稿截图如下：

有趣的css - 第一个字符串自动生成文字图标_第1张图片

列表设计比较简单，就是列表前面的圆形图标这块，我个人觉得还是有点意思的。

一般的话，大概率都是用js限制字符串长度，然后截图第一个字符串显示到圆里。

但是有些时候，英文和中文在字符串限制时，中文是占两个字符的。

这样的话，图标可能会发生变形，字符会不居中。

我就想能不能用 css 来实现这样的图标样式。

废话到此，先来个demo。

html部分：

<ul>
	<li><span>第一个字符串生成文字图标span>第一个字符串生成文字图标li>
	<li><span>用CSS可以做什么？span>用CSS可以做什么？li>
	<li><span>前端的致命诱惑span>前端的致命诱惑li>
ul>

css部分：

span{
	width: 42px;
	height: 42px;
	line-height: 40px;
	color: #1E47ED;
	font-size: 18px;
	font-weight: 700;
	text-indent: 12px;
	border-radius: 50%;
	display: block;
	float: left;
	overflow: hidden;
	background-color: #eaeaea;
	letter-spacing: 20px;
	margin-right: 15px;
}

主要看 css 部分，先固定 span 标签宽高为，圆角 50%，然后设定行高，让字符垂直居中；

设定 overflow: hidden，限制字符溢出；

然后设定 letter-spacing: 200px ，让字符间距变大，不让第二个字符显示到 span 中；

然后设定 text-indent: 12px，来让第一个字符居中。

至此，这个字符图标就用 css 实现了。

渲染效果：

有趣的css - 第一个字符串自动生成文字图标_第2张图片

完整代码：

HTML

DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>04 第一个字符串生成文字图标title>
head>
<body>
    <div class="app">
        <ul>
        	<li><span>第一个字符串生成文字图标span>第一个字符串生成文字图标li>
        	<li><span>用CSS可以做什么？span>用CSS可以做什么？li>
        	<li><span>前端的致命诱惑span>前端的致命诱惑li>
        ul>
    div>
body>
html>

CSS

*{
    margin: 0;
    padding: 0;
    list-style: none;
    transition: .5s;
}
html,body{
    background-color: #f5f5f5;
    color: #fff;
    font-size: 14px;
}
.app{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.app ul {
	max-width: 300px;
}
.app ul li{
	width: 100%;
	color: #152239;
	font-size: 16px;
	line-height: 42px;
	margin: 15px 0;
	float: left;
}
.app ul li span{
	width: 42px;
	height: 42px;
	line-height: 40px;
	color: #1E47ED;
	font-size: 18px;
	font-weight: 700;
	text-indent: 12px;
	border-radius: 50%;
	display: block;
	float: left;
	overflow: hidden;
	background-color: #eaeaea;
	letter-spacing: 20px;
	margin-right: 15px;
}

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

[1] 阅读原文

我是 Just，这里是[ 设计师工作日常 ]，求点赞求关注！！！

你可能感兴趣的:(有趣的css,html,css,前端,css3)

  • Wazuh: 一款超强大的威胁预防、检测安全平台！支持虚拟化、容器化和云环境保护 开源项目精选 安全
    Wazuh是一个功能强大且高度灵活的开源安全平台，旨在为企业和组织提供全面的威胁预防和检测能力。它集成了多种安全功能，包括入侵检测、漏洞管理、合规性监控等，能够有效地保护企业的网络和系统安全。Stars数11982Forks数1785主要特点多维度威胁检测：Wazuh能够对系统日志、文件完整性、网络流量等多个数据源进行实时监测，及时发现潜在的安全威胁。通过对这些数据源的综合分析，Wazuh可以提供
  • GraphQL Schema Registry：企业级GraphQL架构的利器 宣连璐Maura
    GraphQLSchemaRegistry：企业级GraphQL架构的利器graphql-schema-registryGraphQLschemaregistry项目地址:https://gitcode.com/gh_mirrors/gr/graphql-schema-registry项目介绍graphql-schema-registry是一个专为GraphQL联邦网关设计的企业级Schema存储
  • 学习使用 Git 和 GitHub 开发项目的教程推荐 vortex5 学习gitgithub
    Git和GitHub是现代软件开发中不可或缺的工具，无论你是个人开发者还是团队成员，掌握它们都能极大提升效率。本文精选了一系列优质教程资源，涵盖从基本Git命令到进阶多人协作的内容。这些教程既有文字形式，也有视频或交互式资源，适合不同学习风格的人。一、为何要学习Git和GitHub？Git是一个分布式版本控制系统，让你追踪代码变更、回滚错误并与他人协作；GitHub则将其扩展为一个云端平台，支持代
  • AI写作平台推荐：AnKo免费AI助力高效写作！ zhongken259 人工智能AI编程aiAI平台AI软件AI写作AI网站
    AI写作平台推荐：AnKo免费AI助力高效写作！在如今的创作领域，AI写作平台推荐已经成为许多创作者的首选。尤其是AnKo深受用户喜爱。AI写作平台推荐AnKo，不仅能提升写作效率，还能实现精准创作，真是不可错过！AI写作平台推荐：独特优势AI写作平台推荐AnKo，凭借其多模型AI聚合工具，能够提供更加精准和个性化的写作服务。AI写作平台推荐AnKo，不同于其他平台，它能根据创作者的需求灵活调整创
  • C语言的五套标准：C89、C99、C11、C17和C23（新手必看） xiecoding.cn c语言开发语言C语言入门C++C/C++数据结构
    作为一门经典的编程语言，C语言标准随着时间不断演进，以适应新的编程需求和技术发展。本文将详细介绍C语言的五套标准：C89、C99、C11、C17和C23。我们将从每套标准的背景、主要特性入手，逐步深入，帮助你理解它们之间的差异以及对编程实践的影响。C89：奠定基础的第一个标准C89，也称为ANSIC，是C语言的第一个正式标准，由美国国家标准协会（ANSI）于1989年发布，后在1990年被国际标准
  • VMware Tools灰色无法点击的解决方法 噎住佩奇 区块链linux运维服务器
    遇到问题：1.虚拟机是有网络的情况下，在线安装。2.1.更新软件源列表sudoapt-getupdate2.2.更新软件sudoapt-getupgrade2.3.下载安装open-vm-tools-desktopsudoapt-getinstallopen-vm-tools-desktop-y虚拟机的复制和粘贴可以使用了！
  • CDN与RTC（实时通信）技术 百态老人 实时音视频
    CDN（内容分发网络）和RTC（实时通信技术）是两种在现代互联网应用中广泛使用的技术，它们各自具有独特的特点和应用场景。CDN的特点与应用CDN通过在全球范围内部署边缘节点，将内容缓存到用户附近的服务器上，从而减少网络延迟，提高访问速度和用户体验。其主要优势包括：加速静态和动态内容的加载：通过缓存机制和智能路由，CDN可以显著提升网站和应用的响应速度。优化用户体验：通过减轻源服务器的负载，CDN能
  • JQ实现异步请求的几种方法 CsharpDev-奶豆哥 开发语言javascript
    在jQuery中，实现异步请求（AJAX）有多种方法。以下是几种常见的实现方式及其示例代码。1.$.ajax()方法$.ajax()是jQuery中最通用的AJAX方法，支持高度定制化。示例$.ajax({url:'你的请求地址',//请求URLmethod:'GET',//请求方法dataType:'json',//预期返回的数据类型success:function(response){cons
  • 火山引擎宋慎义：RTC产品需多样化才能良性发展 LiveVideoStack_ 音视频RTC视频云音视频webrtc
    编者按：自大流行以来，我们见证了多媒体技术走向巅峰，RTC伴随着生活的方方面面，不可分割。一时间，多媒体圈空前热闹，资本涌入，人才争夺空前火爆，跳槽很多时候意味着薪资数倍增长。然而好景不长，2021年在线教育“团灭”，导致许多技术服务商现金流紧张。另一方面，RTC服务过分同质化，价格战不可避免。许多小公司无力支撑，或被收购，或被迫裁员转型退出战场，整个行业处在焦虑的煎熬中。剩者为王，也许真正的赢家
  • zookeeper&nacos&kafka之间的联系 Gold Steps. 技术博文分享zookeeperkafka微服务服务发现
    一、ZooKeeper与Kafka的协同工作原理1.核心关系：Kafka对ZooKeeper的依赖在Kafka2.8版本之前，ZooKeeper是Kafka集群的“大脑”，负责管理集群元数据、协调节点状态和故障恢复。两者的协同主要通过以下关键机制实现：Broker注册与心跳KafkaBroker启动时会在ZooKeeper的/brokers/ids路径下注册临时节点（EphemeralNode），
  • Kafka集群部署实战 Gold Steps. 技术博文分享kafka分布式
    服务背景ApacheKafka作为分布式流处理平台，在金融交易系统、物联网数据处理、实时日志分析等场景中发挥关键作用。某电商平台日均处理订单消息1.2亿条，峰值QPS达5万，采用Kafka集群实现订单状态流转、用户行为追踪和库存同步等功能。以下是经过生产验证的集群部署方案及典型故障处理经验。集群运维最佳实践1.容量规划建议指标推荐值监控阈值分区数量/Broker≤4000≥3500告警副本同步延迟
  • 基于FSK调制的多点无线数据传输系统设计（含有源码） 妄北y 竞赛项目研究实战汇集mongodb单片机嵌入式硬件
    摘要本系统设计了一种基于FSK（频移键控）调制的多点无线数据传输系统，主要由一个主接收机和两个发射机组成。系统以89S52单片机为核心，负责数据的编码、解码及控制功能，采用FSK调制方式实现文字和语音数据的无线传输。系统配备LCD显示屏，支持数据的实时显示与存储，具备多功能传输与存储能力。本文详细介绍了系统的设计方案、硬件模块实现、软件设计及调试过程，并展示了系统的测试结果与未来应用前景。关键词：
  • 使用Java实现Oracle表结构转换为PostgreSQL的示例方案(AI) 秉承初心 AI创造javaoraclepostgresql
    核心代码importjava.sql.*;importjava.util.ArrayList;importjava.util.HashMap;importjava.util.List;importjava.util.Map;publicclassOracleToPGConverter{//类型映射表privatestaticfinalMapTYPE_MAPPING=newHashMapcolumn
  • 腾讯云服务器标准型s2/sa1/sa2区别在哪？如何选择？ m0_58271257 腾讯云
    腾讯云服务器标准型实例包括很多种不同机型的型号。本文主要说S2实例、sa1实例和sa2实例。这三款实例都是腾讯云页面比较常见的机型。这样对于新用户就容易产生困扰，不知道该选择哪个。下面详细说说在腾讯云常看到的这几款云服务器区别在哪，又该依据什么选择。我们选择电脑、服务器首先关心的都是CPU、内存怎么样。所以先这两个地方对比结果。CPU处理器不同1、标准型S2是于IntelCPU，也就是Intel云
  • 腾讯云与阿里云，哪个更好些？ 云计算开发者小李 阿里云腾讯云
    借用一部电视剧的名字：都挺好！根据IDC最新的数据统计显示，国内前二的云计算平台分别是阿里云、腾讯云，分别背靠阿里、腾讯两大互联网集团，接下来我们就简单的介绍下两大平台。阿里云：国内最早成立的云计算平台，并且一开始就是独立运营，马爸爸宣称每年投入10亿，连续投入10年，最终阿里云的发展没有让阿里人失望，目前已成长为超千亿美元的独角兽，阿里云也由最早的带有明显淘系特色的云平台成长为综合性的云计算平台
  • 自己搭建react + antd + less + ts项目 可缺不可滥 react框架逻辑前端项目框架reactantdlessts
    文章目录第一步通过官方的create-react-app，找个喜欢的目录，执行：第二步暴露配置的文件，执行：第三步支持less第四步创建路由第五步解决跨域问题第六步实现mockjs分离式开发第七步axios请求后台接口或mock接口第八步（可选）：配置antd，及其按需加载第九步将项目改造为typescript第一步通过官方的create-react-app，找个喜欢的目录，执行：/**最后面是项
  • Java并发编程之ReentrantReadWriteLock Johnny Lnex Java并发编程java开发语言jvm
    基本使用方法创建锁对象首先，通过newReentrantReadWriteLock()创建一个锁实例。获取读锁和写锁使用readLock()方法获得读锁对象，使用writeLock()方法获得写锁对象。使用锁保护共享资源在需要保护的代码块前后分别调用lock()和unlock()方法，确保对共享资源的访问安全。示例代码：importjava.util.concurrent.locks.Reentr
  • AI数字人分身系统+deepseek深层技术刨析 Yxh18137784554 数字人人工智能音视频架构
    #数字人分身系统##ai数字人#AI数字人分身系统：解码技术源头架构，重塑数字未来**在元宇宙加速渗透、人机交互边界持续突破的今天，AI数字人分身系统正从科幻概念演变为商业与社会的核心工具。其背后，一套融合顶尖AI技术与工程化思维的技术架构，正在重新定义“数字生命”的可能性。本文将从技术源头出发，深度解析AI数字人分身系统的核心架构设计，揭示其如何实现“形神兼备”的数字化身。---一、技术云罗数字
  • 解决VMware ESX常见问题：虚拟化故障排除指南 NauClojure 网络虚拟化
    VMwareESX是一种广泛使用的虚拟化平台，但在使用过程中可能会遇到一些常见问题。本文将介绍一些常见问题，并提供相应的故障排除指南和示例代码。问题：虚拟机无法启动故障排除：确保主机上的硬件符合VMwareESX的要求，并且已正确安装和配置。检查虚拟机的配置文件是否存在错误。可以使用以下命令检查配置文件的语法：vmware-v/path/to/vm/config.vmx检查主机的存储空间是否足够，
  • 智慧交通是什么，可以帮助我们解决什么问题? Guheyunyi 运维大数据人工智能信息可视化前端
    智慧交通是什么？智慧交通（SmartTransportation）是指利用物联网（IoT）、大数据、人工智能（AI）、云计算、5G通信等先进技术，对交通系统进行智能化管理和优化，以提高交通效率、减少拥堵、降低事故率、提升出行体验，并实现交通资源的合理配置和可持续发展。智慧交通的核心是通过数据采集、分析和应用，实现交通系统的智能化、自动化和协同化，从而构建一个高效、安全、绿色、便捷的交通生态系统。智
  • 物理服务器与云服务器的区别是什么 苹果企业签名分发 服务器运维
    首先，我需要确定用户的基本背景。可能是一个刚开始学习服务器知识的学生，或者是一个企业里负责IT基础设施的人员，想要了解如何选择服务器类型。不管怎样，用户需要的是两者的核心区别，可能还涉及成本、性能、管理等方面的考虑。物理服务器和云服务器，这两个概念在硬件、部署方式、资源管理上都有不同。首先，物理服务器是实实在在的硬件设备，企业自己购买和维护，而云服务器是基于虚拟化技术的资源，由云服务商提供，用户按
  • 苹果企业签名与超级签名优势对比 苹果企业签名分发 苹果企业签名
    企业签名是苹果提供给企业开发者的一种分发方式，允许他们内部部署应用，不需要通过AppStore。而超级签名则是利用个人开发者账号，通过添加设备UDID来实现分发，据说可以绕过一些限制，支持更多设备。接下来，用户想知道企业签名对比超级签名的优势。我需要从多个角度来比较，比如分发数量、成本、稳定性、合规性、安装流程、设备管理、使用场景、风险等方面。首先，企业签名的分发数量理论上没有限制，适合大规模分发
  • 火山云服务器在市场中的用户占有量 苹果企业签名分发 服务器火山引擎
    火山云服务器（即字节跳动旗下的火山引擎云服务）作为云计算市场的新兴参与者，其用户占有量目前尚未进入行业前列，但凭借字节跳动的技术背景和资源支持，正在逐步扩大市场渗透。以下是综合市场现状的分析：---###**1.整体市场格局**-**中国云计算市场前三**：阿里云、华为云、腾讯云占据主导地位（合计超60%份额）。-**第二梯队**：天翼云、AWS中国、百度智能云、京东云等。-**火山引擎**：属于
  • C语言历史 李鲶鱼 学习c++c语言
    从程序语言的发展过程可以看到，以前的操作系统等系统软件主要是用汇编语言编写的。但由于汇编语言依赖于计算机硬件，程序的可读性和可移植性都不是很好，为了提高可读性和可移植性，人们开始寻找一种语言，这种语言应该既具有高级语言的特性，又不失低级语言的优点。于是，C语言产生了。C语言是在由UNIX的研制者丹尼斯·里奇（DennisRitchie)和肯•汤普逊（KenThompson）于1970年研制出的BC
  • Promise 原理与实战：从基础到高级的完整教程 D.eL 前端工程化从无-通前端javascript
    一、前言：为什么会出现Promise?Promise的重要性我认为没有必要多说，概括起来就是五个字：必！须！得！掌！握！。而且还要掌握透彻，在实际的使用中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。最常见的一个场景就是ajax请求，通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，这个时候我们就需要等待，结果出来了之后才知道怎么样继续下去。letxhr=newXMLHttp
  • LeetCode 热题 100_跳跃游戏（78_55_中等_C++）（贪心算法） Dream it possible！ LeetCode热题100leetcodec++贪心算法算法
    LeetCode热题100_跳跃游戏（78_55）题目描述：输入输出样例：题解：解题思路：思路一（贪心算法）：代码实现代码实现（思路一（贪心算法））：以思路一为例进行调试题目描述：给你一个非负整数数组nums，你最初位于数组的第一个下标。数组中的每个元素代表你在该位置可以跳跃的最大长度。判断你是否能够到达最后一个下标，如果可以，返回true；否则，返回false。输入输出样例：示例1：输入：num
  • 微前端 qiankun vite vue3 可缺不可滥 前端项目框架前端
    文章目录简介主应用qiankun-mainvue3vite子应用qiankun-app-vue2webpack5子应用qiankun-reactwebpack5子应用quankun-vue3vite遇到的问题简介主要介绍以qiankun框架为基础，vite搭建vue3项目为主应用，wepackvue2和webpackreact搭建的子应用，形成的一个微前端框架。主应用qiankun-mainvue
  • 量化投资中的投资组合风险溢价模型 云策量化 量化投资量化交易量化软件量化炒股QMT量化交易PTrade量化软件量化投资deepseek
    推荐阅读：《程序化炒股：如何申请官方交易接口权限？个人账户可以申请吗？》量化投资中的投资组合风险溢价模型在量化投资的世界里，风险和回报总是如影随形。投资者们就像是在大海中航行的船长，既要寻找宝藏，又要避开暗礁。今天，我们就来聊聊量化投资中的一个关键工具——投资组合风险溢价模型，它就像是船长的罗盘，帮助我们在风险和回报之间找到平衡。引言：风险与回报的舞蹈在量化投资中，我们经常听到“风险溢价”这个词。
  • Python逆向爬取Tik Tok，MsToken,X-Bogus以及signature 才华是浅浅的耐心 pythonjavascript前端
    自5月起，抖音正式开放Web接口，并不断升级风控机制。从最初的_signature参数，到增加滑块验证，再到如今的JSVM混淆处理，以及mstoken和x-bougs等参数的引入。分析发现，部分国内接口仅需提供Cookie即可访问，无需额外验签，而获取Cookie的方式多种多样，其中利用OpenCV识别滑块验证码是一种简单可行的方法。相比之下，TikTok的接口无需Cookie，但对签名的校验更加
  • blender渲染有波纹光圈怎么解决 Renderbus瑞云渲染农场 渲染知识瑞云新闻blender渲染农场动画云渲染云渲染效果图云渲染3d云渲染农场
    在使用Blender进行三维渲染作业时，偶尔会遇到渲染图像中出现波纹光圈的问题，这种情况的出现会影响渲染效果的质量，导致最终产品效果图无法达到理想的状态，那么此类危机出现时，该如何解决呢？一起来简单看看吧。出现波纹光圈原因常见的诱因包括光照设置不当、色彩位深不足、抗锯齿问题以及渲染分辨率设置不当。针对这些问题，逐一排查并进行针对性的优化调整是根本的解决方案。接下来，我们将探索一些有效的修正策略，帮
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他