CSS仿网易首页的头部菜单栏按钮和三角形制作方法

所属分类：网页制作 / CSS 阅读数： 1468

收藏 0赞 0分享

我先说如何制作三角形吧，相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧，比如说：

网易首页的头部菜单栏中，也会有这样的三角形

当鼠标经过时，三角形会垂直翻转，如下

现在我分享制作三角形的做法，主要是利用边框做成的

首先，四个三角形合并在一起的正方形，也就是正方形的四条边框形成的四个三角形

源代码：

CSS Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方形</title>
<style>
.div{
width: 0px;
height: 0px;
border-top:50px solid red;
border-bottom:50px solid green;
border-left:50px solid yellow;
border-right:50px solid blue;
/*注意：四条边框的宽度必须相同！*/
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>

效果如下：

现在，要把其中一个三角形取出来，其实就是要把其他的隐藏掉

源代码：

CSS Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作三角形箭头</title>
<style>
.arrow{
width:0;
height:0;
border-top:50px solid #000; /*设置并显示上边框*/
border-bottom:none; /*不设置下边框*/
border-left:50px solid transparent; /*设置但隐藏左边框*/
border-right:50px solid transparent; /*设置但隐藏右边框*/
}
.arrow:hover{
border-top:none; /*鼠标经过时，不设置上边框*/
border-bottom:50px solid #000; /*鼠标经过时，设置并显示下边框*/
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>

效果如下：

接下来，我分享一种按钮的做法

主要是利用边框样式、盒子阴影和伪类效果来实现的

源代码：

CSS Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS制作按钮</title>
<style type="text/css">
.btn{
width:100px;
height:100px;
background:#ccc;
border-radius:50%;
box-shadow:5px 5px 10px #000; /*设置外阴影*/
}
.btn:active{
background:#bbb;
box-shadow:5px 5px 10px #000 inset; /*设置内阴影*/
}
.btn div{
font-size:30px;
font-family:"微软雅黑";
color:blue;
float:left;
margin-top:28px;
margin-left:20px;
}
</style>
</head>
<body>
<div class="btn">
<a href="###">
<div>开始</div>
</a>
</div>
</body>
</html>

效果：

更多精彩内容其他人还在看

CSS教程:CSS命名参考

在XHTML中定义ID、CLASSS都用得上，主要是方面CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。 (1)页面结构类容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：na

收藏 0赞 0分享

CSS教程:控制网页文件大小通过精简CSS实现

尽管对于现如今的带宽来说，网页文件那仅以K来算的大小实在是微不足道，但如何将这以K来计算的网页文件精简到最小还是网页设计师们所应该考虑的问题之一。众所周之，在不影响整个网页构架与功能的情况下，网页文件越小越好，因为更小的网页文件有利于浏览器对网页的解释

收藏 0赞 0分享

CSS教程:关于文字溢出问题的研究

首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子，里面提到ie7下出现的文字溢出问题；于是又重新翻了以前怿飞斑竹的帖子，他提到的是注释引起的文字溢出问题，我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7，所以没有测试)，今天看到这个新

收藏 0赞 0分享

符合web标准的嵌入Flash的方法

　　常有网友提问，如何让网页中嵌入的Flash标签也符合web标准。目前还没有一个完美的解决办法，这篇文章中，我们将Flash嵌入标签写入js文件中，通过变量传递参数的办法来回避不符合标准的标签。　　请注意，这只是一个变通的方法，换汤不换药，并未能最终解决存在的

收藏 0赞 0分享

学习WEB标准必备的四项技能

今天在群里，熊猫君提议整理一个帖子，一方面为初学者提供一个入门指南，另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结，希望抛砖引玉，大家不吝赐教。１、必备工具其实web标准并不是很复杂的技术，实现web标准的工具

收藏 0赞 0分享

CSS对表格单元格强制换行和不换行

CSS控制Table单元格强制换行与强制不换行　　我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。　　近日有此需要，但发现加上nowrap在某些情况下还是会换行！无奈，没有一个强制不换行的方法吗？　　用C

收藏 0赞 0分享

CSS制作符合网站标准的细线表格

css教程：实现符合Web标准的细线表格　　随着应用CSS网页布局构建网页，　　以及web标准的广泛普及与发展，　　表格渐渐被人们遗忘，　　但是表格还是有它优秀的一面，　　数据处理用表格的确省了不少麻烦！　　这个是细表格的代码，并且通过了标准验证！ tab

收藏 0赞 0分享

区分IE6,IE7和firefox的CSS hack

这篇文章主要为介绍了CSS小技巧之有效区分IE6,IE7,Firefox，需要的朋友可以参考下

收藏 0赞 0分享

CSS教程:用dl dt dd来制作列表

　　今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方：　　1、如果用UL还布局，右边一栏比较麻烦；　　2、文字外边的边框自适应比较麻烦；　　3、很可能要定死高度；　　所以，细细地看一看这个布局，想一想还是用DL.DT.DD作

收藏 0赞 0分享

性感的CSS菜单(Menus)

当你需要一个简单易用的导航菜单得时候。CSSMenu是个不错的选择。相对于Flash/Javascript，他们小巧轻便，而且方便使用。当然，他们也能做出很多很漂亮的效果。 CssMenuExample 这里有几个专门收集CSS导航菜单的站点，其中有很多优秀的作品。也许能给

收藏 0赞 0分享

CSS仿网易首页的头部菜单栏按钮和三角形制作方法

CSS教程:CSS命名参考

CSS教程:控制网页文件大小通过精简CSS实现

CSS教程:关于文字溢出问题的研究

符合web标准的嵌入Flash的方法

学习WEB标准必备的四项技能

CSS对表格单元格强制换行和不换行

CSS制作符合网站标准的细线表格

区分IE6,IE7和firefox的CSS hack

CSS教程:用dl dt dd来制作列表

性感的CSS菜单(Menus)

网络赚钱

站长故事