B站首页制作1

在开始前，可以设置一个base.css文件，在之后的过程中不用反复设置同一样式

第一部分：头部

1.导航区

1.1左侧入口

HTML：

<svg></svg>为小图标，可直接从B站的网页中获取

css样式

 

呈现效果如图

 

1.2输入框

HTML：

css

 

效果如图

 

1.3右侧入口

 

2.banner

（为底部图片区域）

总结：

大多数情况下不会用到float浮动布局，多数为flex布局以及grid布局

当用flex布局时，通常使用

{

display:flex;

align-items:center;

justify-content:center;

}

当宽设置为百分比时。例如width：100%；并且同时还设置了内边距padding，那么应当加上box-sizing：border-box；属性，这样布局不会受影响。