随笔分类 - HTML/CSS
摘要：@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。 语法规则 首先我们一起来看看@font-face的语法规则： font-family: <YourWebFontName> ：自定义字库名称（一般设置为所引入的字库名），后续样式规则中则通过该名称来引用该字
阅读全文
摘要：引言 奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。 网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。下面的小图标，你也可能经常会看到的，如图所示： 你可能说——“我们用的都是彩色的，不是黑白的”
阅读全文
摘要：如何实现背景透明，文字不透明，兼容所有浏览器？ 我们平时调整的不透明度如图所示： 实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法： css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8 css3的rgba(red, green, blue, al
阅读全文
摘要：各大网站的字体选择 网站字体 腾讯 font: 12px "宋体","Arial Narrow",HELVETICA; 淘宝 font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif; 蘑菇街 font: 12px/1.
阅读全文
摘要：前言 记得做PC端页面的时候，字体一般设置为微软雅黑，现在做起移动端页面来了，设计师们一般都还把字体设置为微软雅黑字体，但是做出来后，测试的时候发现页面中的字体不是微软雅黑，怎么办？ 后来了解到的手机系统 ios、android 等是不支持微软雅黑字体。为了满足产品的需要，保证视觉稿的还原度，手机端
阅读全文
摘要：所谓Medial Queries就是媒体查询。 随着Responsive设计的流行，Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择，让站点在不同的设备中实现不同的效果。 众所周知，有些时候为了实现IE下的某些效果与现代浏览器一致，我们不得不使用一些
阅读全文
摘要：前言 在最近的项目中用到了html5的本地存储，下面总结一下。 1、html5几种存储形式 本地存储（localStorage && sessionStorage） 离线缓存（application cache） indexedDB 和 webSQL 2、localStorage && sessio
阅读全文
摘要：Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。 Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPo
阅读全文
摘要：常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸。一般来说，这些单位被分成两大类：绝对单位(absolute)和相对单位(relative)。 绝对单位在大多数情况下是相对于某些实际量度而言的固定值，即是说它们一旦设定，就不会因为其他元素的字体尺寸变化而变化。 相对单位没有一个固定的度量值，
阅读全文
摘要：CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在规范中支持的效
阅读全文
摘要：什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最
阅读全文
摘要：现在随着html5的渐热，越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。 html代码： js代码：
阅读全文
摘要：随着互联网的飞速发展以及HTML5的应用，越来越多的项目中用到video，audio当常用标签。 audio 标签属性 当然audio元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式： 再如下面： video标签属性 下面先介绍下video标
阅读全文
摘要：在做网页的时候，常常需要实现圆角，以前的做法就是切图，现在好了，有了css3的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。 border
阅读全文
摘要：最近做一个移动端微信页面项目，在微信页面中有视频播放，但是需要禁止IOS的自动全屏播放（前提必须使用video标签）。如： <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> <
阅读全文
摘要：在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。而通过DeviceMotion对设备运动状态的判断，则可以帮
阅读全文
摘要：CSS 下拉选择菜单基本的CSS样式不怎么好看，通过一些简单的样式优化，可以得到如下图这样的： html结构如下： <div class="sel_wrap"> <label>请选择您所在的城市</label> <select class="select" name="" id="c_city">
阅读全文
摘要：columns语法：columns：[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中：[ column-width ]：设置或检索对象每列的宽度；[ column-count ]：设置或检索对象的列数。 css代码： html代码： 结果
阅读全文
摘要：早上在博客中有人提了这样一个问题：“li元素inline-block横向排列，出现了未知间隙”，我相信大家在写页面的时候都遇到过这样的情况吧。 我一般遇到这情况都会把li浮动起来，这样就没有间隙。但是解决这个未知间隙，还是有很多办法的，在w3cplus上提供了好几种解决办法。在这总结一下。 先看结构
阅读全文
摘要：语法： 其中number取值：使用浮点数指定对象所分配其父元素剩余空间的比例。设置或检索伸缩盒对象的子元素如何分配其剩余空间。(伸缩盒最老版本) html代码： css代码： 得到的结果如图所示: 注：其实上面的css代码中-ms-box-flex与box-flex可以省略，为什么这么说呢，IE6-
阅读全文
浙公网安备 33010602011771号