想知道怎样设计的
这种效果是通过什么设计的？
2 回答
我随便写来练手的 不难哦 只要你HTML+CSS学会了就很简单的
<style>
*{
margin: 0;
}
.nav{
list-style: none;
width: 700px;
height: 50px;
margin: 20px auto;
background: pink;
border-radius: 10px;
box-shadow: 0 5px 5px #4D555D;
}
.nav li{
position: relative;
top: 15px;
left: 2px;
padding:0 20px;
float: left;
text-align: center;
border-right: 1px solid #AAAE83;
}
.nav a{
text-decoration: none;
font: 16px/16px "微软雅黑";
color: #fff;
font-weight: 800;
text-shadow: 1px 1px 1px #00C8C8;
}
.nav li:nth-of-type(6){
border: none;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Resources</a></li>
<li><a href="">Contact Me</a></li>
</ul>
</body>
举报
0/150
提交
取消
