這兩天重新把前端的只是梳理了下，按照簡約的設計理念做了幾套樣例，記錄下，方便自己方便他人。先上結果圖，一個很簡單的網站導航，沒有圖片，沒有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>
版權聲明：本文爲博主原創文章，未經博主允許不得轉載。
