Web前端开发大作业-低仿Bilibili，纯Html、CSS、JavaScript实现

<a href='https://s-lucien.github.io/imitate-Bilibili/'>Click here to preview</a> 目录 [一、 网站项目说明](#网站项目说明) [二、 网站各项目详细说明](#网站各项目详细说明) [1. 网站内容完整性](#网站内容完整性) [1.1网页完整性](#11网页完整性) [1.2 主页完整性](#主页完整性) [1.3 网页元素多样性](#网页元素多样性) [2. 网站样式设计说明](#网站样式设计说明) [2.1整体设计](#21整体设计) [2.2 元素样式设计](#22-元素样式设计) [3. 网站交互功能](#网站交互功能) [3.1 数据验证](#31-数据验证) [3.2 用户状态](#32-用户状态) [3.3 图片切换](#33-图片切换) [3.4 图形绘制](#34-图形绘制) [3.5 浮动](#35-浮动) [3.6 拖放](#36-拖放) [3.7分页导航](#37分页导航) [4. 特色](#特色) [4.1 设计亮点](#41-设计亮点) [4.2技术亮点](#42技术亮点) ## 网站项目说明 网站基于Html5、CSS3和原生JavaScript实现，参照Bilibili的设计，并包含各种常用元素、样式、交互功能，内容丰富，可供前端入门人员参照学习。 网站整体结构如下：  ## 网站各项目详细说明 ### 网站内容完整性 #### 1.1网页完整性 登录页面：  联系页面：  主页面：  分类展示页面-番剧：  分类展示页面-游戏中心：  视频详情页：  #### 主页完整性 页眉区：  Banner广告区：  正文区：  副栏区：  页脚区：  #### 网页元素多样性 列表（ul）：  图文混排：  视频：  Canvas：  ### 网站样式设计说明 #### 2.1整体设计 Dilidili整体以白色为主色调，纯净、简约兼容性好，有效突出网站内容。各个分页面布局与边距等设计不尽相同，以下一一介绍。 主页： 主页整体分为三个部分：header、main和footer。 Header部分包括导航栏、banner以及channel三个部分。导航栏整体采用flex布局，左边导航链接部分为横向排列的ul列表，紧接着是搜索框，最右边的用户部分采用绝对位置布局。背景为banner。Channel部分也采用flex布局，外边距与内边距为55px左右，使channel部分整体位于中央，排列紧凑。 Main部分宽1400px，左右内边距56px，包含推荐区、推广区、直播区、番剧区、漫画区、游戏区六大模块。这六个模块均采用grid布局，模块间存在56px的下内边距。具体行列数各分区略有不同。以下以推荐区与直播区为例介绍。 推荐区分为2行5列共10个小网格，其中左边为切换广告，占2行2列4个网格；右边为6个推荐视频，每个视频占1个小网格。直播区整体采用网格布局，分为左右两部分共5列，其中左侧推荐直播占4列，右边排行榜部分占1列。推荐直播内部又分为2行4列共8个小网格，每个推荐主播占1个网格。小网格间上下边距为6px，左右边距为12px。排行榜部分分为上下两块，上方为标题即“排行榜”，下方采用纵向列表布局。列表详细内容在元素样式中说明。其他模块布局与直播区类似，此处不再赘述。 Footer部分较为简单，主要由文字构成，包含联系我们等链接以及版权说明等，文字局中布局。左右外边距为15px，上下内边距为30px。 分页面-番剧： 除导航栏外，页面整体分为上下两块，采用流式布局。上方为banner区，采用justify-content属性将其居中，宽度为整个页面的75%。下方内容区同样采用flex布局，上边距20px与banner区隔开，宽度与其保持一致。内容区又分为左右两部分，均采用float：left布局。 分页面-游戏中心： 页面同样分为上下两块，上方banner区采用默认布局（div block），宽度100%，高度为固定值，无左右边距，详细内容将在后面介绍。下方同样为block布局，宽度为固定值1160px，左右外边距为auto，使其自动居于中央。 视频详情页： 页面分为左右两块，用一个流式布局的div包含，并设置justify-content属性为center使左右两部分相中靠拢，从而无需设置左右边距。左边为视频区域，右边为up主信息与推荐视频，整体都采用默认的block布局，从上而下排列。 联系我们页面： 该页面较为简单，仅包含导航栏、一张背景图片与信息表单，表单使用绝对位置居于页面中央，表单内每行均为block布局，整体文字靠左排列。 收藏页面： 整体分为上下两块，采用flex布局并设置justify-content属性使页面元素居中。上方图片区域采用grid布局，2行2列共4个小网格，每张图片占一个网格。下方分页切换控件采用绝对位置布局，使其位于图片下方、居中排列。 #### 2.2 元素样式设计 导航链接样式设计： 导航栏分为左边分类页面导航链接、中间搜索框和右边用户区三个部分，各个部分均为绝对位置布局，不含背景图片高度60px，浮动于页面最上方。 左边的分类链接区为横向排列的ul列表，采用flex布局，列表元素间左内边距10px。当鼠标悬停在“番剧”和“直播”两个链接上时将出现下拉框。下拉框宽500px，高300px，采用flex布局，分为左右两块，中间用浅灰色线隔开。左边宽350px，内边距20px，采用grid布局，共2列2行，每张图片及其标题占1个网格；右边为列表，包含若干项。 中间搜索框宽446px，高36px，背景为白色，紧接着是浅灰色的搜索button。右边用户区由登录、注册和投稿三个链接构成，内部采用flex布局；登录后则变为用户头像、收藏和投稿三个部分。其中投稿页面尚未实装。 当滚轮位于最上方时，导航栏内文字颜色为白色，背景为透明，与背景图融为一体。滚轮向下移动离开页面最上方时，导航栏内文字颜色变为黑色，背景颜色变为浅灰色，浮于页面最上层。如下图所示：   图 22.1 导航栏样式 广告样式设计： Dilidili共有三种广告样式，此处只介绍第二种。效果如下图所示：  整个banner区域采用flex布局，并设置justify-content属性为center，使其居中。Banner宽度为75%，内部使用dl列表，并设置position属性为relative。列表内含dt和dd两部分。 dt部分即为右下角的切换控件，内含4个anchor元素，每个anchor元素由一张小封面构成，宽64px，高48px，右边距5px，边框2px 白色。当鼠标悬停在小封面上方时，其边框颜色变为红色，且自动切换为对应的图片。 dd部分由图片及其左下角的介绍构成。图片铺满整个banner区域，位于底层。左下角介绍部分文字为白色，字体大小18px，为避免图片颜色干扰，对文字的背景设置了由黑到白的渐变