03 项目分析搭建

网页分析

1. 使用网格布局
2. 头部区域 .large-header 分为导航区 .bili-nav，banner 区 .bili-banner，频道区 .bili-channel。
3. 主体 main：推荐列表 .recommended-container，滚动按钮 .sidebar

主体搭建

head

<title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
<meta
  name="description"
  content="哔哩哔哩（bilibili.com）是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。" />
<link rel="stylesheet" href="./css/base.css" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<script src="./js/iconpark.js"></script>

large-header 头部区域

<!-- 头部 -->
<div class="large-header">
  <!-- 导航 -->
  <div class="bili-nav"></div>
  <!-- banner -->
  <div class="bili-banner"></div>
  <!-- 频道 -->
  <div class="bili-channel"></div>
</div>

main 主体

<!-- 主体 -->
<div class="main">
  <!-- 推荐列表 -->
  <div class="recommended-container"></div>
  <!-- 滚动按钮 -->
  <div class="sidebar"></div>
</div>

项目结构

❯ lsd --tree
 .
├──  css
│   ├──  base.css
│   └──  index.css
├──  docs
│   ├──  lesson2.md
│   ├──  lesson3.md
│   └──  svg.txt
├──  favicon.ico
├──  img
│   ├──  carousel1.webp
│   ├──  header-banner.webp
│   ├──  logo.png
│   ├──  web-home-common-cover-01.webp
│   ├──  web-home-common-cover-02.webp
│   ├──  web-home-common-cover-03.webp
│   ├──  web-home-common-cover-04.webp
│   ├──  web-home-common-cover-05.webp
│   └──  web-home-common-cover-06.webp
├──  index.html
├──  js
│   └──  iconpark.js
├──  README.md
└──  svg
    ├──  up.svg
    ├──  下载客户端.svg
    ├──  专栏.svg
    ├──  分区.svg
    ├──  创作中心.svg
    ├──  动态.svg
    ├──  历史.svg
    ├──  右箭头.svg
    ├──  大会员.svg
    ├──  客服.svg
    ├──  左箭头.svg
    ├──  弹幕数.svg
    ├──  投稿.svg
    ├──  搜索按钮.svg
    ├──  播放量.svg
    ├──  收藏.svg
    ├──  新歌热榜.svg
    ├──  更多.svg
    ├──  活动.svg
    ├──  消息.svg
    ├──  热门.svg
    ├──  直播.svg
    ├──  社区中心.svg
    ├──  课堂.svg
    ├──  顶部.svg
    ├──  频道.svg
    └──  首页.svg