xtyle框架充分利用语义化标签来做美化样式，兼容多款主流浏览器，包括IE8。

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

框架下载地址：xtyle

栅格系统（Layout）

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

布局简单用法

一栏布局

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

<div class="grid3">列1</div>

三栏布局

<div class="grid3">栏1</div>

<div class="grid3">栏2</div>

<div class="grid3">栏3</div>

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

xtyle框架的一些元素样式

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

基本排版样式

字体样式

标题样式

段落样式

颜色

提示样式

表单样式

单选按钮

多种按钮样式

传送门：xtyle | xtyle github

充分利用HTML标签元素 – 简单的xtyle前端框架的更多相关文章

  1. JavaScript 实现一个简单的MVVM前端框架(ES6语法)

    前言 随着前端各大框架的崛起,为我们平时的开发带来了相当的便利,我们不能一直停留在应用层面,今天就自己动手实现一个乞丐版的MVVM小框架 完整代码github地址 效果 html代码 <div ...

  2. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

  3. HTML5 <template>标签元素简介

    一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...

  4. Html页面head标签元素的意义和应用场景

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

  5. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...

  6. 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  7. 简单的jQuery前端验证码校验

    简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <m ...

  8. Day2 HTML基本标签元素

    Day2   HTML基本标签元素 HTML:  超文本标记语言(HyperText   Mark-up  Language ) 1.作用:写网页结构  2.HTML不区分大小写,建议小写   3.文 ...

  9. Html学习总结（2）——Html页面head标签元素的意义和应用场景

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

随机推荐

  1. 微信iOS WKWebview 网页开发适配指南

    微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配. 背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的 ...

  2. SHDP--Working with HBase(三)之HBase+Phoenix实现分页

    先简单讲讲只用HBase来实现分页的思路: HBase利用scan来扫描表,通过startKey,stopKey来确定扫描范围,在需要进行分页时可以结合HBase提供的PagefFilter过滤扫描的 ...

  3. Java 线程第三版 第八章 Thread与Collection Class 读书笔记

        JDK1.2引入最有争议性的改变是将集合类默觉得不是Thread安全性的. 一.Collection Class的概述 1. 具有Threadsafe 的Collection Class: j ...

  4. C++中的初始化列表中可以对那些变量或对象进行初始化

    构造函数与其函数体之间可以添加初始化列表,能对某些对象进行初始化.格式为 类名() : 变量1(参数1),变量2(参数2) { } 1.     父类的对象的构造必须在初始化列表中,如: 子类名(): ...

  5. UVa 836 - Largest Submatrix

    题目:给你一个n*n的01矩阵,求里面最大的1组成的矩形的米娜及. 分析:dp.单调队列.UVa 1330同题,仅仅是输入格式变了. 我们将问题分解成最大矩形.即求解以k行为底边的图形中的最大矩形.然 ...

  6. 【set&&sstream||floyed判环算法】【UVa 11549】Calculator Conundrum

    CALCULATOR CONUNDRUM Alice got a hold of an old calculator that can display n digits. She was bored ...

  7. 用户 'IIS APPPOOL\DefaultAppPool'登录失败

    今天发布网站遇到这个问题.问题直接说明iis  应用程序池. 后来百度发现是应用程序池  进程模型中的标识项设置问题,这个我用的是本地数据库所以是localsystem.在此小弟谢谢这位 http:/ ...

  8. nodejs 计算内存使用率

    //计算内存使用率 function calcMem(){ let mem_total = os.totalmem(), mem_free = os.freemem(), mem_used = mem ...

  9. UVA 12125 March of the Penguins

    题意: 给定一些冰块,每个冰块上有一些企鹅,每个冰块有一个可以跳出的次数限制,每个冰块位于一个坐标,现在每个企鹅跳跃力为d,问所有企鹅能否跳到一点上,如果可以输出所有落脚冰块,如果没有方案就打印-1 ...

  10. 高效批量更新 sql 字段的值（从一个表向另一个表更新）

    里给出一种更高效.简洁的做法,批量更新SQL ,一句SQL就可以替代麻烦的循环过程,有MS SQLServer.Oracle.DB2下的写法--关键点:t4和t1是同一个table,primary k ...