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