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

Navigation sur le site Web de conception CSS+Html

零到壹度
Libérer: 2018-03-20 11:35:45
original
1763 Les gens l'ont consulté

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;
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal