CSS实例教程:可拓展圆角标识的完成方式

日期:2020-12-13 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

 在制做网页页面的情况下,很时兴应用标识的方法开展归类显示信息,圆角标识具备款式美观大方、主要表现方法形象的优势,1般大家都会将圆角标识的情况制做成1张照片,这样做的不够的地方是假如标识文本篇幅转变(如图1),固定不动的情况照片不可以随之开展拓展。这样大家就必须制做许多张不一样宽度的情况照片,很不便捷。下面详细介绍两种制做可拓展圆角标识的方式。

图1 描边圆角标识
  如图1所示,圆角标识的边沿和情况色调不一样,最先大家必须在photoshop中制做1张情况照片(如图2),照片宽度要比将会出現的文本长度稍宽,高宽比最少等于标识具体高宽比,边沿设定为描边色调,內部为全透明,可是圆角之外的地区不可以设定为全透明,应当用网页页面情况色调填充,这里应用的是白色,大家将其取名为tab_bg.gif。

图2
编码以下:
下列是引入片断:
<styletype="text/css">
a.tab{float:left;margin:10px;padding-right:10px;background:#4B90C6url(tab_bg.gif)righttopno-repeat;font:bold14px/30px'Verdana';color:#FFF;}
a.tabspan{padding-left:10px;background:url(tab_bg.gif)no-repeat;display:block;}
</style>
<bodybgcolor="#FFFFFF">
<ahref="#"class="tab"><span>主页</span></a>
<ahref="#"class="tab"><span>本人材料</span></a>
<ahref="#"class="tab"><span>留言本</span></a>
</body>   编码表明:   1.完成思路是给<a>标识设定标识右边情况,给<span>标识设定标识左边情况来完成圆角标识的拓展;
  2.这类方式只必须免费下载1张情况照片,处理了标识两边情况显示信息不一样步的难题,可是假如标识内的篇幅超出了情况照片的宽度,就会出現难题(如图3),因此在制做情况照片的情况下,照片宽度应尽量的考虑到到最长的标识符宽度。

图3 纯色圆角标识
  上面1种状况因为必须完成描边实际效果,因此文本只能在情况宽度以内拓展,有1定的局限性。假如是纯色的圆角标识便可以完成彻底拓展(如图4)。


图4
  将第1次用到的情况照片左边和右边各自切成情况照片(如图5),取名为tab_left.gif和tab_right.gif。


图5
编码以下:
下列是引入片断:
<styletype="text/css">
a.tab{float:left;margin:10px;padding-right:10px;background:#033EA5url(tab_right.gif)righttopno-repeat;font:bold14px/30px'Verdana';color:#FFF;}
a.tabspan{padding-left:10px;background:url(tab_left.gif)no-repeat;display:block;}
</style>
<bodybgcolor="#FFFFFF">
<ahref="#"class="tab"><span>主页</span></a>
<ahref="#"class="tab"><span>本人材料</span></a>
<ahref="#"class="tab"><span>留言本</span></a>
</body> 编码表明:
  1.对<a>和<span>应用了不一样的情况,并将连接情况色设定为描边色调,做到纯色标识实际效果;
  2.此种方式能够做到随意拓展的实际效果。