Skip to content

03 项目分析搭建

网页分析

lesson

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

主体搭建

html
<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 头部区域

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

main 主体

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

项目结构

bash
 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