充分利用HTML标签元素 – 简单的xtyle前端框架

Sponsor

目前很多设计师、前端人员都喜欢使用Bootstrap这个前端框架用来搭建网站,确实是很强大,但是体积有点大了。所以除了Bootstrap外,还有其它选择的,这次设计达人网分享一个简单前端框架 – xtyle,xtyle框架充分利用语义化标签来做美化样式,兼容多款主流浏览器,包括IE8。

xtyle框架虽然没BS这么强大,但我觉得也很实用,体积不算很大,适用于企业网站、WordPress主题、个人网站、博客等方面的应用,当然手机端也是适用哦!

框架下载地址:xtyle

栅格系统(Layout)

栅格系统我想很多人是比较关注的,这个xtyle的栅格系统很简单,也很实用和易用,栅格Class由.gird1–.grid10来控制。

布局简单用法

一栏布局

直接使用class="gird1"即可。

列1

三栏布局

栏1
栏2
栏3

所以如果你要2栏,每栏的class就用grid2,如此类推,使用很简单吧?

xtyle框架的一些元素样式

xtyle框架的样式我觉得很实用以及很齐全,语义化清晰,下面来自xtyle的一样截图。

基本排版样式

字体样式

标题样式

段落样式

颜色

提示样式

表单样式

单选按钮

多种按钮样式

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。

版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

XartDESIGN -

2014 年 03 月 04 日 上午 3:10

方便啊小巧

诸葛小觉 -

2013 年 11 月 22 日 上午 10:38

功能虽然简单,但是适合简单的人,嘿嘿~

小蜜蜂 -

2013 年 11 月 20 日 下午 10:52

学习学习~

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站

有些框架自动重写html标签,充分利用HTML标签元素 – 简单的xtyle前端框架相关推荐

  1. 三、如何手动实现一个微前端框架雏形

    如何手动实现一个微前端框架雏形 一.了解微前端 1. 什么是微前端 为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制,将整体前端服务拆分成一些更小.更简单的,能够独立开发.测试部署的小块儿. ...

  2. 如何选择合适的前端框架,告别选择恐惧症

    将 package.json 中的 Ionic 版本改为 2.0.0 的时候,我就思考一个问题.这个该死的问题是--我到底要用哪个框架继续工作下去. 刚开始学习前端的时候,SPA(单页面应用)还没有现 ...

  3. 参考框架 系统 基准_带有基准的前端框架的真实比较(2018更新)

    参考框架 系统 基准 by Jacek Schae 由Jacek Schae 带有基准的前端框架的真实比较(2018更新) (A Real-World Comparison of Front-End ...

  4. 参考框架 系统 基准_带有基准的前端框架的实际比较

    参考框架 系统 基准 by Jacek Schae 由Jacek Schae 带有基准的前端框架的实际比较 (A Real-World Comparison of Front-End Framewor ...

  5. Web 组件即将取代前端框架?!| 技术头条

    [CSDN 编者按]提起前端开发,不少开发者首先会对主流技术框架如 Vue.React.Angular 进行一番对比之后,选择相应的技术架构. 在此,随着前端框架的不断升级,其也变得越来越臃肿与复杂, ...

  6. 前端框架vue3的node安装及项目构建的4种方法

    前端框架vue3的node安装及项目构建的4种方法 C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>cnpm install ...

  7. html标签之列表标签,前端开发资料分享

    前言 年前准备换工作,总结了一波面试最频繁的面试问题跟大家交流.此文章是关于浏览器的常见问题,大概面试10家遇到6家提问类似问题(主要是大厂和中厂).目前入职滴滴出行成都团队. 一.如何入门,学习建议 ...

  8. 简单的android游戏框架——zgf

    一.zgf是什么 我花了一周时间整理了以前写的代码,发现很多代码可以重用,于是就做了一个简单的android游戏开发框架,名字叫zxx43 game framework,简称zgf,这个游戏框架使用起 ...

  9. 跨屏html ui,Amaze UI(HTML5 跨屏前端框架) v2.7.2

    Amaze UI 2.7.2 更新日志:2016-08-17 JS: Improved #900 处理Modal元素停止冒泡引发的使用不变问题: Improved #901 调整Tabs样式,适应元素 ...

最新文章

  1. 笔记2011.7.12
  2. Mac 下安装 ruby 环境解决 brew 安装 yarn 问题
  3. 异步编程 In .NET(转载)
  4. android log丢失(二)使用and4.4log kernel机制
  5. 前端调试、兼容、适配指南与工具分享
  6. 125条常见的java面试笔试题大汇总1
  7. DXUT实战3:HLSL(withEffect)+D3D9+DXUT(june_2010) . .
  8. jboss mysql_jboss7.1.1配置mysql数据源
  9. 读python源码--对象模型
  10. 八卦图代码matlab,12行javascript代码绘制一个八卦图_javascript技巧
  11. 未能连接驱动人生服务器怎么解决,网卡驱动异常连不上网怎么办 驱动人生帮助你解决这个问题 - 驱动管家...
  12. 系统服务器属于无形资产,企业管理系统是否属于无形资产?
  13. 2014年11月合肥黄山宏村之旅
  14. 微信分享之分享图片/分享图标不能显示
  15. IDEA基本使用(三):模板
  16. USB | USB设备状态
  17. 火箭还是飞机?——DevOps 的两种模式
  18. 被拒绝100天 Rejection Therapy 100 Days
  19. 谷歌内战:高管要利润,员工要价值观,谁来定义谷歌?
  20. R语言使用glm函数构建泊松对数线性回归模型处理三维列联表数据构建饱和模型、使用summary函数获取模型汇总统计信息

热门文章

  1. vue element-ui 中走马灯自适应图片高度
  2. 二叉树中的结点数目确定时,高度最小的一定是完全二叉树?
  3. python 列表操作模块_Python:使用模块laspy的列表理解问题
  4. java job定时任务_java实现job功能,定时开启任务
  5. SAP MB51选择界面配置
  6. 找不到和chrome浏览器版本不同的chromedriver的解决方法
  7. 【学习机器学习】实验——聚类算法性能度量
  8. IDEA中单元测试@Test使用
  9. canon老的一体机在win10上无法直接安装成功
  10. 懂得拥有也要学会放弃