CSS处理的细节

人性化的处理:

  textarea 默认只能垂直拖动,防止宽度改变破坏布局。

textarea {

  resize: vertical;

 }

  汉字字号小于12px不易阅读,为<small>元素设置默认值为12px。

small {

  font-size: 85.7%;

}

  label元素默认光标设为 [手型],意示此处可点击。

label {

  cursor:pointer;

}

考虑移动设备:

  通常iPhone 横屏时默认会放大文字,如果页面已经做了响应式,就可能会破坏布局:

html {

  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;

  text-size-adjust: 100%;

}

考虑响应式:

  IE6以上浏览器,图片默认支持缩放。

img {

  border: 0 none; //去除IE6-9 和Firefox 3中a内部img元素默认的边框

  width: auto\9; //修正IE8图片小时BUG

  height: auto; //防止img 指定height时图片高度不能按照宽度等比缩放,导致图片变形

  max-width: 100%; //让图片支持响应

  vertical-align: top; //去除现代浏览器图片底部的空隙

  -ms-interpolation-mode: bicubic; //修复IE7图片缩放失真

}

跨平台最佳font-family:

  body,button,input,select,textarea {

    font-family: ‘helvetica neue‘, arial,‘hiragino sans gb‘,stheiti,‘wenquanyi micro hei‘, \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;

  }

  code,kbd,pre,samp {

    font-family: monaco, menlo, consolas, ‘courier new‘,  courier, monospace;

  }

解决表单渲染问题:

  由于表单元素是由系统渲染的控件,其UI表现具有特殊性。为了尽可能减少不同平台间的差异

  input[type="search"]::-webkit-search-cancel-button; //隐藏清除按钮

  input[type="search"]::-webkit-search-decoration{ -webkit-appearance: none; } //移除 OS X中的Safari5 和 Chrome 搜索框内侧的左边距

时间: 2024-10-07 10:53:58

CSS处理的细节的相关文章

深入理解css网页布局细节

在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. 一. float属性深入理解 首先简单布局一下,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css Test</title> <sty

Query+css+div--一些细节详解

(一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧!但是恰恰不巧的是jQuery自带的alert()弹出提示框就会影响这一美观: 在不同的浏览器中,alert()方法,弹出的样式真的很难看:所以为了解决这一方法,我门可以自定义自己的alert(),让我们来看看这些代码吧! function myalert(str){ var msgw,msgh,bo

css 的小细节,小总结

CSS的一些零碎总结 1.CSS 伪元素用于向某些选择器设置特殊效果(用来当作一个东西的,跟一个元素差不多,但不是元素). ① :frist-line伪元素:用于向文本首行设置特殊样式,但是只能用于块级元素. 以下属性可应用于 " frist-line " 伪元素:         font.color.background.word-spacing.letter-spacing.text-decoration.vertical-align.text-transform.line-he

css的一些细节

1.id选择器拥有最高的权重,可以覆盖之前的一些定义,比如 1 <html> 2 <head> 3 <style type="text/css"> 4 #color { 5 color: red; 6 } 7 p { 8 color: blue; 9 } 10 </style> 11 </head> 12 <body> 13 <p id="color">test</p>

CSS与JS细节属性整理

这篇文章小北想分时段写,最近其实积压了挺多,以前没注意的css和js操作. ---------------------我是分哥线.2015-8-5------------------------ css部分: margin-top:20px;父级设置overflow:hidden;或者父级设置padding;或使用padding代替 word-wrap:break-word; IE 6.7.8.9 火狐 均兼容英文换行 text-overflow:ellipsis;单行溢出省略 text-tra

select自定义下拉三角符号,css样式小细节

本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时候,以我自己的感觉中,是可以自己定义的,于是网上找到了这部分资料. 然后自己分享处理吧. 知道大家都喜欢完整的demo,所有直接粘贴吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

欲练JS,必先攻CSS——前端修行之路

今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助. 个人的css历史: 说说自己的css学习的历史,12年,当时是老师手把手1对1教我div+float的固定布局,所有元素全部用float,做了学生会网站的全部前端页面,因为有段时间学PS比较多,也是自己做的UI,很丑,老师说第一次做成这样很不错了,那时老师就觉得我有做前端的天赋,我就是从这个时候开始接触前端的.毕业设计自己一个人做了一个全栈的web,做完整个毕业设计后,我就决定出来要做前端

关于css的总结

写在前面  ,学好css,需要长期的推敲和积累  ,细节是不断完善的,逐渐形成自己的风格    让自己的css更加接近优雅. 下面来总结一些我觉得比较好的css代码风格 : 1. 一般网页中的背景 用背景时 设置为行内样式 style="background-image: url(img/01.jpg)"; 这样做有一点好处:图片一般为资源  尽量写在html中  便于后期维护   结构清晰 这样做还有一点要注意:这里应该使用 "background-image" 

PSD 转化成 HTML

一般情况下,网页设计制作完成的工作实际是:psd 效果图 转成 html+CSS 的模板页面,一般情况下,我们会拿到美工的 psd,不同的人会有不同的做法: 打开fireworks将图片切割导出为html. 直接在dreamweaver之类的工具去拖拉布局,导入相关的图片,flash资源. 先在ps中完成切图后,在文本编辑器中看着效果图一步步的制作. 以上是最常被采用的方法,但都不好: 第一种方法最为不好,这样的代码根本不具维护性和可读性. 第二种方法也不好,代码难免会有冗余,做出来的东西基本需