这两天重新把前端的只是梳理了下，按照简约的设计理念做了几套样例，记录下，方便自己方便他人。先上结果图，一个很简单的网站导航，没有图片，没有JS
为了方便查看，css样式没有分开，下面是代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HOME</title>
<style type="text/css">
* { margin: 0; padding: 0 }
a:link, a:visited { text-decoration: none; }
ul, li { list-style-type: none }
img { border: 0; }
body { font-size: 12px; }
.nav_ul{
float:left;
border:0
color:#fff;
}
.nav_ul h4{
display: inline;text-align: center;
background:#ff4040;
}
.nav_ul>h4>a{
display:inline-block;
line-height:60px;
width:120px;
}
.nav_ul a{color:#FFF ;
font-family:\5FAE\8F6F\96C5\9ED1;
text-align:center;
font-size:16px;
}
.nav_ul a:hover{
background-color:#ee4040;
cursor:pointer;
}
.nav_li{
list-style-type:none;
visibility:hidden;
background:#ff4040;
height:50px;
width:120px;
margin-top:-2px;
}
.nav_li a{
line-height:50px;
display:block;
}
.nav_ul:hover li{
visibility:visible;
}
footer{ background:#ff4040; height:40px; line-height:40px;margin-bottom:0}
footer p{ width:1200px; margin:auto; text-align:right;color:#FFF }
footer p a{color:#FFF}
footer p a:hover{ text-decoration:underline}
.content{
width:100%;
height:380px;
color:transparent;
font-weight:bold;
font-size:14px;
font-family:\5FAE\8F6F\96C5\9ED1;
text-shadow:0px 0px 1px #333, 0 0 1px #fff;
text-align:center
}
</style>
</head>
<body style=" text-align:center">
<div style="width:100%; height:60px;line-height:60px; background:#ff4040;text-align:center;">
<div style="width:840px;height:auto; margin:0 auto ">
<ul class="nav_ul">
<h4><a href="#">首页</a></h4>
</ul>
<ul class="nav_ul">
<h4><a href="#">前端</a></h4>
<li class="nav_li"><a>Html</a></li>
<li class="nav_li"><a>CSS</a></li>
<li class="nav_li"><a>CSS3</a></li>
<li class="nav_li"><a>JavaScript</a></li>
</ul>
<ul class="nav_ul">
<h4><a href="#">Java</a></h4>
<li class="nav_li"><a>Core_Java</a></li>
</ul>
<ul class="nav_ul">
<h4 ><a href="#">Java Web</a></h4>
<li class="nav_li"><a>Spring</a></li>
<li class="nav_li"><a>Hibernate</a></li>
</ul>
<ul class="nav_ul">
<h4><a href="#">Android</a></h4>
</ul>
<ul class="nav_ul">
<h4><a href="#">相册</a></h4>
</ul>
<ul class="nav_ul">
<h4><a href="#">联系</a></h4>
</ul>
</div>
</div>
<div class="content">
<div style="width:500px;height:100px;margin:200px auto;">
<p style=" margin-left:0px;line-height:30px">技术也可以很浪漫</p>
<p style=" margin-left:100px;line-height:30px">给生活增添不一样的色彩</p>
</div>
</div>
<footer>
<p>Design by <a href="http://user.qzone.qq.com/790321193/" target="_blank">Albert Zhang</a></p>
</footer>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
相关推荐
经典css网站导航代码： 代码： ('curTab',this)">首页</span></a> <div></div> ('curTab',this)">网站建设</span></a> <div></div> ('curTab',this)">软件开发</span></a> <div></div>...
高亮红色的纯CSS网站导航菜单代码，默认状态下菜单是深灰色的，当鼠标放在任意一个菜单文字上时，该菜单背景变红色，高亮显示，变得光彩夺目，色彩对比强烈起来，高亮显示的菜单项也可很好的向用户指引当前的位置，...
UL、LI 无序列表实现纯CSS网站导航菜单! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
纯CSS下拉导航代码 纯CSS下拉导航代码 纯CSS下拉导航代码 纯CSS下拉导航代码
一个用纯css做的无限极导航，只有一个页面，简单，简洁，演示里面已经添加到9级菜单导航，还可增加更多，但是子导航靠左还是靠右是要手动添加css样式控制。各级菜单都可以随内容的长度自行适应宽度，而当浏览器...
纯css的导航下拉菜单 纯css的导航下拉菜单 纯css的导航下拉菜单
29款纯DIV+CSS网站导航菜单源码分享喽
纯CSS编写的导航菜单
垂直三级网站导航菜单是一款位于网页左侧，纯CSS3实现的三级网站导航菜单。代码简单，反应迅速。
此源码内容为纯css打造绿色横向二级导航菜单代码，去IE6的BUG
纯实现CSS3创意导航菜单特效是一款通过CSS3 transform和transition方法实现的，非常简单。
不用js就可以通过简单修改实现自己好看的导航滑出效果，不占资源，效率高
用纯css3技术实现的带动画效果的质感二级导航菜单，没有用到js和图片，全部用css3实现。可以访问下面的链接查看示例和教程。
网页制作前端用纯CSS制作二级导航，用最简单的CSS样式实现二级导航下拉列表，html和css样式简洁清晰，一看就会，拿来就能直接用。
利用纯css制作的导航栏，随着鼠标的移动，每个栏目会变色，图标运用css sprite技术制作，减少了图片加载过多的烦恼，您指的拥有。利用纯css制作的导航栏，随着鼠标的移动，每个栏目会变色，图标运用css sprite技术...
本源码是一款非常有创意的纯CSS3导航菜单特效的代码。该导航菜单主要通过CSS3 transform和transition方法实现效果，非常简单。该特效由進擊的燊提供。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera...
纯CSS下拉导航菜单 纯CSS下拉导航菜单
一款没有JS的导航代码，纯CSS实现的导航特效，竖向
很有用的导航菜单，提供出来，大家可以借鉴学习。