recherche

Maison  >  Article  >  interface Web  >  Navigation sur le site Web de conception CSS+Html

Navigation sur le site Web de conception CSS+Html

零到壹度
零到壹度original
2018-03-20 11:35:451733parcourir

Cet article vous présente principalement les étapes spécifiques et les compétences opérationnelles associées à la conception de la navigation sur un site Web avec CSS+Html. Les amis dans le besoin peuvent s'y référer. J'espère qu'il pourra vous aider. 

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="CSS/style.css"/>
     <title>网站案例分析</title>
  </head>
   <body><!--=============导航部分================-->
     <ul class="nav">
      <li class="logo">LOGO</li>
      <li class="xuanzhong">网站首页</li>
      <li>关于我们</li>
      <li>新闻中心</li>
      <li>产品展示</li>
      <li>客户案例</li>
      <li>给我留言</li>
      <li>人才招聘</li>
      <li>联系我们</li>
  </ul>
 </body>
</html>
======================================================================
@charset "utf-8";
body{margin: 0 auto;padding: 0;
}.
nav{width: 1240px;height: 133px;margin: 0 auto;font-family: "微软雅黑";/*字体型号*/
}.
nav li{
list-style: none;/*去掉前面的所有点*/
float: left;/*让导航内容由竖排变成横排*/
width: 107px;height: 100%;/*和父节点一样高*/
line-height: 133px;/*行高就是行与行之间的距离*/
text-align: center;/*文字左右居中*/
font-size: 18px;/*字体大小*/
color: #333333;/*字体颜色*/
}.
nav .logo{
width: 363px;
height: 100%;
font-size: 64px;/*字体大小*/
color: #0c53ad;/*字体颜色*/
font-family: "微软雅黑";/*字体型号*/
}.
nav .xuanzhong{background-color: #1040a8;color: #ffffff;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de code pour obtenir un effet de changement de page d'onglet à l'aide de CSS_CSS Tutorial_CSS_Web Page ProductionArticle suivant：Exemple de code pour obtenir un effet de changement de page d'onglet à l'aide de CSS_CSS Tutorial_CSS_Web Page Production

Articles Liés

Voir plus