PC端固定布局

最新推荐文章于 2022-08-08 20:35:42 发布

Bill11YAng

最新推荐文章于 2022-08-08 20:35:42 发布

阅读量820

点赞数 1

分类专栏： HTML5、CSS、JavaScript

本文链接：https://blog.csdn.net/softuse/article/details/50609519

版权

HTML5、CSS、JavaScript 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

LOGO采用的是h1标签，一般为了让搜索引擎更好的抓取关键字，我们建议一个页面只有一个上，而且是最重要的关键词放在里面。在首页上，最重要的关键词就是旅行社的名称。当然，如果在其他页面，比如新闻网站的单个新闻，最重要的应该是新闻标题，网的名称就其次了。

@charset "utf-8";

body,h1,ul{
   margin:0;
   padding: 0;
}

ul{
   list-style: outside none none;
}
a{
   text-decoration: none;
}

#nav{
   width: 100%;
   height: 70px;
   background-color: #333;
}

#nav>section{
   width: 1603px;
   height: 70px;
   margin:0 auto;
}

#nav>section>h1{
   width:500px;
   height: 70px;
   background-image: url(../Img/Wegelin_&_Co_Logo.png);
   text-indent: -9999px;
   float:left;
}

#nav>section>ul{
   /* background-color: red; */
   width: 650px;
   height: 70px;
   line-height: 70px;
   color:#eee;
   /*background-color: red; */
   float:right;
}

#nav>section>ul>li{

   width:130px;
   text-align: center;
   float:left;
}

#nav>section>ul>li>a{
   color:white;
   display:block;
}
#nav>section>ul>li>a:hover/*#nav>section>ul>li.active a*/{
   background-color: #000;
}

<!DOCTYPE html>
<html lang="zh-cn">
<head>
   <meta charset="UTF-8">
   <title>PC端固定</title>
   <link rel="stylesheet" href="CSS/style.css">
   
</head>
<body>
<nav id="nav">
   <section class="nav-center">

       <h1 class="nav-logo">旅行社</h1>
          <ul class="link">
           <li class="active"> <a href="###">首页</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>