CSS取名标准参照及撰写留意事项

日期:2021-03-12 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

CSS撰写次序
*{
/*显示信息特性*/
display
position
float
clear
cursor


/*盒实体模型*/
margin
padding
width
height

/*排版*/
vertical-align
white-space
text-decoration
text-align


/*文本*/
color
font
content

/*边框情况 为何要把 boder和background放在最终的缘故是改动的频率会较以前的经常,放在最终查询起来便捷,哈哈。*/
border
background
}
下表次序为从上到下,从左到右:
========================

display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor

CSS取名标准:
1.文档取名标准
全局性款式:global.css;
架构合理布局:layout.css;
字体样式款式:font.css;
连接款式:link.css;
复印款式:print.css;
关键的 master.css
专栏 columns.css
主题 themes.css
关键的 master.css
控制模块 module.css
基础同用 base.css
表单 forms.css
补钉 mend.css
2.网页页面构造
容 器: container
页 头:header
内 容:content
网页页面行为主体:main
页 尾:footer
栏目:column
网页页面外围操纵总体合理布局宽度:wrapper
上下中:left right center
3.导航栏
导航栏:nav
主导航栏:mainbav
子导航栏:subnav
顶导航栏:topnav
边导航栏:sidebar
左导航栏:leftsidebar
右导航栏:rightsidebar
菜单:menu
子菜单:submenu
引言: summary
4.作用
标示:logo
广告宣传:banner
登录:login
登陆条:loginbar
申请注册:regsiter
检索:search
作用区:shop
题目:title
添加:joinus
情况:status
按钮:btn
翻转:scroll
标识页:tab
文章内容目录:list
提醒信息内容:msg
当今的: current
小窍门:tips
标志: icon
注解:note
指南:guild
服务:service
网络热点:hot
新闻:news
免费下载:download
网络投票:vote
协作小伙伴:partner
友谊连接:link
版权:copyright

Container div
#container
器皿
Layout
#layout
合理布局
Header or banner div
#head, #header
页头顶部分
Footer div
#foot, #footer
页脚一部分
Navigation list
#nav
主导航栏
Sub-navigation list
#subNav
2级导航栏
Menu
#menu
菜单
Sub Menu
#submenu
子菜单
Left or right side columns
#sidebar_a, #sidebar_b
左侧栏或右侧栏
Main div
#main
网页页面行为主体
Tag
#tag
标识
Message
#msg #message
提醒信息内容
Tips
#tips
小窍门
Vote
#vote
网络投票
Friend Link
#friendlink
友谊联接
Title
#title
题目
Summary
#summary
引言
Search input
#searchInput
检索键入框
Search output
#search_output
检索輸出和检索結果类似
Search
#search
检索
Search bar
#searchBar
检索条
Search results
#search_results
检索結果
Copyright information
#copyright
版权信息内容
brand
#branding
商标logo
branding-logo
#logo
LOGO
Site information
#siteinfo
网站信息内容
Copyright information etc.
#siteinfoLegal
法律法规申明
Designer or other credits
#siteinfoCredits
信誉度
Join us
#joinus
添加大家
Partnership opportunities
#partner
协作小伙伴
Services
#service
服务
Regsiter
#regsiter
申请注册
Arrow
arr/arrow
箭头
Little
#little
题目
Website map
#sitemap
网站地形图
List
#list
目录
Home page
#homepage
主页
Sub page
subpage
2级网页页面子网页页面
Toolbar
#tool, #toolbar
专用工具条
Next pulls
#drop
往下拉
Next pulls menu
#dorpmenu
往下拉菜单
Status
#status
情况
Container div
#container
器皿
Header or banner div
#header
页头顶部分
Main or global navigation div
#mainNav
主导航栏
Menu
#menu
菜单
Sub Menu
#submenu
子菜单
Left or right side columns
#sidebarA, #sidebarB
左侧栏或右侧栏
Main div
#main
网页页面行为主体
Content div
#content
內容一部分
The main content area
#contentMain
关键內容地区
Footer div
#footer
页脚一部分
Tag
#tag
标识
Message
#msg #message
提醒信息内容
Tips
#tips
小窍门
Vote
#vote
网络投票
Friend Link
#friendlink
友谊联接
Title
#title
题目
Summary
#summary
引言
Sub-navigation list
#subNav
2级导航栏
Search input
#searchInput
检索键入框
Search output
#searchOutput
检索輸出和检索結果类似
Search
#search
检索
Search results
#searchResults
检索結果
Copyright information
#copyright
版权信息内容
brand
#branding
商标logo
branding-logo
#brandingLogo
LOGO
Site information
#siteinfo
网站信息内容
Copyright information etc.
#siteinfoLegal
法律法规申明
Designer or other credits
#siteinfoCredits
信誉度
Join us
#joinus
添加大家
Partnership opportunities
#partner
协作小伙伴
Services
#service
服务
Regsiter
#regsiter
申请注册
Status
#status
情况
Products
.products
商品
Products prices
.productsPrices
商品价钱
Products description
.productsDescription
商品叙述
Products review
.productsReview
商品评价
Editor’s review
.editorReview
编写评价
New release
.newsRelease
全新商品
Publisher
.publisher
生产制造商
Screen shot
.screenshot
缩略图
FAQ
.faqs
普遍难题
Keyword
.keyword
重要词
Blog
.blog
blog
Forum
.forum
论坛

5class的取名:
(1)色调:应用色调的名字或16进制编码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体样式尺寸,立即应用“font+字体样式尺寸“做为名字,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐款式,应用对齐总体目标的英文名字,如
.left { float:left; }
.bottom { float:bottom; }
(4)题目栏款式,应用“种别+作用“的方法取名,如
.barnews { }
.barproduct { }

XHTML-CSS创作提议
1. 全部的xhtml编码小写
2. 特性的值1定要用双引号(“”)括起来,且1定要有值
3. 每一个标识都要有刚开始和完毕,且要有正确的层级
4. 空元素要有完毕的tag或于刚开始的tag后再加“/”
5. 主要表现与构造彻底分离出来,编码中不涉及到任何的主要表现元素,如style、font、bgColor、border等
6. <h1>到<h5>的界定,应遵照从大到小的标准,反映文本文档的构造,并有益于检索模块的查寻。
7. 给每个报表和表单再加1个唯1的、构造标识id
8. 给关键的区块再加注解,如:
9. 给照片再加alt标识
10. 全部的标识务必开展有效的嵌套循环
11. 根元素前务必有元素,宣布应用那1种DTD
12. 根元素务必有xmlns特性来特定应用http://www.w3.org/1999/xhtml的namespace
1. 基本撰写标准及方式
1. 挑选DOCTYPE:
XHTML 1.0 出示了3种DTD申明可供挑选:
过渡的(Transitional):规定十分宽松的DTD,它容许你再次应用HTML4.01的标志(可是要合乎xhtml的写法)。详细编码以下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
严苛的(Strict):规定严苛的DTD,你不可以应用任何主要表现层的标志和特性,比如<br>。详细编码以下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
架构的(Frameset):专业对于架构网页页面设计方案应用的DTD,假如你的网页页面中包括有架构,必须选用这类DTD。详细编码以下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想化状况自然是严苛的DTD,但针对大家大多数数刚触碰web规范的设计方案师来讲,过渡的DTD(XHTML 1.0 Transitional)是现阶段理想化挑选(包含本站,应用的也是过渡型DTD)。由于这类DTD还容许大家应用主要表现层的标志、元素和特性,也较为非常容易根据W3C的编码校检。
2. 特定語言及标识符集:
为文本文档特定語言:
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
以便被访问器正确解释和根据W3C编码校检,全部的XHTML文本文档都务必申明它们所应用的编号語言;如:
常见的語言界定:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf⑻″ />
规范的XML文本文档語言界定:
<?xml version=”1.0″ encoding=” utf⑻″?>
对于老版本号的访问器的語言界定:
<meta http-equiv=”Content-Language” content=” utf⑻″ />
为提升标识符集,提议选用“utf⑻”。
3. 启用款式表:
外界款式表启用:
网页页面嵌入法:便是将款式表立即写在网页页面编码的head区。 如:
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外界启用法:将款式表写在1个单独的.css文档中,随后在网页页面head区用相近下列编码启用。
<link rel=”stylesheet” rev=”stylesheet” href=style.css” type=”text/css” media=”all” />
在合乎web规范的设计方案中,强烈推荐应用外界启用法,能够不改动网页页面只改动.css文档而更改网页页面的款式。假如全部网页页面都启用同1个款式表文档,那末改1个款式表文档,能够更改全部文档的款式。
4、采用适当的元素:
依据文本文档的构造来挑选HTML元素,而并不是依据HTML元素的款式来挑选。比如,应用P元向来包括文本段落,而并不是以便换行。假如在建立文本文档时找不到适度的元素,则能够考虑到应用通用性的div 或是span;
防止过渡应用div和span。小量、适度的应用div和span元素可使文本文档的构造更为清楚有效而且易于应用款式;
尽量少地应用标识和构造嵌套循环,这样不仅可使文本文档构造清楚,另外还可以维持文档的精巧,在提升客户免费下载速率的另外,也易于访问器对文本文档的解释及呈视;
5、派生挑选器:
可使用派生挑选器给1个元素里的子元素界定款式,在简化取名的另外也使构造更为的清楚化,如:
.mainMenu ul li {background:url(images/bg.gif;)}
6、輔助照片用背影图解决:
这里的”輔助照片”是指那些并不是做为网页页面要表述的內容的1一部分,而仅仅用于装饰、间距、提示的照片。将其做背影图解决,能够在不修改网页页面的状况下根据CSS款式来开展修改,如: #logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7、构造与款式分离出来:
在网页页面里只写入文本文档的构造,而将款式写于css文档中,根据外界启用CSS款式表来完成构造与款式的分离出来。
8、文本文档的构造化撰写:
网页页面CSS文本文档都应选用构造化的撰写方法,逻辑性清楚易于阅读文章。如:
<div id=”mainMenu”>
<ul>
<li><a href=SPAN>”#” >主页</a></li>
<li><a href=SPAN>”#” >详细介绍</a></li>
<li><a href=SPAN>”#” >服务</a></li>
</ul>
</div>

/*=====主导航栏=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主导航栏完毕=====*/
9、电脑鼠标手式:
在XHTML规范中,hand只被IE鉴别,当必须将电脑鼠标手式变换为“手形”时,则将“hand”换为“pointer”,即“cursor:pointer;”
10.注解撰写标准
1、行间注解:
立即写于特性值后边,如:
.search{
border:1px solid #fff;/*界定检索键入框边框*/
background:url(../images/icon.gif) no-report #333;/*界定检索框的情况*/
}
2、整段注解:
各自在刚开始及完毕地区添加注解,如:
/*=====检索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====检索条完毕=====*/
3.帮助注解
非作者维护保养时所添加的表明改动時间、改动人等标志信息内容。
在地区注解或单行注解的基本上再加改动人和改动時间等信息内容。
例(地区注解):
<!--==S 注解內容[改动人和改动時间]-->
<div>
...
</div>
<!--==E 注解內容[改动人和改动時间]-->
/*=S 注解內容[改动人和改动時间]*/
.class{
...
}
.class{
...
}
/*=E 注解內容[改动人和改动時间]*/
例(单行注解):
<div>
<!-- 注解內容[改动人和改动時间]-->
...
</div>
.class{
/*注解內容[改动人和改动時间]*/
...
}
11.款式特性编码缩写
1、不一样类有同样特性及特性值的缩写:
针对两个不一样的类,可是在其中有一部分同样乃至是所有同样的特性及特性值时,解决其加以合拼缩写,非常是当有好几个不一样的类而有同样的特性及特性值时,合拼缩写能够降低编码量并易于操纵。如:
#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}
两个不一样类的特性值有反复的地方,刚能够缩写为:
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}
2、同1特性的缩写:
同1特性依据它的特性值还可以开展简写,如:
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}
3、內外侧面框的缩写:
在CSS中有关內外侧面框的间距是依照上、右、下、左的次序来排序的,当这4个特性值不一样时也可立即缩写,如:
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
则可缩写为:
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}

而假如当上边与下边、左侧与右侧的边框特性值同样时,则特性值能够立即缩写为两个,如: .btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}

缩写为: .btn {margin:10px 5px;}
而当左右上下4个边框的特性值都同样时,则能够立即缩写成1个,如:
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
缩写为:
.btn{margin:10px;}
4、色调值的缩写:
当RGB3个色调值标值同样时,可缩写色调值编码。如:
.menu { color:#ff3333;}
可缩写为:
.menu {color:#f33;}
12.hack撰写标准
由于不一样访问器对W3C规范的适用不1样,各个访问器针对网页页面的解释呈视也不尽同样,例如IE在许多状况下就与FF存在3px的差别,针对这些差别性,就必须运用css 的hack来开展调剂,自然在沒有必要的状况下,最好是不必写hack来开展调剂,防止由于hack而致使网页页面出現难题。
1、 IE6、IE7、Firefox之间的适配写法:
写法1:
IE都能鉴别*;规范访问器(如FF)不可以鉴别*;
IE6能鉴别*,但不可以鉴别 !important,
IE7能鉴别*,也能鉴别!important;
FF不可以鉴别*,但能鉴别!important;
依据上述表述,同1类/ID下的CSS hack可写为:
.searchInput {
background-color:#333;/*3者皆可*/
*background-color:#666 !important; /*仅IE7*/
*background-color:#999; /*仅IE6及IE6下列*/
}
1般3者的撰写次序为:FF、IE7、IE6.
写法2:
IE6可鉴别“_”,而IE7及FF皆不可以鉴别,因此当只对于IE6与IE7及FF之间的差别时,可这样撰写:
.searchInput {
background-color:#333;/*通用性*/
_background-color:#666;/*仅IE6可鉴别*/
}
写法3:
*+html 与 *html 是IE独有的标识, Firefox 暂不适用。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {background-color:#555;}/*仅IE7*/
屏蔽IE访问器:
select是挑选符,依据状况拆换。第2句是MAC上safari访问器特有的。
*:lang(zh) select {font:12px !important;} /*FF的专用*/
select:empty {font:12px !important;} /*safari可见*/
IE6可鉴别:
这里关键是根据CSS注解分开1个特性与值,注解在冒号前。
select { display /*IE6不鉴别*/:none;}
IE的if标准hack写法:
全部的IE可鉴别:
<!–[if IE]> Only IE <![end if]–>
仅有IE5.0能够鉴别:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包换IE5.5都可以以鉴别:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
仅IE6可鉴别:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6和IE6下列的IE5.x都可以鉴别:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
仅IE7可鉴别:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
13、消除波动:
在Firefox中,当子级都为波动时,那末父级的高宽比就没法彻底的包住全部子级,那末这时候用这个消除波动的HACK来对父级做1次界定,那末便可以处理这个难题。
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}

留意事项:
1. id和class取名选用该版块的英文单词或组成取名,并第1个单词小写,第2个单词首个字母大写,如:newRelease(全新商品/new+Release)
常见类的取名应尽可能以普遍英文单词为准,保证通俗化易懂,并在适度的地区加以注解。针对2级类/ID取名,则选用组成撰写的方式,后1个单词的首字母应大写:诸如“检索框”则应取名为“searchInput”、“检索标志”取名这“searchIcon”、“检索按钮”取名为 “searchBtn”……
2. CSS款式表各区块用注解表明
3. 尽可能应用英文取名标准
4. 无需加中杠和下划线
5. 尽可能不缩写,除非1看就搞清楚的单词
6.查验HTML元素是不是有拼写不正确、是不是忘掉完毕标识
即便是老手也常常会弄错div的嵌套循环关联。能够用dreamweaver的认证作用查验1下有没有不正确。
7. 查验CSS是不是正确
查验1下有没有拼写不正确、是不是忘掉末尾的 } 等。能够运用CleanCSS来查验 CSS的拼写不正确。CleanCSS本是为CSS减肥的专用工具,但也能查验出拼写不正确。
8. 明确不正确产生的部位
假如不正确危害了总体合理布局,则能够逐一删掉div块,直至删掉某个div块后显示信息修复一切正常,便可明确不正确产生的部位。
9. 运用border特性明确错误元素的合理布局特点
应用float特性合理布局1一不小心就会错误。这时候为元素加上border特性明确元素界限,不正确缘故即真相大白。
10. float元素的父元素不可以特定clear特性
MacIE下假如对float的元素的父元素应用clear特性,周边的float元素合理布局就会错乱。这是MacIE的知名的bug,假若不知道道就会走弯路。
11. float元素尽量特定width特性
许多访问器在显示信息未特定width的float元素时会有bug。因此无论float元素的內容怎样,1定要为其特定width特性。
此外特定元素时尽可能应用em而并不是px做企业。
12. float元素不可以特定margin和padding等特性
IE在显示信息特定了margin和padding的float元素时有bug。因而不必对float元素特定margin和padding特性(能够在float元素內部嵌套循环1个div来设定margin和padding)。还可以应用hack方式为IE特定非常的值。
13. float元素的宽度之和要小于100%
假如float元素的宽度之和恰好是100%,一些古老的访问器将不可以一切正常显示信息。因而请确保宽度之和小于99%。
14. 是不是更改了默认设置的款式?
一些特性如margin、padding等,不一样访问器会有不一样的解释。因而最好是在开发设计前最先将全体人员的margin、padding设定为0、目录款式设定为none等。
15、float的div1定要闭合。
比如:(在其中floatA、floatB的特性早已设定为float:left;)
程序流程编码
<#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>
这里的NOTfloatC其实不期待再次平移,而是期待往下排。
这段编码在IE中没什么难题,难题出在FF。缘故是NOTfloatC并不是float标识,务必将float标识闭合。在 程序流程编码
<#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>
之间再加 程序流程编码
<#div class=”clear”></#div>
这个div1定要留意申明部位,1定要放在最适当的地区,并且务必与两个具备float特性的div同级,之间不可以存在嵌套循环关联,不然会造成出现异常。
而且将clear这类款式界定为为以下便可:
程序流程编码
.clear{
clear:both;}
另外,以便让高宽比能全自动融入,要在wrapper里边再加overflow:hidden;
当包括float的box的情况下,高宽比全自动融入在IE下失效,这时候候应当开启IE的layout独享特性(万恶的IE啊!)用zoom:1;能够保证,这样就做到了适配。
比如某1个wrapper以下界定:
程序流程编码
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
16、margin加倍的难题。
设定为float的div在ie下设定的margin会加倍。这是1个ie6都存在的bug。
处理计划方案是在这个div里边再加display:inline;
比如:
<#div id=”imfloat”></#div>
相应的css为
程序流程编码
#IamFloat{
float:left;
margin:5px;/*IE下了解为10px*/
display:inline;/*IE下再了解为5px*/}
17、有关器皿的包含关联
许多情况下,特别是器皿内有平行合理布局,比如两、3个float的div时,宽度很非常容易出現难题。在IE中,外层的宽度会被里层更宽的div挤破。1定要用Photoshop或Firework量取像素级的精度。
18、有关高宽比的难题
假如是动态性地加上內容,高宽比最好是不必界定。访问器能够全自动伸缩,但是假如是静态数据的內容,高宽比最好是定好。(好像有时不容易全自动往下撑开,不知道道实际如何回事)

普遍适配难题:
1.DOCTYPE 危害 CSS 解决
2.FF: div 设定 margin-left, margin-right 为 auto 时早已垂直居中, IE 不好
3.FF: body 设定 text-align 时, div 必须设定 margin: auto(关键是 margin-left,margin-right) 即可垂直居中
4.FF: 设定 padding 后, div 会提升 height 和 width, 但 IE 不容易, 故必须用 !important 多设1个 height 和 width
5.FF: 适用 !important, IE 则忽视, 能用 !important 为 FF 非常设定款式
6.div 的竖直垂直居中难题: vertical-align:middle; 将行距提升到和全部DIV1样高 line-height:200px; 随后插进文本,就竖直垂直居中了。缺陷是要操纵內容不必换行
7.cursor: pointer 能够另外在 IE FF 中显示信息游标手指状, hand 仅 IE 能够
8.FF: 连接加边框和情况色,需设定 display: block, 另外设定 float: left 确保不换行。参考 menubar, 给 a 和 menubar 设定高宽比是以便防止底边显示信息移位, 若不设 height, 能够在 menubar 中插进1个空格。
9.在mozilla firefox和IE中的BOX实体模型解释不1致致使相差2px处理方式:
div{margin:30px!important;margin:28px;}
留意这两个margin的次序1定不可以写反,据阿捷的说法!important这个特性IE不可以鉴别,但其他访问器能够鉴别。因此在IE下实际上解释成这样:
div{maring:30px;margin:28px}
反复界定的话依照最终1个来实行,因此不能以只写margin:XXpx!important;

10.IE5 和IE6的BOX解释不1致
IE5下 程序流程编码
div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px⑴0px(右填充)⑴0px(左填充)最后div的宽度为280px,而在IE6和别的访问器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来测算的。这时候大家能够做以下改动
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
有关这个/**/是甚么我也不太搞清楚,只了解IE5和firefox都适用但IE6不适用,假如有人了解的话,请告知我1声,谢了!:)
11.ul标识在Mozilla中默认设置是有padding值的,而在IE中仅有margin有值因此先界定
程序流程编码ul{margin:0;padding:0;}
留意撰写文件格式的难题:
1定要留意缩进。对齐。要有优良的程序编写习惯性。