今天是我参与「第五届青训营」伴学笔记创作活动的第 2天

1、解决高度塌陷

父元素由子元素撑起来，如果子元素浮动了，就没有高度了，导致父元素高度塌陷。

在父元素中设置高度
在父元素写上clearfix属性，

        .clearfix::after{
            content:'';
            display:table;
            clear:both;
        }

2.制作仿掘金导航条

        body {
            font-size: 1.333rem;
            font-family: "PingFang SC", -apple-system, Arial, "Microsoft YaHei", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
        }
        
        .clearfix::after,
        .clearfix::before {
            content: '';
            display: table;
            clear: both;
        }
        
        .outside_wrapper {
            width: 100%;
            background-color: azure;
            border-bottom: 1px solid paleturquoise;
            /* 为了确保垂直居中 */
            height: 70px;
            line-height: 70px;
            text-decoration: none;
        }
        
        .inside_wrapper {
            font-size: 1.33rem;
            color: #86909c;
            width: 1496px;
            margin: 0 auto;
            height: 10px;
        }
        
        .inside_wrapper a,
        .left_nav i {
            color: #86909c;
        }
        .inside_wrapper li{
            margin: 0 8px;
        }
        
        .inside_wrapper a:hover {
            color: #86909cb8;
        }
        
        .left_nav {
            float: left;
        }
        
        .right_nav {
            float: right;
        }
        .right_nav a{
            color: rgb(0, 102, 255);
        }
        
        .left_ul li {
            float: left;
        }
        
        .right_ul li {
            float: left;
        }
        
        .logo img {
            vertical-align: middle;
        }
        
        .tu img {
            width: 120px;
            vertical-align: middle;
        }
    </style>

在css选择器当中可以，通过.XXX YY选择到后面的这个类下面的标签。在处理掘金logo的时候，需要让标签垂直居中，vertical-align: middle;，对于img标签的大小，使用width来处理。给每一个li标签设置外边距

            margin: 0 8px;
        }

对于ul标签，我们要让它横着排列，进行向左浮动处理。效果如图所示：

鼠标移动到a标签上面，字体颜色会发生改变， .inside_wrapper a:hover { color: #86909cb8; }来处理，就会看到效果。在导航条两端，由两部分的空位，这是因为内部容器居中。

3.css

首先，在 CSS 的开始处有一个@font-face块，它指定要下载的字体文件

  font-family: "myFont";
  src: url("myFont.ttf");
}
1.  浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如，大多数现代浏览器都支持 WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web 开放字体格式版本 1 和 2)，它是最有效的格式，但是旧版本 IE 只支持 EOT (Embedded Open Type，嵌入式开放类型) 的字体，你可能需要包括一个 SVG 版本的字体支持旧版本的 iPhone 和 Android 浏览器。我们将向您展示如何生成所需的代码。
1.  字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中 (或者在您的站点上) 提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。

CSS样式|青训营笔记

1、解决高度塌陷

2.制作仿掘金导航条

3.css