广州web培训
达内广州五羊中心

18589266248

热门课程

使用css制作斜角水平菜单导航

  • 时间:2016-08-30 16:11
  • 发布:广州web培训
  • 来源:helloweb

制作一个带有斜角的水平菜单,可能会给你带来一些灵感。

本例的关键在于,如何制作出左上角这个斜角。制作“带箭头的菜单“这个例子就很容易实现;核心思想就是利用边框的接角位置构造出一个斜角,对于每个菜单的a元素,放置一个span元素,设为corner类别,并作为CSS“角”,用于实现斜角效果,代码结构如下所示:

<div id="menu">

<a href="#"><span class="men"></span>首页</a>

<a href="#"><span class="men"></span>关于我们</a>

<a href="#"><span class="men"></span>服务项目</a>

<a href="#"><span class="men"></span>网页设计</a>

<a href="#"><span class="men"></span>联系我们</a>

</div>

首先简单定义下全局样式:

#menu{

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

margin:100px auto;

width:600px;

}

接着,设置每个菜单项的基本属性:

#menu a,#menu a:visited{

display:block;

float:left;

position:relative;

text-decoration:none;

color:#FFF;

background:#455552;

padding:8px 32px;

margin:0 1px;

}

现在你已经可以在游览器看到点效果了吧!

接下来就是设置斜角的方法了,写上去:

#menu a .men{

position:absolute;

height:0;

width:0;

overflow:hidden;

border-bottom:solid 6px #16A387;

border-left:solid 6px #FFF;

top:0;

left:0;

}

接着继续写鼠标经过的效果:

#menu a:hover{

color:#fff;

background:#16A387;

}

回到游览器看看效果,是不是有点像“折角”的效果,看起来也不错,如果喜欢这个效果可以到这里就结束了。

如果希望再完美一点,鼠标经过斜角部分也变成背景色,可以增加以下代码:

#menu a:hover span.men{

border-bottom:solid 6px #333;

}

刷新看看,是不是有什么变化!

至此我们得这个案例已经完成了,如你所见,你可以改变它的颜色,也可以把四个角都做成折角。

上一篇:10个方法帮你搞定Web设计风格指南
下一篇:a标签的伪类样式规划,减少多余代码

马上预约三天免费体验课

姓名:

电话:

达内web培训之css hover内容抖动

亚马逊要做智慧服务器

广州web培训:iPhone X前置耳机扬声器有杂音

余额宝年底规模增长高招

选择城市和中心
江西省

贵州省

广西省

海南省