PC端固定布局1

Posted 2020-07-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PC端固定布局1相关的知识，希望对你有一定的参考价值。

<!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;
}

以上是关于PC端固定布局1的主要内容，如果未能解决你的问题，请参考以下文章