-想您所想,多年经验-
白狐广告电话
白狐广告标志
当前位置:网站首页 - 信息中心
div+css样式兼容性
2012-4-20|阅:2907|来自:www.fly010.net
一、盒子模型
CSS 中有个重要的概念,就是盒子模型 (Box model)。
盒子里由里至外依次是:
• content (内容,比如文本,图片等)
• padding 填充,或称作间隙 (也有人称做补丁)
• border 边框
• margin 边距

margin  是调整div与body、DIV与DIV、div与ul、ul与ul 、ul与li、li与li、(块与块)之间的间距

#top7_middle_bottom li { list-style-type:none;background: url(img/arrow.gif) left center no-repeat; line-height:1.7em;text-indent:15px;margin-left:5px; width:325px;}

//margin:10px; // top right bottom left
//margin:10px 5px 15px; top (left right) bottom
//margin:10px 5px;  (top bottom) (left right)
第一个值上下2个方向,第二个值代表左右2个方向
//margin:5px 10px 15px 20px; top right bottom left;
代表是 上  右下 左   顺时针走~
padding  是调整块与内容(文字、图片)之间的间距,也可以调块与块间的间距
上下如果用padding  高度就要减去所用的值
左右用padding  宽度就要减去所用的值

二、兼容性
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容!
主要有2个常用方法
1:!important有优先级  他的前面是火狐、ie8,剩下的值是IE6
例如:_width:180px;(只有ie6认识)
Width:200px;width:300px !important;
Width:200px !important;width:300px;
2:黑客用法(hack)
#a { width:100px;border:1px solid #ccc; } /* Moz FF宽度为100带边框*/
* html { width:300px; border:1px solid #ccc;} /* IE6 宽度为300带边框*/
*+html #a { width:600px;border:1px solid #ccc; } /* IE7 宽度为600带边框*/
先不看IE6  以IE8和FF为准 
清除浮动!clear:both;
float:left时,clear:left起作用,clear:right不起作用。
float:right时,clear:right起作用,clear:left不起作用。
clear:both;对float:left,float:right;都有效。

三、其他
常用缩写
//border :1px Solid  #CCC;
//background:#FFF URL(../images/1.jpg) no-repeat fixed left top;
//color:#CDF;
//a:link ,a:visited ,a:hover,a:active  定义链接的四种状态要注意先后顺序: Link Visited Hover Active //定义A标签要注意的小问题
A{}
A:visited{clolor:red;}
当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式.
只定义了一个a:link时,一定要记得把其它三种状态定义出来,而且注意顺序!

四、CSS实现的网页特效代码-网页柱状图
<STYLE type=text/css>
body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}
h3 {font-weight:normal;display:block;width:600px;text-align:center;}
/*ul*/
ul#q-graph {
border:2px solid #0063be;
background:#adfe12 url(/upimg/allimg/080724/1656450.png) repeat-x scroll 0 0 !important;
background:#adfe12 repeat-x scroll 0 0;
height:300px !important;
height:304px;
width:600px;
position:relative;
list-style:none;
margin:1.1em 1em 3.5em;
padding:0;
}
#q-graph li {
position:absolute;
text-align:center;
bottom:0;
padding:0
margin:0;
}
/* ul li */
li.qtr {
width:150px;
height:300px;
border-right:1px dotted #41a3e2;
z-index:2;
}
li#q1 {left:0;}
li#q2 {left:150px;}
li#q3 {left:300px;}
li#q4 {left:450px;border-right:none;}
/* ul li ul */
#q-graph ul {list-style:none;}
/* ul li ul li */
li.bar {
width:34px;
color:#fff;
}
li.north {
left:36px;
background:#ddd url(/upimg/userup//0807/241A512FO.gif) no-repeat 0 0;
}
li.south {
left:80px;
background:#ddd url(/upimg/userup//0807/241A512FO.gif) no-repeat -34px 0;
}
/* ul li divs */
li#ticks {
left:0;
height:300px;
width:100%;
z-index:1;
}
div.ticks {
position:relative;
height:60px;
border-top:1px dotted #41a3e2;
}
div.ticks:first-child {border-top:none;} /*only4 Firefx IE 7+*/
div.ticks p {
position:absolute;
left:103%;
top:-11pt;
}
</STYLE>
<UL id=q-graph>
<LI class=qtr id=q1>Q1
<UL>
<LI class="north bar" style="HEIGHT: 111px">18 </LI>
<LI class="south bar" style="HEIGHT: 99px">16 </LI></UL></LI>
<LI class=qtr id=q2>Q2
<UL>
<LI class="north bar" style="HEIGHT: 198px">32 </LI>
<LI class="south bar" style="HEIGHT: 210px">34 </LI></UL></LI>
<LI class=qtr id=q3>Q3
<UL>
<LI class="north bar" style="HEIGHT: 260px">43 </LI>
<LI class="south bar" style="HEIGHT: 198px">32 </LI></UL></LI>
<LI class=qtr id=q4>Q4
<UL>
<LI class="north bar" style="HEIGHT: 111px">18 </LI>
<LI class="south bar" style="HEIGHT: 198px">32 </LI></UL></LI>
<LI id=ticks>
<div class=ticks>
<P>50</P></div>
<div class=ticks>
<P>40</P></div>
<div class=ticks>
<P>30</P></div>
<div class=ticks>
<P>20</P></div>
<div class=ticks>
<P>10</P></div></LI></UL>



标 签: div css样式 兼容性

www.internetzg.com Copyright 2012-2020 | 以上内容白狐广告保留解释权,任何个人或单位不得抄袭COPY本公司网站内容,违者必究。

 

↑上一篇文章: iis下如何做一个完美整站的301重…
返回目录    ↓下一篇文章: ASP多条语句查询修改操作的实现

白狐网站建设 白狐设计专门从事网站建设平面广告设计,专业致力于为企业及个人提供优质网站设计(网站建设、网站改版)网站优化推广域名空间画册设计(企业画册设计、产品画册设计、样本设计)印刷彩页单页设计印刷名片T恤衫设计制作台历挂历设计制作标志设计( LOGO设计、商标设计)产品包装设计制作艺术照片设计等。公司是由一流的设计师和专业的制作人员组成的运营团队,拥有多年的网站及广告设计制作经验,服务客户遍及北京、河北、山东、江苏等地区。
首 页 | 关于白狐 | 网站建设 | 平面广告 | 产品服务 | 合作伙伴 | 人才招聘 | 友情链接 | 网站地图 | 联系我们 | 站内搜索
白狐广告www.internetzg.com 网站最佳分辨率为1024*768 京ICP备06068476号
白狐广告服务电话:010-53312027 
13693231513技术 13522191688业务 15011320345售后 15810850699优化
北京网站建设,手机网站建设,北京网站建设公司,北京 北京白狐广告有限责任公司 版权所有
白狐广告公司地址:北京市朝阳区朝阳路8号朗廷大厦A座312室 邮编:100024
返回白狐广告顶部