# 基于Bootstrap的动漫网页 **Repository Path**: zwhwan/Bootstrap ## Basic Information - **Project Name**: 基于Bootstrap的动漫网页 - **Description**: 网页基本全部使用Bootstrap组件，主要是我为了掌握Bootstrap而制作的。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2022-07-11 - **Last Updated**: 2023-02-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 基于Boostrap的《动漫网》网站的设计与实现。 ---------------------- ## 一.需求分析 我喜欢看番！！！ ### 1.1、课程设计题目 基于Bootstrap的《动漫网》网站的设计与实现。 ### 1.2、选题背景 了解到Bootstrap强大的快速制作网页的强大潜力 ### 1.3、运行环境 硬件：装有windows操作系统的计算机。 软件：vscode加windows的画图工具。 ### 1.4、开发工具 > vscode: 贼强大，只要下插件，什么不能写啊 > 画图: 修改图片尺寸符合网站基本分布 > ## 二、网站总体设计 ### 2.1、网站功能分析 一个基本都是Bootstrap组件的页面 ### 2.2、网站采用的主要技术 > Bootstrap 各种各样的组件只要稍加修改就可以打造成一个干净，整洁，好看的页面。 > 栅格布局 Bootstrap最出名的组件，它将容器分成了12列，我们可以分这12列来达到想要的效果。 > 伸缩布局 通过给父盒子设置flex布局，来控制子盒子的位置和排列方式。 > HTML5语言 超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。 HTML 5的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分 现代浏览器已经具备了某些 HTML5 支持。 支持的浏览器包括Firefox，IE9，Chrome，Safari等。HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已 经支持某些 HTML5 技术。 > CSS > CSS概述 （1）CSS是指层叠样式表，这些样式定义如何显示HTML元素。这是由于如果是一个大型的网 页，所有代码都写在一个HTML文件里面的话，会很不容易管理，同时代码的简洁度也不够，所 以讲HTML文件内相同的样式提取出来，写到专门的CSS文件内，在通过引用的方式得以展现， 大大提高了代码的复用率，提高了整体开发的效率。 （2）CSS语言的特点主要有这几个特点，丰富的样式定义，CSS提供了丰富的文档样式外观； 易于使用和修改，CSS可以将样式定义在HTML元素的style属性中，也可以定义在HTML文档的 header部分，还可以定义在专门的CSS文件中，供HTML文件引用。修改是只需要修改定义的那 部分代码，不需要修改所以使用这个样式的标签。易于管理，CSS可以将相同样式的元素进行 归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将 一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的 样式声明进行修改。多页面应用，CSS样式可以供任何页面文件都可以将其引用。页面压缩， 样式声明在CSS样式表中，可以大大的减少HTML页面的内容，减少页面加载的时间。 > CSS3 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了 CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字 特效、多栏布局等模块 。 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创 新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂 商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂 > DIV+CSS的布局方法 简介：CSS布局是目前最流行的网页制作技术。 《CSS+DIV网页布局技术详解》 [1] 通过实例讲解了CSS各个属性的使用方法和怎样使用 CSS进行页面的制作。全书内容包 括Web标准布 局的本质、XHTML书写规范、CSS基础与书写规范、网页头部元素的详细定义、CSS基本布局属 性、CSS容器属性、CSS定义文本属性、元素的修饰和CSS常见应用、DIV+CSS布局基础、关于 整站样式表的分析、关于标准的校验以及各种制作实例等内容。 表单处理 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的 元素。表单使用表单标签（
)定义。HTML5拥有多个新的表单输入类型。这些新特性提 供了更好的输入控制和验证。 轮播图 轮播图的技术实现了多张图片在网站的同一区域的滚动，消除了单个图片的单调性，减少了图 片空间的使用，提高了网站的可读性。 弹性盒布局 弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空 间, 收缩以适应更小的空间。 ## 三、网站详细设计与制作 ### 3.1、实施过程 1.先想好网站的主题和内容。 2.页面的排版，首页用的Bootstrap的栅格分布。 3.对页面进行响应式布局，对于一些图片进行自适应，当中小屏幕自动消失或者自动替换为小图片。 3.对页面细节进行调整，对一些不好的间距，bug进行优化。 ### 3.2、具体模块展示 -全页总览 ![img](imgs/index.png) -小屏幕页面总览 ![img](imgs/xmindex.png) -标签页三个页面一览 ![img](imgs/bqy-1.jpg) ![img](imgs/bqy-2.jpg) ![img](imgs/bqy-3.jpg) ### 3、网站内容展示 > 技术点 Bootstrap,flex,css3，animate ## 四、总结与体会 ### 1、总结 Bootstrap建页面确实挺快的。 ### 2、体会 通过对前端知识的了解 ，对网站设计也有了更深的了解，通过本次网页设计，我也基于HTML、CSS及JS 做出了一个网站雏形，同时也认知到前端技术的重要。通过本次课程设计，自我感觉收获颇多，既锻练 了自己项目开发的能力，同时锻炼了我应对一个空前庞大的项目面前如何应对、解决问题的能力。总 之，对于本次的网页设计必不可少的，对于往后的其他的课程设计和以后工作多有很大帮助。