您的位置：首页 > Web前端 > CSS

css案例学习之双斜角横线菜单

2015-11-30 15:54 1216 查看
效果





代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>双斜角横线菜单</title>
<style>

#menu {                         /*对menu层设置*/
width:9em;                    /*宽度*/
margin:0 auto;                /*水平居中*/
font-family:Arial;            /*字体*/
font-size:14px;                /*字号*/
border:solid 1px #aaa;        /*细灰色边框*/
}

#menu a, #menu a:visited {        /*设置菜单选项*/
display:block;                 /*设置为块级元素*/
text-decoration:none;         /*无下划线*/
color:#000;                     /*黑色文字*/
height:1.4em;                 /*高度*/
border:0.5em solid #fff;         /*白色*/
}
#menu a:hover {
color:#fff;                    /*白色文字*/
background-color:#aaa;         /*深灰色背景色*/
border-color:#ddd #aaa;        /*上下边框浅灰色，左右与背景色相同*/
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head>

<body>
<div id="menu">
<a href="#"> Home</a>
<a href="#"> Contact Us</a>
<a href="#"> Web Dev</a>
<a href="#"> Web Design</a>
<a href="#"> Map</a>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航