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

html-css017

在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>

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

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

你好！

要么全部大写，要么全部小写的，但是在代码写多了，忘记了css里某些样式命名大写还是小写（虽然可以再查看css样式，但是浪费时间），这样将会出现伪css

hack

。

另外：浏览器版本、操作系统、浏览器品牌不同会导致对读取大小写非常过敏，加入你在命名CSS的是用#YangShi来命名，而在html中使用yanshi全小写来调用，这样在有些标准浏览器将不能解释，就意味着

css无效的。

总结，所以我们统一命名css样式的css命名的时候全部用

半角小写英文方式命名

。

仅代表个人观点，不喜勿喷，谢谢。