这两天重新把前端的只是梳理了下,按照简约的设计理念做了几套样例,记录下,方便自己方便他人。先上结果图,一个很简单的网站导航,没有图片,没有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:0color:#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>
版权声明:本文为博主原创文章,未经博主允许不得转载。