# WebShow

**Repository Path**: gcode_top/webshow

## Basic Information

- **Project Name**: WebShow
- **Description**: WebShow 实时打分展示平台
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-02-26
- **Last Updated**: 2025-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

Web前端技术典型案例实战教学演示目录



> 案例1:
>
> Axure的原型演示:[demo](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/CalDemo/start.html)
> 说明:产品原型通过蓝图快速设计工具设计,可把设计蓝图或设计草图很快展示给客户。
>
> Html5实战演示:[demo](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/JavascriptDemo/CalDemo.html)
> 说明:根据上述的蓝图设计,采用Bootstrap的Card、InputGroup等组件技术以及html5 number控件、JQuery技术。45分钟完成一个可随机出题并伴有CSS动画以及Javascript脚本的技术演练。
> 



> 案例2: 
>
> Html5实战演示[demo](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/FixedNavbar/Index.html)
> 说明:主要采用Bootstrap的Fixed Navbar以及Sticky Navbar布局等技术,45分钟完成一个导航栏布局演练。
>  
> 

> 案例3:
>
> Axure演示:[demo](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/Blueprint/start.html#g=1&p=index)
> 说明:产品原型通过蓝图快速设计工具设计,可把草图很快展示给客户。
>
> Html5演示: [demo1](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/BlueLayout/BlueLayout-1.html) [demo2](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/BlueLayout/BlueLayout-2.html) [demo3](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/BlueLayout/BlueLayout-3.html) [demo4](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/BlueLayout/ImgLayout.html)
> 说明:根据上述的难度,利用Bootstrap的Grid网格布局大致模仿一个现成的网站布局。
> 

> 案例5:
>
> 演示[demo](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/Layout/Index.html)
> 说明:在上述的布局代码中填充相关内容模仿一个现成的网站首页布局。用时45分钟。
> 

> 案例6:
>
> Hmtl5实战演示[demo](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/BootstrapSite-A/Home.html)
> 说明:主要采用Bootstrap、FontAwesome、WebFont相关技术,20分钟搞定3个简单布局页面。采用程序员终极大法：“复制粘贴”，复制其中的关键代码，快速完成。
> 

> 案例7:
>
> Html5实战演示[demo](http://exesoft.gitee.io/webshow/HtmlGitDemo/CaseDemo/SpringAni/Index.html)
> 说明:精灵图片一般不需要切割，但需要对于每个序列单元的位置需要坐标定位，spring.png里面有64个序列单元，从第三行采集了16个序列单元作为测试单元。