- 博客(27)
- 收藏
- 关注
RSS订阅原创 js-自定义属性
1、四个按钮 点击每个按钮 会依次变成A,B,C,D 反复循环`<button>0</button><button>0</button><button>0</button><button>0</button><script type="text/javascript">var btns=document.getElementsByTagName('button');var arr=
2017-03-05 23:50:49
428
转载 媒体查询--PX,EM or REM?
你是否思考过对于媒体查询你应该使用px,em还是rem？我也产生过同样的问题，并且目前为止，我还是没有明确的答案。一年之前，我第一次创建 mappy-breakpoint 仓库时，我一直使用rem单位。之后一次和Sam Richard谈话之后，我开始转向使用em,因为我并没有发现两者之间的区别。关于媒体查询，除了em和rem,常用单位还有像素。自从现在所有浏览器存在像素缩放问题，我想知
2017-02-16 11:24:22
1207
转载 Sublime Text 3 快捷键总结（拿走）
选择类Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时
2017-02-14 14:49:54
584
转载 折腾响应式布局设计
原文链接：http://caibaojian.com/356.html响应式布局概念Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。经过不停地学习和实践，如今总结响应式设计的方法和注意点。其实很简单。响应式设计的步骤1. 设置 Meta 标签大多数移动浏览器将html
2017-02-08 15:31:05
797
转载 巧用css3的calc（）属性进行响应式布局
今天浏览这个http://www.sitepoint.com站时，因为好奇看了下人家写的代码，结果发现了这行代码，于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-si
2017-02-08 15:13:57
3486
转载 前端开发必备！Emmet使用手册
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然
2017-02-08 10:22:19
3843
1
转载 html5大纲算法对结构的重要性
前言：很偶然看到了这篇文章 受益匪浅。转载HTML5已经出来好长时间了，越来越多人希望并且开始把HTML5应用到平时的工作、个站中。大家对section、article、aside、nav等新标签的使用也越来越上手，也许是自我感觉良好的上手。不从多个方面去认识理解这些标签，可能反而让自己落入了更混乱的境地。HTML的大纲算法(outlining algorithm)就是一个很重要的切入点
2017-02-04 11:47:22
1046
原创 css面试知识点总结
1.css选择器的优先级别id选择器 #myid类选择器 .classname标签名 div,p,ul,li相邻选择器 div+p子选择器 ul>li后代选择器 ul li通配符选择器 *属性选择器 a[input='placehouder']伪类选择器 a:hover2.display
2017-01-23 17:00:30
301
转载 Bootstrap input元素组使用方法
input元素组基本样式最基本的input元素组样式就是在input元素的左右加入图标或者单位，从而达到一些对应的功能效果。让我们看看应该如何实现这个效果： ￥ <input type="text" class="form-control"> .00以上代码的效果是，在input元素前放入一个元素，从而说明该input是作为人民币的输入框，后面的.00用来说明该金额应该是
2017-01-16 17:45:13
3479
转载 Bootstrap导航栏样式使用
Bootstrap导航栏默认样式导航栏默认样式是灰色的，它的结构应该由nav标签来包裹，包含logo、页面列表等元素，简单的编码内容如下：<nav class="navbar navbar-default"> 佚站互联 杭州网站建设 杭州网站设计 杭州网站制作 以上代码的内容就是最基础的一个Bootstrap导航栏样式，按照这个结构你也
2017-01-16 17:30:54
5991
转载 Bootstrap内容分类使用方法（tab）
Bootstrap内容分类tab样式说到内容分类，或许tab形式是我们最常用的分类方式了，在一个区域中通过tab对标题进行标注，然后对应的tab对应不同的内容，Bootstrap中同样引入了nav的tab样式，让我们看看如何使用：<ul class="nav nav-tabs"> 杭州网站建设 杭州网站设计 杭州网站制作我们通过nav nav-tabs的样式引入到ul标签
2017-01-16 16:02:16
2297
转载 Bootstrap缩略图样式使用方法
默认Bootstrap缩略图样式因为缩略图可能要牵涉到链接，所以需要在图片外面加入一个a标签，缩略图样式直接写入这个a标签即可，使用起来非常方便：<a href="#" class="thumbnail"> 通过对a标签引入thumbnail样式，就可以实现Bootstrap缩略图的样式，而且hover还有对应的交互效果，非常不错，另外，为了符合SEO搜索引擎优化原则，你需要在img
2017-01-16 15:47:36
7369
转载 Bootstrap面板使用方法
Bootstrap面板基本样式直接调用面板样式也非常容易，只需要通过以下代码即可实现： Basic panel example 该样式仅仅包含了面板样式的内容部分，而没有加入头部，适用于不需要头部的面板内容。Bootstrap面板带标题样式上面提到的面板样式是没有带标题的，在一些情况下不够用，所以Bootstrap面板还提供了带有标题
2017-01-16 15:42:55
2024
转载 Bootstrap警告框使用方法
Bootstrap警告框类别根据为用户提示的内容类型，警告框可以分为成功、信息、警示、以及危险等四种。而颜色也用对应的绿色、蓝色、黄色、红色来设定，从而与其他页面内容进行区分，起到突出的效果。Bootstrap警告框使用方式与其他Bootstrap元素样式的使用方式一样，只需要在对应的元素中引入相关样式即可，代码如下：<div class="alert aler
2017-01-16 15:23:51
5738
转载 Bootstrap分页使用方法
默认Bootstrap分页样式这是默认的Bootstrap分页组件样式，效果简洁直观，如果想要符合自己的项目需求，可以将高亮颜色改为自己想要的颜色，其他样式直接引用即可，编写代码如下：<ul class="pagination"> « 1 2 3 4 5 »当前页面选项高亮与禁用状态通过引入disabled样式与ac
2017-01-16 15:22:53
5366
转载 Bootstrap导航栏样式使用
Bootstrap导航栏默认样式导航栏默认样式是灰色的，它的结构应该由nav标签来包裹，包含logo、页面列表等元素，简单的编码内容如下：<nav class="navbar navbar-default"> 佚站互联 杭州网站建设 杭州网站设计 杭州网站制作 以上代码的内容就是最基础的一个Bootstrap导航栏样式，按照这个结构你也
2017-01-16 15:20:44
3512
转载 Bootstrap下拉菜单使用方法
如何使用Bootstrap下拉菜单组件Bootstrap下拉菜单组件使用起来非常容易，首先你需要定义一个class="dropdown"的div，然后在这个div标签中写入触发下拉框的按钮以及对应的下拉菜单，类似代码如下：<div class="dropdown"> 下拉按钮<a role="menuitem" tabindex="-1" href="#">下拉菜单1<a
2017-01-16 14:52:33
5614
转载 Bootstrap图标引用方法
Bootstrap图标集，Glyphicons图标Bootstrap的图标组件并非自己制作的，而是由国外一个图标团队提供的，虽然它们自身是收费图标，不过他们授权Bootstrap可以免费使用它们的200个图标。Glyphicons组件使用起来相当方便快捷，你可以参考Bootstrap图标引用样式，使用方法也相当简单，类似以下代码即可：<span class="glyphicon g
2017-01-16 14:44:59
5149
转载 常用Bootstrap工具类（各种按钮/清除浮动/居中对齐）
关闭按钮Bootstrap工具类如果你在自己的项目中引入了alert模块或者modal模块，那么你就会需要用到这个关闭按钮工具类，这个类可以让你方便地关闭这两种模块，具体代码如下：<button type="button" class="close" aria-hidden="true">×下拉按钮Bootstrap工具类如果你要用到二级菜单、下拉框或者
2017-01-16 14:34:21
14874
转载 Bootstrap图片样式使用方法
在Bootstrap中自带了几种图片样式，能够让你很快地对其进行使用，这几种样式使用起来相当简单，让我们一起来看看怎么快速调用Bootstrap图片样式。 Bootstrap图片圆角样式在现今的网站建设中，由于扁平化设计的趋势，我们经常会用用到一些CSS3的特性，例如圆角、渐变、阴影等。同样我们也可以用Bootstrap迅速对图片进行圆角设置，代码如下：<img src
2017-01-16 14:30:17
4377
转载 Bootstrap按钮元素使用方法
Bootstrap按钮元素样式Bootstrap中，总共提供了六种按钮样式，分别是默认、主要、成功、信息、警告以及危险这几个样式，它们对应的类分别是btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger。对应的颜色分别是白色、深蓝、绿色、浅蓝、橙色以及红色。这几种颜色基本上满足大部分使用需求，当然，如果
2017-01-16 14:27:23
2235
转载 Bootstrap表格样式使用方法
基本Bootstrap表格样式Bootstrap最基本的表格样式就是在标签中加入table类，然后在标签内嵌套thead和tbody元素即可。例如：表头表格内容按照这种形式构建的表格是最为基础的。间隔型Bootstrap表格样式这种表格样式是采用不同的tr背景来进行区分，如果想要使用这个样式，需要在table中再加入table-striped类，例如：<table
2017-01-16 14:26:31
3622
1
转载 Bootstrap栅格系统使用方法
如果你以前使用过Bootstrap2或者了解过响应式技术，那么肯定对Bootstrap栅格系统并不陌生，由于栅格系统的引入，使得Bootstrap的跨设备布局显示变得可能。 什么是栅格系统栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽。例如你这一行想要
2017-01-16 14:25:12
6640
转载 Bootstrap基本框架搭建
构建基础HTML文档结构在进行引入与开发之前，你需要构建自己的HTML文档基础结构，结构规则我们按照最新的HTML5规则来编写，让我们看看应该如何编写。<!DOCTYPE html> 引入自适应标签由于Bootstrap3是以移动优先为主要准则，所以为了实现响应式布局的效果，我们需要在head标签中引入对应的meta标签：通过这个标签，我们能够保证页面在
2017-01-16 14:23:30
4461
转载 Bootstrap浏览器兼容性
说到浏览器兼容性，就不得不提国内的浏览器占有率现状，这也使得国内的前端工程师总是需要针对各式各样的浏览器做CSS Hack，倘若你想要通过使用Bootstrap来避免这些额外的编码，那你就错了。自从推出了Bootstrap3以后，整个框架对于低级浏览器的兼容性更是不忍直视，所以如果你的项目牵涉到IE8、IE7，甚至是IE6，那么就可以好好考虑是否还要执着于Bootstrap3了（当然，
2017-01-16 14:22:54
20851
1
转载 Bootstrap禁用响应式布局
在Bootstrap中极其重要的一个技术内容便是响应式布局了，一次编码针对不同设备终端的强大能力使得响应式技术愈发流行。不过正所谓“萝卜青菜各有所爱”，如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局（或者你所设计的页面布局不允许你使用响应式技术），那么你可以通过以下方式禁用响应式布局。移除标签禁用第一步，就是需要移除在head标签中添加的
2017-01-16 14:22:09
5398
转载 引入Bootstrap方法
如果你是一名web前端开发工程师或者网页设计师，那么肯定对Bootstrap这个框架早有耳闻，甚至一些web后端工程师也会常常借助Bootstrap的力量来构筑自己心目中理想的web应用。而在去年年底推出的Bootstrap3更是追随了响应式布局、扁平化设计的web开发与设计潮流，让我们感受到了它所带来的无穷魅力。我们会通过接下来一系列的Bootstrap教程，让Bootstrap初学者们
2017-01-16 14:17:41
18414
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人