发表于： 2016-11-24 23:37:28
4 1585
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*先清除样式*/
*{
padding: 0;
margin: 0;
font-family: Arial;
}
#nav a{
text-decoration: none;
color:#e8e8e8;
}
ul li{
list-style: none;
}
body{
margin: 15px;
text-align: center;
}
/*包裹层样式*/
#nav{
width: 195px;
margin: 0 auto;/*居中*/
overflow: hidden;
background: #A3C159;
}
#nav>ul>li{
float: left;
/*border-right: 1px solid #ffffff;*/
}
#nav .horizontal>a{
width: 100%;
padding: 1em;
border-right: 1px solid #ffffff;
}
#nav li a:hover {
background: #1ba6b2;
}
.menubar a{
display: block;
width: 64px;
border-top: 1px solid #fff;
}
#nav ul li ul{
display: none;
}
#nav ul li:hover ul{
display: block;
position: absolute;
background: #A3C159;
}
</style>
</head>
<body>
<div id="nav">
<ul >
<li>
<a href="#">首页</a>
<ul>
<li><a href="#">首页1</a></li>
<li><a href="#">首页1</a></li>
<li><a href="#">首页1</a></li>
</ul>
</li>
<li>
<a href="#">作品</a>
<ul>
<li><a href="#">首页1</a></li>
<li><a href="#">首页1</a></li>
<li><a href="#">首页1</a></li>
</ul>
</li>
<li>
<a href="#">介绍</a>
<ul>
<li><a href="#">首页1</a></li>
<li><a href="#">首页1</a></li>
<li><a href="#">首页1</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
先把下拉菜单的代码写上。虽然是完成了这个效果，但是总觉得还是不熟练。
今天完成的事情：http://www.jianshu.com/p/fefd00405f56简书上写了一点自己的总结，把CSS Sprite看了一下，搜东西搜出来了如何让文本无法复制，还搜索了一下应用前缀
明天计划的事情：做出导航条，portfolio基本界面的css
遇到的问题：1.写的下拉菜单中，虽然给一级菜单添加了:padding:1em;但是好像整体的颜色背景并没有扩展，如何解决？
2.各个浏览器的前缀是最好先写上呢，还是这个阶段先不管他
收获：导航条虽然算是写的第二遍吧，是比第一遍完成的要好些，至少自己完成出来了。不过，看起来挺简单的一个效果，似乎还需要动点脑筋。再写两遍这个效果，达到能一口气写成！
对了，还希望师兄师姐如果有时间的话帮忙看下这个代码，哪些地方需要注意一下，---感觉自己写的好乱啊。。。
返回列表
评论