DDR爱好者之家 Design By 杰米
英文原文:CSS FOR BAR GRAPHS
翻译整理:西米CC-www.ximicc.com
这是一种相对比较复杂的图表,但是仍然遵循上篇中提出的最基本的思路。本例中使用的定义列表标签dl可能平常我们见得不多,一般我们在做列表的时候通常只会用到ul和li标签,至于dl一般都很少用到,它也属于列表类的标签,下面说一下大概的用法:
dl标记定义了一个定义列表,定义列表中的条目是通过使用dt标记(定义标题)和dd标记(定义描述)创建的。dt给出了术语名,dd标记给出了术语的定义信息。
也就是说dt用来创建列表中的上层项目,dd用来创建列表中最下层项目,dt和dd都必须放在dl的起始和结束标签之间。来看一个例子:
<dl>
<dt>西米CC</dt>
<dd>触手生春</dd>
<dd>不可或缺</dd>
<dd>无懈可击</dd>
<dt>触手生春</dt>
<dd>Html基础</dd>
<dd>CSS入门</dd>
<dd>应用实例</dd>
</dl>
在不进行任何样式设计的话,它的显示效果如下:
在本例的CSS柱状图中,每个图标前都有相应的项目说明文字,我们把它放在dd标签中。dd中的内容就如基本的CSS柱状图原理一样,通过背景的设置来显示相应比例的效果。首先来看一下XHTML代码:
<dl>
<dt>Spring</dt>
<dd>
<div style="width:25%;"><strong>25%</strong></div>
</dd>
<dt>Ximicc</dt>
<dd>
<div style="width:55%;"><strong>55%</strong></div>
</dd>
<dt>Technique</dt>
<dd>
<div style="width:75%;"><strong>75%</strong></div>
</dd>
</dl>
注意这里的strong标签,它并不是仅仅为了修饰文字,在后续步骤中它还有很重要的作用。理解了dl标签的用法之后,整个的XHTML结构看起来就不是很复杂了,最终出来的效果中将会有三条柱状图标,当然在运用的时候可以进行增减。下面是三张在CSS样式设计是要用到的背景图片:
上一页12 下一页 阅读全文
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月02日
2024年11月02日
- 蒋志光韦绮姗.2014-传奇巨声【环星】【WAV+CUE】
- 关淑怡.2008-演唱会+无尽经典3CD【环球】【WAV+CUE】
- 伍佰.2002-冬之火九重天演唱会特选录音专辑2CD【滚石】【WAV+CUE】
- 李宗盛1996《李宗盛的凡人歌2CD》滚石[WAV+CUE][1G]
- 刘德华 《天意》1:1直刻黑胶LPCD[WAV+CUE][1.1G]
- 刘德丽2024《赤的疑惑HQCD》头版限量编号MQA[低速原抓WAV+CUE]
- 英雄联盟万圣节有什么皮肤返场 2024万圣节皮肤返场一览
- lol万圣节赠礼活动什么时候开始 2024万圣节活动时间介绍
- 2024全球总决赛blg是全华班吗 全球总决赛blg选手所属国家介绍
- 《LOL》S14半决赛:T1战胜GEN晋级决赛!对决BLG
- 《完蛋美女前传》白白演员抱怨:都没人玩我的线
- 玩家热议OLED屏对画面提升巨大:比PS5 Pro值得买
- PatriciaPaay-TheLadyIsAChamp(ExpandedEdition)(2024)[24Bit-96kHz]FLAC
- 尚士达.2024-莫回头【智慧小狗】【DTS-WAV分轨】
- 区瑞强-黄金时代HQCDII头版限量wav