时间戳

首页 > 解决方案 > Html5 和 css3 中的 flex 导航栏

html - Html5 和 css3 中的 flex 导航栏

问题描述

我实际上有这个：

HTML5：

<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="es" manifest="example.appcache">

<head>
  <link rel="stylesheet" href="D:\HTML\CSS\background_style.css">
  <link rel="stylesheet" href="D:\HTML\CSS\Css.css">
  <title>VENEZUELAGAMING</title>
</head>
<body>
<header class= "header_title">
  <h1>VENEZUELAGAMING</h1>

</header>

<div class="nav-bar">
  <ul class="nav-bar">
    <a class= "Tienda" href="#Tienda">TIENDA</a>
    <a class= "Quienes_somos" href="#Quienes Somos">QUIENES SOMOS</a>
    <a class= "Contactanos" href="#Contactanos">CONTACTANOS</a>
  </ul>
</div>


</body>
</html>

CSS3：

header {
    text-align: center;
    padding-bottom: 1cm;
}

.nav-bar {
    position: relative;
    background-color: #000;
    overflow: hidden;
}

.nav-bar a {
    float: left;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 12px;
}

当我将页面缩放到 300% 或 500% 的导航栏时，它看起来不像 facebook、instagram 和 intel 等的导航栏。我在 css 中尝试了一些标签，但找不到解决这个问题的方法

标签： htmlcss

解决方案

推荐阅读