展开菜单

css中引入指定字体@font-face兼容各浏览器

网页制作中,如果想使用特定的字体可以通过@font-face引用,即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。 注意: 支持@font-face的浏览器有Internet Explorer 9、Firefox Opera、Chrome和Safari,另外IE9只支持.eot类型的字体,Firefox、Chrome、Safari、和Opera支持.ttf、.otf 两种类型字体。 常规用法: @font-face { font-family: 'myFirstFont';//定义该字体名称,后面要使用该字体时,使用该名称...

CSS修改表单输入框placeholder属性文字颜色

placeholer是HTML5新增属性,规定可描述输入字段预期值的简短的提示信息,IE10+、Firefox、Opera、Chrome 和 Safari 浏览器支持该属性。 针对不同浏览器修改placeholder属性样式的代码如下 input::-webkit-input-placeholder{ color:#f00; opacity:1; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#f00; opacity:1; } input:-moz-placeholde...

利用css属性padding或margin的百分比值实现元素的高度自适应

利用css属性padding或margin的百分比值实现元素的高度自适应

外边距属性margin和内边距属性padding取百分比值的时候,无论是left、right或top、bottom,都是以其父元素的宽值(width)作为参照物(即分母top/width),这是W3C的规范,官方原文如下: Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margi...

chrome浏览器jquery点击事件click元素出现黄色边框的解决方法

chrome浏览器jquery点击事件click元素出现黄色边框的解决方法

chrome浏览器下,使用jquery click()点击事件,被点击的元素会出现黄色边框: 解决方法: 给被点击的元素添加:focus的css代码:(如被点击的元素是element,代码如下 element:focus { outline:none; } 或 element:focus { outline:0; }

CSS实现元素垂直居中的几种方法

网页前端经常需要把元素垂直居中,下面总结几种方法。 1、不知道元素高度,利用定位和CSS属性transform实现元素垂直居中: 代码一: parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); } 代码二: parentElement{ height:xxx; } .childElement { position: relative; ...

解决使用overflow:scroll;样式在苹果ios上滚动卡顿

给元素使用overflow:scroll;后在苹果手机浏览器上滚动时会卡顿,解决方法是: 在overflow:scroll;滚动的容器中增加样式: -webkit-overflow-scrolling: touch; 或者给body增加: body {overflow-x: hidden} 如果body和html使用了height: 100%;就把height: 100%;去除掉。 另外: 在苹果手机上使用了-webkit-overflow-scrolling:touch;后,可能会导致使用position:fixed;固定定位的元素,随着页面...

前端移动端适配方案之rem之小白解惑

前端移动端适配方案之rem之小白解惑

移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端,熟悉移动端和pc端的区别和特点,才能真正理解做适配的精髓,这里就简单介绍下; 网上找不到主流android设备的数据表,就以iphone为例: 以iphone6为例: 竖屏宽为375,叫做逻辑像素(有的地方叫独立像素); 竖屏宽的像素750,叫做物理像素,是设备实际的光点个数,要知道屏幕都是由一个一个光点组成的; 像素比(Asset)2x,就是2倍,物理像素/逻辑像素; ppi:像素密度326,实际平方英寸的光点个...

通过css修改select下拉列表框的默认样式

实现原理很简单,就是通过把浏览器默认的下拉框样式清除,自定义select样式,再把默认的下拉按钮替换为张向右对齐的小箭头图标即可,具体代码如下。 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("ht...

在移动端设置overflow:hidden为什么页面还能滚?禁止方法

在移动端设置overflow:hidden为什么页面还能滚?禁止方法

如果把 overflow:hidden 用在 body 标签,移动端浏览器依然能滚动,因为移动端是基于touch事件,解决方法有两个。 方法一: 将要隐藏滚动的内容加上一个包裹层div,然后给这个div设置高度为window.height(),并且 overflow:hidden 就可以解决你的问题。 方法二: 给 body 添加 position:fixed; 示例: body { overflow:hidden; position:fixed; left:0; top:0; }

css取消Safari浏览器链接点击颜色变灰-webkit-tap-highlight-color

给可点击的元素添加代码: -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 该属性的作用是:当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。 该属性可以只设置透明度,如果未设置透明度,iOS Safari使用默认的透明度;当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。 ...

解决苹果ios设备 safari浏览器中按钮圆角问题

解决苹果ios设备 safari浏览器中按钮圆角问题

ios safari浏览器中,type="button"、type="submit"按钮会显示为圆角样式,要去掉圆角样式,通过给对应的CSS添加 -webkit-appearance:none; 就能解决。 示例: HTML代码: <input type ="button" class ="btn" /> CSS代码: input .btn { display : inline-block ; height : 30px ; line-height : 30px ; bord...