请选择 进入手机版 | 继续访问电脑版
企业网站建设公司-易捷网络科技
企业网站推广优化-易捷网络科技
企业邮箱申请购买-易捷网络科技
域名空间申请备案-易捷网络科技
查看: 509|回复: 1

网站重构CSS常用技巧有那些

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

积分
35838
发表于 2017-1-3 16:04:00 | 显示全部楼层 |阅读模式
我们在网站建设的过程中,很多网站建设高手们都知到使用css缩写,因为使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。这里就着重总结了一些css常用技巧,为网站重构打下基础。今天我们深圳专业网站建设公司易捷网络网就来与大家分说说网站重构CSS常用技巧有那些
1. Block和inline元素对比
所有的HTML元素都属于block和inline之一。
block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个度 和
是块元素的例子。
相反地,inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
, 和是inline元素的例子。
用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢?
让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条非凡有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
2. 再来一个box黑客方法
之所以有这么多box黑客方法,是因为IE在6之前对box的理解跟别人都不一样,它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致,可以用CSS的方法:
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
第一个宽度所有浏览器都认得,但IE5.x不认得第2行的宽度设置,只因为那一行上有空白的注释符号(多么蠢的语法分析!),所以IE5.x就用20减掉一些空白,而其他浏览器会用14这个宽度,因为它是第2行,会覆盖掉第1行。
3. 网站页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个
放到 标签下,然后为div指定一个类:
然后CSS这样设计:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth
}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判定来实现最小宽度。
同样的办法也可以为IE实现最大宽度:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth  1200? ”1200px“ : ”auto";
}
回复

使用道具 举报

0

主题

3

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2017-1-3 16:46:04 | 显示全部楼层

4. IE与宽度和高度的问题
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,假如只用宽度和高度,正常的浏览器里这两个值就不会变,假如只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
5. 区分大小写
当在网站建设过程中XHTML使用CSS的时候,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。
6. 取消class和id前的元素限定
当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,class可以在页面中多次使用。你限定某个元素毫无意义。
回复 支持 反对

使用道具 举报

企业网站建设最新相关资讯推荐
深圳网络公司:网站设计最基本思路是什么?
网站设计的基本思路是非常重要的,它对网站的发展有很大的好处。可以说,一个网站如何设计,直接关系到它未来的发展。在网站设计的过程中,我们需要遵循一定的基本思想。那么,网站设计的基本思想是什么呢?深圳网络公司今天来和大家分析一下。 1、网站的主题和名称的定位 在设计网站的时候,我们必须做好网站的主题和名称

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表