前端快速开发

一、介绍

适用于全栈

BootStrap

适用于后台管理

jQueryUI

EasyUI

二、学习BootStrap规则

1.响应式 @media

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             background-color: red;
 9             height: 50px;
10         }
11         @media (min-width: 900px) {
12             .c2{
13                 background-color: gray;
14             }
15         }
16     </style>
17 </head>
18 <body>
19     <div class="c1 c2"></div>
20 </body>
21 </html>

2.图标、字体 @font-face

3.基本使用 样式有优先级强制生效方式

 .no-radus{ background-radius: 0 !inportant; } 

三、轮播图 bxslider插件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css" />
 7 </head>
 8 <body>
 9     <ul class="bxslider">
10         <li><img src="images/1.jpg" /></li>
11           <li><img src="images/2.jpg" /></li>
12           <li><img src="images/3.jpg" /></li>
13           <li><img src="images/4.jpg" /></li>
14     </ul>
15     <script src="jquery-1.12.4.js"></script>
16     <script src="jquery.bxslider/jquery.bxslider.js"></script>
17     <script>
18         $(document).ready(function(){
19             $(‘.bxslider‘).bxSlider();
20         });
21     </script>
22 </body>
23 </html>
时间: 2024-10-13 05:23:53

前端快速开发的相关文章

前端快速开发模版

原文地址:前端快速开发模版 之前一直在开发移动端的单页面应用,而移动web对性能和效果要求是比较苛刻的,所以用的都是轻量级的框架体系.基本上是Zepto加自己开发的单页面框架,再加上若干简单的库.这样前端要加载的文件很小,修改起来也非常方便,同时这样的轻量级的体系使用gulp进行自动化管理也是非常合适的. 自从开发react项目后,对它的工程化和开发模式也是开了眼界,标准的框架体系就是重量级的react+redux+webpack.开发大型项目和后台管理系统用react,vue确实是不错的.但是

Bootstrap是快速开发Web应用程序的前端工具包 CSS和HTML的集合

版本主要新特性包括: Responsive embeds New responsive utility classes Copy docs snippets LMVTFY Browser bugs 其他更多: 提交有超过1000条,同时也很多改变的更加完美,下面几个值得注意的变化: The docs have been rearranged and updated to be more specific and easier to develop. The progress bar compon

如何快速开发一个漂亮的网站?包括前端的设计,css布局等

如何快速开发一个漂亮的网站?包括前端的设计,css布局等 网站开发看起来简单,但是做起来很乱,对于个人来说尤其如此.比如,需要ps,css,html,js,java等知识,有什么好的办法,可以快速的开发一个网站的前端? 如今有很多快速开发平台:图形化可视化操作,所见即所得:通过拖拉即可完成表单.流程.报表页面的设计:用户通过编写JS文件,调用封装的单据的保存.查询.删除等方法,即可完成页面的功能设计: 平台工具设计的所有的页面发布后,将生成HTML格式的源码文件,WEB系统采用HTML伪静态技术

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之

Sublime插件库新成员基于APICloud快速开发跨平台App

互联网时代强调用户体验,那什么是HTML5跨平台App开发者的编程体验?"不剥夺.不替换开发者喜欢的开发工具,就是人性化的用户体验",APICloud给出了这样的答案! 重磅发布"多开发工具支持策略" "如果,你以为此次分享会APICloud只是讲解Eclipse开源插件代码经验,那就大错特错了!"APICloud CEO刘鑫以调侃的话进行了开场. 经过一年的上线摸索,APICloud团队充分的认识到"剥夺开发者已经习惯的开发工具,替换

HFun.快速开发平台(二)=》自定义列表实例

应用系统中数据列表的展现是开发内容之一,实现的方式基本是通过编号具体的访问列表页实现,通过检索条件进行数据源的获取,列字段的描述,还可能会有检索条件的实现,列表数据的导出等功能. 为了将重复工作进行简化,同时为了实现多个开发人员编写同样风格的程序,降低应用系统的后期运维成本,HFun.开发平台中将列表的实现进行抽象,实现统一的列表对象,通过统一的访问页面,传递相应的参数,系统进行数据源的处理及展现.程序的实现结构如下: 程序根据功能分为文件夹Controls,Data,ExportExcel,F

前端模块化开发的价值

本文发表在<程序员>杂志 2013 年 3 月刊,推荐购买. 前端模块化开发的价值 随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做项目时,常常会将一些通用的.底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码 } 并像模像样地把这些函

web程序快速开发

关于web程序快速开发个人见解以及经历 由于在之前公司业务的发展,需要在基于核心业务的基础上开发其他较为独立的业务系统,所以就有了这个基于Dapper,DDD概念的基础框架,由于个人基于这个框架已经经历过两个系统的开发,也因为其他项目团队需要基于这个框架进行其他系统的一些开发,所以需要对此框架有一些简单介绍和使用说明. 1.主要框架主体介绍 Dapper,DapperExtensions:Dapper框架集成. Topever.AutoMapper:对象映射扩展,这个项目其实可以集成到公共项目T

关于web程序快速开发个人见解以及经历

由于在之前公司业务的发展,需要在基于核心业务的基础上开发其他较为独立的业务系统,所以就有了这个基于Dapper,DDD概念的基础框架,由于个人基于这个框架已经经历过两个系统的开发,也因为其他项目团队需要基于这个框架进行其他系统的一些开发,所以需要对此框架有一些简单介绍和使用说明. 1.主要框架主体介绍 Dapper,DapperExtensions:Dapper框架集成. Topever.AutoMapper:对象映射扩展,这个项目其实可以集成到公共项目Topevery.Infrastructu