转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式

时间:2022-02-04 01:26:28

overflow:hidden 隐藏溢出

一、自己总结的公用样式解析

html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }

img { border: 0 none; vertical-align: top; }

ul, li { list-style-type: none; }

h1, h2, h3, h4, h5, h6 { font-size: 14px; }

body, input, select, button, textarea { font-size: 12px; font-family: Tahoma, Geneva, sans-serif; }

button { cursor: pointer; }

i, em, cite { font-style: normal; }

body { background: #fff; color: #363636; line-height: 1.2; }

a, a:link { color: #222; text-decoration: none; }

a:visited {  }

a:active, a:hover { text-decoration: underline; }

a:focus { outline: none; }

.fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.fixed { display: block; min-height: 1%; }

*html .fixed { height: 1%; }

.clear { diplay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }

.more { float: right; }

.more a { font-weight: normal; font-size: 12px; }

.fl, .fr { display: inline; float: left; }

.fr { float: right; }

这是我做网页制作近三年来经过参考和自己研究出来的公用样式,大体就是这样,样式会根据网页具体的效果进行微调。

注:在这里写这些注解就是为了让刚接触到CSS的朋友明白一些东西 不至于绕弯路,知道这些代码都是怎么回事的就可以跳到第三条了,可能写的有些啰嗦。呵呵!

第一行html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td 样式大家应该都明白这样是把原先的选择器自带的外填充和内填充去掉归0

也许有人还在用“ * ” 通配符,但是这样是有缺点的 会让代码变得冗余 尤其是子父级嵌套关系越深越麻烦,建议大家要尽量减少使用,在这里建议大家多使用我在第一行里写的通用样式,可能选择器还比较少,但是我日常用到的选择器就这么些,如果大家有用到 pre fieldset blockquote 这些选择器 或是其他的选择器 一样可以写到里面。

第二行里 img 图片标签的样式 大家是各有不同,目的都是一个让浏览器里默认图片是没有边框的,还有ie6里图片底部出现的空白间隔消失掉。有的爱用 display:block; border: none;

但是这样写的话,都会有这样或那样的缺点,display: block; 这样写的话 你要让图片左右居中于一个盒子内的时候 你怎么办? margin: auto; 这样吗?但是你要让外面的盒子有一个实际的宽度,如果是换成 vertival-align: top; 或是 vertival-align: middle; 的话那么这个实际的宽度就不必写了,只用加一个 text-align: center;  图片也不用加外填充了。

还有就是有的酷友会奇怪我写的 border: 0 none; 这里要写 0 再加一个 none,这个问题我还是想说一下是因为我在写文本框 input 的时候,发现在不同的 windows 系统外观下,你光写border: none 或是 border: 0; 都不行,文本框的边框还是在的,所以就必须写 border: 0 none; 这个习惯也就留到了img 上,所以大家还是可以写成 border: none; 但是写 input 的时候,要边框没有的时候还是要写 border: 0 none;

第三行 ul, li 里就不用解释了吧,大家都明白怎么回事。

第四行h1, h2, h3, h4, h5, h6 还是根据要搭的页面标题字体大小来修改,或是把 h1 h2 h3 h4 这些选择器分开来写各自的字体大小。

第五行body, input, select, button, textarea 是因为我搭页面的时候发现ie6里的文本框和下拉菜单等... 里的字体大小不是正常的12号字体,所以在兼容性上不是很完美,所以我就写了字体的大小为12号,然后在 firfox 里这些标签的字体默认又是宋体,所以我就又写上了字体,然后 body 也要写字体大小和大小,所以就在 input 的前面加上了 body,所以后面就不用再写了。

第六行 button 这个按钮的鼠标触发属性是默认的箭头,在用户体验上不是特别好,所以我把鼠标触发的属性改成了小手。

第七行就是在写一些不是特别重要 或是装饰的标签时我就是用到这些选择器 由于他们都有文字的默认属性,所以我去掉了,在用到的时候不至于出问题。

第八行 body 写背景色 是因为有的 windows 系统外观会把浏览器背景色也改成别的色,所以为了不会问题,就加上背景白色了,然后再加上文字颜色,字体大小和字体我在前面已经写了。

第九行到第十一行 a:link 这些大家写的都差不多吧?

第十二行 点击链接时出现的虚线框消失,就是消除焦点。(描述不太专业,见谅!)

在下面我写了 .fixed 和 .clear 这两个清除浮动的样式

具体这两个我都用在什么地方呢?我画了两张示意图看了后 大家就会明白了!

.fixed 的例子

转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式

.clear 的例子

转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式

还有就是讲解一下 关于 .clear 里面很多属性我要写 !important 的问题

因为我们在写子级盒子浮动的时候 肯定会写到 float: left; margin或是 padding,还有 width 等等,我也在 .clear的属性里把尽可能会发生冲突的属性加了!important,浏览器就会把这些属性的优先级排到最前,并且ie6也是支持读取!important的,大家会想到,ie6浏览器只要读到相同的属性,以最后的属性为优先级,但是他是对于在同一样式内的,而不是同一样式内的属性他就不会以最后的属性为优先了 看下面这段代码

转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式

大家看完这两段代码后就会明白了!

.more 这个样式 搭页面的过程中 栏目或是标题栏肯定会有更多这个链接,所以我就在前面加了这个样式,在后面就减少了 float: right 这个属性,这个的意义不是很大。

.fl .fr 这两个我是在一些需要向左或是向右浮动的盒子上附加的,这样写灵活性很高,也可以省掉一部分css代码。

二、讲一些自己对ie6浏览器显示bug的一些兼容样式

我想现在大家都在用 jquery 或是其他一些的js框架吧?

我们在用到这些框架开发出的灯箱相册时(就是点击图片后 图片弹出 图片与网页之间有一层遮罩类的)。

有的灯箱相册代码写的不是很完善,例如:ie6下,当内容的高度不足以撑满整个页面时,再点击相册中的一张图片时,我们发现图片后面的遮罩层并没有把整个浏览器占满。

如下图:

转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式

这时候我们会想到要不要换一个代码来用,但是这个相册代码除了遮罩这个外其他都很完善,找不到其他的完善的相册时。我们怎么办?

下面就是我写的css 解决方案!浏览器分辨率目前测试最高的是1050px。

代码如下:

*html body { overflow-x: hidden; position: relative; height: 99%; margin-top: -1.5%; padding-top: 1%; }

*html { padding-top: 1.5%; }

接下来我来做一下解释

overflow-x: hidden; position: relative; margin-top: -1.5% 这三个属性是为了让高度为 99%的时候不在右侧出现滚动条,而padding-top: 1%; 这个是为了让在高分辨率显示器下右侧不出现滚动条

而 *html { padding-top: 1.5%; } 则是为了添补上面样式中写到的 margin-top: -1.5%; 这个负值。

大家可以在用jquery或是其他js框架的开发出来有缺陷的代码中测试一下这段代码

三、写css时和程序员之间的沟通

各位酷友在搭完页面后与程序员沟通时会有些小问题。

注:下面的建议里写的都是关于和asp.net程序员之样式命名的问题。

例如我们在写子级样式时,会这样写:.wraper form {},这样写的时候,我们要考虑这个页面内有没有分页之类的代码了,因为asp.net程序员会在有分页的页面内加一个 form 控件 这样我们写在里面的form 就会被去掉,所以我们要把.wraper form {} 改成.wraper .formWraper {} 就可以,这样问题就会解决了

还有就是复选框和单选框的地方。

转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式

类似于这样的写法 在asp.net里 大部分程序员还是爱拿服务器控件,输出到前台页面后,就会变成

转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式

变成这样后,前台页面就会变乱,所以我们碰到类似的情况时还是要更改一下写法

还有一个就是 button {}

在asp.net 里也会用到服务器控件,输出到前台,就会就成 转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式 这样的话 我们的样式又无效了,所以要给这个按钮起一个样式名,而不能用选择器,例:.message_btn {}

差不多就这些问题。以后有了会继续更新的!

四、一些自己对大家的建议。

由于自己是自学的css样式,还有就是没有英语基础,所以在这里建议和我一样也没有什么英语基础的也在自学或是有一部分基础的酷友们在写样式的时候尽量手写,不要用软件自带的联想功能,当你没有这个软件的时候,你就会有些困难了,还有就是样式的名称尽量用英文,就算你不明白这个名字是什么意思,也可以先翻译一下,知道大概的意思,以后用的多了自然也就知道是什么意思了,对于以后学习其他的东西是有帮助的。

推荐刚刚学习和有了一部分基础的酷友们一本CSS的进阶书籍,精通CSS:高级Web标准解决方案 这本书的封面是青灰色的。大家可以上网看看!

呃.. 这就是目前自己写的一些心得吧,写的比较乱,也比较啰嗦,如果文章内有错误的地方,请大家提出,我会尽快修改,和大家一起进步,一起学习!

转 http://www.5icool.org/a/201106/a654.html CSS开发中常用的公用样式的更多相关文章

  1. Android中如何使用命令行查看内嵌数据库SQLite3

    转载博客:http://www.linuxidc.com/Linux/2011-06/37135.htm 在上图中,除了最后一个红色的方框,其它方框都是adb shell下的命令. [1]在Andro ...

  2. json 使用 (下)

    使用JSON JSON也就是JavaScript Object Notation,是一个描述数据的轻量级语法.JSON的优雅是因为它是JavaScript语言的一个子集.接下来你将看到它为什么如此重要 ...

  3. 一个好用的Dialog插件

    网页中常常须要弹出dialog,尽管非常多JS开源框架都提供这个功能,可是效果都不是非常好,比方easy-UI.改动样式这些又不是我擅长的,身边又没有美工兄弟,苦逼啊! (Easy-UI的BasicD ...

  4. oracle listagg函数、lag函数、lead函数 实例

    Oracle大师Thomas Kyte在他的经典著作中,反复强调过一个实现需求方案选取顺序: “如果你可以使用一句SQL解决的需求,就使用一句SQL:如果不可以,就考虑PL/SQL是否可以:如果PL/ ...

  5. WPF学习系列 简单的窗体设置

    今天要学习的源码是一个窗体设置.效果如下,可拖拽.这让我想起了vs的启动界面 下面是源码的情况 项目结构: 窗体代码: cs代码 1.新建项目 略 2.设置窗体 AllowsTransparency= ...

  6. java学习-关于字符串String

    有必要总结记录一下java的学习,否则,永远只是记忆碎片化和always google(费时) 刚好,小伙伴给了一份自己做的review,在学习的过程中,update一下自己的见解和学习内容: 关于S ...

  7. 如何合理优化WEB前端 高效提升WEB前端性能

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  8. ORACLE会话连接进程三者总结

    概念介绍 通俗来讲,会话(Session) 是通信双方从开始通信到通信结束期间的一个上下文(Context).这个上下文是一段位于服务器端的内存:记录了本次连接的客户端机器.通过哪个应用程序.哪个用户 ...

  9. sql server: sql script

    select ProductGUID,ProductName,ProjectGUID from dbo.Product /* F637A079-E22B-4E50-87E9-000147B1B1F4 ...

随机推荐

  1. canvas初体验之加载图片

    上一篇的介绍主要是画一些基本的图案,这一篇主要是加载图案. canvas加载图片主要分为两个步骤: 1.获取图片资源. 2.将图片资源画到画布上. 1.1获取图片资源,canvasAPI为我们提供了多 ...

  2. Sqlserver With as

    with t as (select * from emp where depno=10) 总结:可以看做将查询出来的语句块表示为一个临时表 select * from t where empno=xx ...

  3. mysql索引使用技巧及注意事项

    一.索引的作用 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,所以查询语句的优化显然是重中之重. 在数据 ...

  4. github 上传下载代码简单使用

    很长时间,一直认为github很难操作,其实认真学了发现也不是很困难. 主要就3个命令 git clone 建立空间 git push 提交代码,git pull拉取代码. git clone htt ...

  5. Netty开发redis客户端,Netty发送redis命令,netty解析redis消息

    关键字:Netty开发redis客户端,Netty发送redis命令,netty解析redis消息, netty redis ,redis RESP协议.redis客户端,netty redis协议 ...

  6. 数据库基础 RDBMS、NoSQL

  7. Centos7.4安装配置haproxy和Keepalived

    系统版本是centos7.4的 [root@data-1-1 ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) [roo ...

  8. 数据库启动windows

    1.上 MongoDB官网下载数据库,下载之后选择自己想放的文件夹要记住文件夹位置,比如我下载之后就放在D盘,改文件夹为 mongodb 2.启动之前要给mongodb指定一个文件夹,这里取名为&qu ...

  9. [5]windows内核情景分析---进程线程

    本篇主要讲述进程的启动过程.线程的调度与切换.进程挂靠 进程的启动过程: BOOL CreateProcess ( LPCTSTR lpApplicationName,                 ...

  10. VLAN,GRE,VXLAN

    https://www.cnblogs.com/charles1ee/p/6629009.html VLAN介绍 局域网LAN(多个机器连接一个Hub或者Switch),是一个广播域 VLAN:一台S ...