纯css 网站导航

最新推荐文章于 2023-04-21 15:31:55 发布

夏天真特么热

最新推荐文章于 2023-04-21 15:31:55 发布

阅读量544

点赞数

分类专栏： html/css/css3 文章标签： css 导航前端设计

本文链接：https://blog.youkuaiyun.com/lianruanjian/article/details/46970527

版权

html/css/css3 专栏收录该内容

2 篇文章

订阅专栏

这两天重新把前端的只是梳理了下，按照简约的设计理念做了几套样例，记录下，方便自己方便他人。先上结果图，一个很简单的网站导航，没有图片，没有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>