到现在为止,一直在前端开发学习的最基础上,比如什么优化,什么美化之类。室友反而学的比我快。原因就是,我主要把时间放在基础知识的熟练掌握之上了,现在的CSS运用可以说是比较娴熟了。之后再进行更深一步的学习可能会更加轻松。
下面是我花一些时间写出的菜单优化,贴出源代码和效果,大家共同学习。
下面是最基础的导航效果:
先看下效果吧
鼠标移动到上面时是下面这种效果:
这是最基础的菜单。
源代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
padding:0;
overflow:hidden;
display:table;
height:auto;
margin:0 auto;
}
a:link,a:visited{
color:#ffffff;
text-transform: uppercase;
background-color: #bebebe;
font-weight:bold;
display: block;
width:120px;
padding: 9px;
text-align: center;
text-decoration: none;
}
a:hover,a:active{
color:#ffffff;
text-transform: uppercase;
background-color:red;
font-weight:bold;
display: block;
width:120px;
padding: 9px;
text-align: center;
text-decoration: none;
}
li{
float:left;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#news">news</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#about">about</a></li>
</ul>
</body>
</html>