产品登录页

页面大体设计

编码流程

1. 按设计图把所需要的元素编码出来，注意编码的语义化。（整体骨架）
2. 逐个设计元素的样式位置。（美颜）
3. 检查页面是否存在显示bug，进行调试修改。

遇到的难点及解决方法

1. 导航栏如何固定在页面上方，与导航栏的位置调整

#box{
            height: 200px;
            width: 1333px;
            display: flex; /*弹性盒模型*/
            justify-content: space-between; /*调整商标和导航栏之间的位置，两端对齐*/
            position: fixed; /*定位是与浏览器的窗口为参照物的*/
            top: 0px; /*距离浏览器窗口上方距离为0px,这样最上面一栏就固定住了*/
            background-color: rgb(235, 231, 222);
        }

2. 标签的使用

<video width="800" height="450" controls id="video"> /*加上关键字controls，插入的视频就有播放按钮*/
        <source src="food.mp4" type="video/mp4"> /*src:文件路径，type:文件类型*/
      您的浏览器不支持Video标签噢~ψ(｀∇´)ψ。 /*这是浏览器不支持时显示的文字*/
</video>

3. 导航栏的跳转功能实现

<nav>
            <a href="#radish1">详细介绍</a>
            <a href="#video">烹煮方式</a>
            <a href="#price-box">价钱</a>
</nav>
/*使用<a>标签实现跳转到页面的响应模块，在href属性中填入跳转模块的属性名即可*/

下面是页面实现效果：

完整代码链接

https://codepen.io/hhhguihub/pen/QWGePxx