<!doctype html>
<html lang="zh-cn">
<link rel="stylesheet" href="弹性伸缩布局.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>PC端固定布局</title>
</head>
<body>
<nav id="nav">
<section class="center">
<h1 class="logo">css3学习</h1>
<ul>
<li class="active"><a href="http://www.baidu.com">首页</a></li>
<li><a href="###">动画</a></li>
<li><a href="####">特效</a></li>
<li><a href="####">咨询</a></li>
<li><a href="###">照片</a></li>
</ul>
</section>
</nav>
<header>header</header>
<section>section</section>
<footer>footer</footer>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
body,h1,ul{
margin:0px;
padding:0px;
}
ul{
list-style:none
}
#nav{
width:100%;
height:100px;
background-color:#2C904B;
}
#nav .center{
width:1263px;
height:100px;
background-color:#2C904B;
margin:0 auto;
}
#nav .logo{
width:400px;
height:100px;
background-image:url(n.png);
background-size:contain;
text-indent:-9999px;
float:left;
}
#nav>section>ul{
color:#ABA8EF;
height:100px;
width:600px;
line-height:100px;
float:right;
}
#nav>section>ul>li{
float:left;
width:100px;
text-align:center;
}
a{
text-decoration:none;
}
#nav>section>ul>li>a{
color:#30B8F7;
display:block;
}
#nav>section>ul>li>a:hover,#nav>section>ul>li.active a{
background-color:#045006;
}
时间： 2024-10-13 08:02:09