FCC—登陆界面

项目要求：

需求 1： 产品登录页应存在 `id="header"` 的 `header` 元素。

 需求 2： 在 `header` 元素内应存在 `id="header-img"` 的图像， 这里通常用来放置公司的 logo。

 需求 3： 在 `#header` 元素内，应存在一个 `id="nav-bar"` 的 `nav` 元素。

 需求 4： `nav` 元素中应至少包含三个 class 为 `nav-link` 且可点击的元素。

 需求 5： 当点击 `nav` 内的 `.nav-link` 按钮时，应滚动到产品主页上相应的部分。

 需求 6： 页面上应存在 `id="video"` 的嵌入式视频播放区域。

 需求 7： 产品登陆页应存在一个 `id="form"` 的 `form` 元素。

 需求 8： 在表单中，应存在一个 `id="email"` 的 `input` 输入框供用户填写邮箱。

 需求 9： `#email` 输入框内应存在描述该区域用途的占位符文字。

 需求 10： `#email` 输入框应使用 HTML5 验证来确认输入的内容是否为邮箱。

 需求 11：  在表单中，应存在一个 `id="submit"` 的 `input` 提交按钮。

 需求 12：  当点击 `#submit` 元素时，应将邮箱信息提交到一个静态页面（请使用这个模拟的 URL：[https://www.freecodecamp.com/email-submit](https://www.freecodecamp.com/email-submit)）。

 需求 13：  navbar 应保持在视口（viewport）的顶部。

 需求 14：  在此 app 中，应至少使用一次媒体查询。

 需求 15： 在此 app 中，应至少使用一次 CSS 的 flexbox 布局。

实验内容：

    
        
        
        
    
    
        

            

                

                    
信息
                    
拥有宠物
                    
未拥有宠物
                
            
            

                
            
            
        

        

            登陆邮箱：
            
            
        

        
        

            
信息
            
拥有宠物
            
未拥有宠物
        
    

几个需要注意的点：

嵌入框架(iframe):

flex（弹性布局）：
任何一个容器都可以指定为Flex布局，但设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex布局容器拥有六个属性，此例中flex容器属性均使用了默认值，没有进行更改。具体可去菜鸟了解：
https://www.runoob.com/w3cnote/flex-grammar.html
flex（弹性布局）实现横向导航栏的一个方法：
对列表标签ul：
 list-style-type: none;//消除列表项前面的点点
            display: flex;
同时将列表项均设为链接元素即可。

form中input标签下输入信息的提交：
需要注意的是：name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。
但这并不意味着不使用JavaScript就不用设置name属性了。
因为只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。（很重要！！）

margin-top与top:
margin-top是对于相邻块间的描述，一般在position:relative时使用；
而top只有在设置position:fixed或absolute时有意义。

媒体查询：
CSS的媒体查询用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。
媒体查询的使用方法有两种，即内联式和外联式。
此例中使用了内联式：
@media screen and(maxwidth: 300px){}
意为在视窗大于300px时，对页面显示进行大括号中的更改。