首页 > 教程 > 关键词  > CSS3最新资讯  > 正文

用CSS3和HTML5五步打造便签效果

2012-04-23 17:53 · 稿源:站长之家

站长之家(CHINAZ.com)4月23日编译:在本教程中,你会学到如何把HTML的列表项(li元素)转换成下图的“便签墙”。该效果分5步实现。内核为webkit的Safari和Chrome浏览器以及Firefox和Opera中支持该效果,其它浏览器不能实现倾斜和动画效果(译者在IE9中进行了亲测,无法实现)。

演示 下载

第一步:HTML和基本的方形

我们先从最简单的,能在所有浏览器上正常显示的便签做起。 因为我们要使用HTML5来实现效果,便签的HTML内容的最外一层是不排序列表,其中包含多个列表项,每个列表项中又包含其它元素链接:

注意:每个便签的内容都包括在链接元素当中(即),同时通过键盘可对其进行操作。如果想要对列表项实现效果,我们需要设置atabindex属性,Google字体API找到名为“Reenie Beanie”的字体实现字体替换。使用API最简单的办法就是玩玩Google字体预览器

CSS代码很简单就把便签背景色变成黄色:

重新设置列表项在浏览器中通常显示的外边距(margin)和内边距(padding),并去掉它的样式(list-style:none)(译者注:即去掉li元素前的圆点,方框等样式)。

然后设置UL元素的内边距并隐藏它的溢出属性overflow,这样做可以保证稍后为列表项进行浮动排列(float)时,他们不会超出列表,文档中的下列元素会自动清除浮动。

我们把黄色的矩形整体作为链接,并为其设计样式,所有的列表项(即代码中的li元素)向左浮动(float:left)。最终就是一系列的黄色方框排列成下图的效果:

这个排列效果(其实是float元素的浮动)在包括IE6的所有的浏览器中都生效。

第二步:投影效果和草书风格字体

现在,为了让便签突出显示,需要给它增添投影效果,然后,使用草书风格的字体替换掉之前的内容。我们通过

举报

  • 相关推荐
  • 外卖员被五步蛇咬伤带照片去医院 最终转危为安

    6月21日晚,重庆巫溪县宁厂镇宝山村20多岁的外卖员王林回老家看望爷爷时,不幸被五步蛇咬伤右手,伤口血流不止,嘴唇也出血。 随后王林被紧急送往巫溪县人民医院,医生根据咬人毒蛇照片判断为五步蛇咬伤。因王林对血清皮试过敏,医生采用脱敏疗法,于6月22日凌晨0点过为其输液注射第一支稀释后的五步蛇血清。

  • 用AI解锁技术公益,第五届Light创造营圆满收官

    第五届Light创造营圆满收官,19支团队从847个申报项目中脱颖而出。经过激烈角逐,11个优秀项目入围并获得资助,覆盖无障碍服务、非遗传承、儿童教育、乡村振兴、环保等多元领域。本届创造营特别关注AI技术应用,多个项目聚焦解决残障群体生活难题,如AR字幕手语眼镜帮助听障人士实现双向沟通,面部控制系统让手部障碍者操作数字设备。此外,AI还被应用于青少年心理健康干预、景区无障碍评分等场景。腾讯基金会持续支持AI技术在公益领域的创新应用,五年来已孵化上百个具有社会价值的项目,影响范围不断扩大。

  • 腾讯云TencentOS Server AI,助力荣耀打造高性能AI底座

    随着生成式AI技术爆发式增长,AI大模型开始渗透至手机领域。荣耀基于腾讯云TencentOS Server AI的TACO-LLM加速模块部署DeepSeek-R1等开源大模型,在内部场景应用中实现稳定性、可靠性和推理性能的大幅提升。测试显示,使用TACO-LLM后,首Token延迟最高降低6.25倍,吞吐提升2倍,端到端延迟降低100%。TACO-LLM通过投机采样技术实现大模型"并行"解码,从根本上解决计算密度问题,大幅提升解码效率。荣耀表示该方案打造了高性能AI底座,提供高吞吐低延迟的优化方案,能无缝整合现有大模型部署方案。腾讯云TACO-LLM针对企业级AI模型私有化部署挑战,专门优化了大语言模型内核运行效率。

  • 天悦康康:AI赋能打造可验证的CBT-I睡眠疗法

    文章介绍了睡眠科学的重要性,指出传统助眠方式依赖主观经验而缺乏数据验证。重点介绍了天悦康康基于世界睡眠医学会认证的CBT-I(失眠认知行为疗法)构建的智能睡眠管理系统,通过智能指环精准监测睡眠数据,结合AI分析提供个性化睡眠改善方案。其创新在于将CBT-I的认知调整(改变错误睡眠观念)和行为训练(建立健康习惯)数字化,形成"数据监测+CBT-I模型+科学干预"的完整闭环。产品还具备睡眠银行、AI伴睡等特色功能,通过可视化数据和正向激励帮助用户养成规律作息,实现睡眠质量的可持续提升。

  • 年营收过亿:他用3步让用户愿意在私域长期留存

    ​五年来,老狙带领团队从医疗板块“医生IP”起步,再到大健康“控糖”项目,做到年营收过亿,跑出了一套清晰的复购与转化模型,通过控制、调理、逆转3步,让用户愿意在私域长期跟随管理。 他相信,私域的核心从不是一次成交,而是“理念种草 + 人设矩阵 + 内容钩子 + 信任接力”的复利结构,让“治未病”真正落在用户日常里。 在他看来,大健康的内容不是用来“�

  • Technics推出EAH-AZ100真无线耳机香槟金版 纪念品牌60周年

    Technics为庆祝品牌成立60周年,推出旗舰真无线耳机EAH-AZ100香槟金新色。该耳机采用全新开发的磁性流体驱动单元,带来高解析度、低失真的音质表现,支持Dolby Atmos空间音效和自适应降噪技术。新增Voice Focus AI通话增强功能,通过AI算法提升通话质量。配备五种尺寸耳塞,优化佩戴舒适度。续航达10小时,搭配充电盒可达28小时。支持三设备多点连接和LE Audio标准。沿袭品牌标志性设计,提供银、黑、香槟金三色可选。

  • Ceph存储效能飙升20%+!忆联PCIe5.0 ESSD智能多流技术攻克“隐形损耗”

    本文介绍了忆联Ceph分布式存储方案的技术优势。该方案基于PCIe5.0 ESSD,数据吞吐效率达上一代2倍;采用智能多流技术,性能优于主流竞品3.15%;有效抑制写放大效应(WAF),优于竞品20%-32%,可延长SSD寿命20%以上。方案通过硬件层面的创新突破,为云原生环境提供兼具超低延迟与超高一致性的存储基础设施,满足企业级客户对存储系统全生命周期稳定性的严苛需求。测试数据显示,在3副本配置下,QD32时随机读IOPS达175.5万,延迟稳定在1.1毫秒内;混合读写IOPS超50万,延迟约20毫秒。智能多流技术实现1.78超低WAF值,显著提升存储效能,是构建新一代分布式存储系统的理想选择。

  • 碳企通:通过GRS/RCS认证获取亚马逊绿标全攻略

    本文详细介绍了GRS(全球回收标准)和RCS(回收声明标准)认证体系,这是国际公认的回收材料认证体系,专注于纺织品、塑料制品等再生材料的可追溯性验证。通过这两项认证的产品可直接申请亚马逊气候友好承诺(CPF)绿标,获得专属流量入口和消费者信任背书。 碳企通推出"三步极速认证"服务:通过AI系统智能预审,3个工作日内完成预审报告;专家团队全程指导

  • 巴菲特⻘睐的ROE探索法―Reporto让你三步 识别⼀家好公司

    文章介绍了巴菲特推崇的ROE(净资产收益率)分析方法,通过三步法识别优质公司:1)基准衡量,判断公司ROE是否常年保持在15%以上;2)趋势分析,考察ROE的长期稳定性;3)杜邦分析,拆解ROE的驱动因素(净利率、资产周转率、财务杠杆)。文章以苹果和微软为例,说明如何通过ROE分析评估公司盈利质量。最后推荐了AI工具Reporto,能简化财务数据分析流程,自动生成可视化�

  • MAXHUB亮相2025MWC上海,多场景打造行业数字化新应用

    2025年6月18日,MWC上海世界移动通信大会开幕。MAXHUB与中国移动合作推出云视讯智慧屏,集成书写、展示、远程通讯与AI会议等功能,支持高清视频会议、软终端接入等多种通信形式,采用双重加密保障数据安全。同时展示全系列云电脑终端产品,覆盖教育、金融等多场景需求。在教育领域推出智慧教育解决方案,通过"小屏控大屏"功能增强课堂互动性。MAXHUB将持续深化与运营商合作,围绕AI、云计算等技术,开发适配政务、企业、教育等行业的数字化解决方案,助力构建更丰富的数智化生态。