Heim > Artikel > Web-Frontend > CSS+HTML-Design-Website-Navigation

CSS+HTML-Design-Website-Navigation

零到壹度Original: 2018-03-20 11:35:451731Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich die spezifischen Schritte und die damit verbundenen Bedienungsfähigkeiten zum Entwerfen einer Website-Navigation mit CSS + HTML vor. Ich hoffe, er kann Ihnen helfen.

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

Das obige ist der detaillierte Inhalt vonCSS+HTML-Design-Website-Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode zum Erzielen eines Tab-Seitenwechseleffekts mit CSS_CSS Tutorial_CSS_Web Page ProductionNächster Artikel：Beispielcode zum Erzielen eines Tab-Seitenwechseleffekts mit CSS_CSS Tutorial_CSS_Web Page Production

In Verbindung stehende Artikel

Mehr sehen