在web前端里,用css怎么实现半角的效果?

html-css023

在web前端里,用css怎么实现半角的效果?,第1张

如果网页背景是白色的，可以设一个小的span定在想实现半角的那个地方，设置宽高为0，给设置边框 例如

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>带缺角的水平菜单 </title>

<style>

#menu{ font-family:Arialfont-size:14px}

#menu a , #menu a:visited{ float:leftdisplay:blockposition:relativebackground:#c00color:#ffftext-decoration:nonepadding:6px margin:1px 0 0 1px }

#menu a span{ height:0width:0border-bottom:6px solid #c00border-left: 6px solid #fffposition:absolutetop:0left:0overflow:hidden}

#menu a:hover{ color:#333background:#f90}

#menu a:hover span{ border-bottom:6px solid #f90}

</style>

</head>

<body>

<div id="menu">

<a href="#"><span class="left"></span>Home</a>

<a href="#"><span class="left"></span>Contact Us</a>

<a href="#"><span class="left"></span>Web Dev</a>

<a href="#"><span class="left"></span>Web Design</a>

<a href="#"><span class="left"></span>Map</a>

</div>

</body>

</html>

字体的大小是根据字体的高度来定的（而不是你自认为的对角线），等宽字体的半角字符（如英文字母、数字、符号等）的宽度是高度的一半，全角字符（如汉字）的宽度和高度则相等，而在比例字体（通常只有英文字体中才有比例字体，汉字都是等宽的）中，宽度则是不相等的（比如W的宽度就远大于i的宽度），但会以大写的M作为基准，M的宽和高是相等的。

行高=字符的高度+行间距

如果已设定font-size:12px，而line-height:16px，则行间距为16-12=4px

1、CSS代码里要用半角的空格，才不会有影响。如下图“float: left”之间用“半角空格”的。

2、如下图，“flost:　left”之间用了全角空格，CSS样式就不起作用了。