css 技艺
日期：2014-05-17 浏览次数：20838 次
css 技巧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div float 控制列数</title>
<script src="jquery-1.4.1.min.js"></script>
<style>
@-moz-document url-prefix(){
.container {background-color:pink;} /*firefox*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.container {background-color:gray;}
} /* webkit and opera and chrome*/
.container{
width:750px;
background-color:blue\0;
background-color:green\0/;
*background-color:yellow;
_background-color:purple;
}
.container div{
float:left;
width:300px;
border:#000 solid 1px;
margin-left:10px;
margin-left:10px\9;
*margin-left:10px;
_margin-left:5px;
}
ul li{
list-style:decimal;
margin-top:20px;
}
a:active, a:focus {
outline:none;
}
</style>
<!--[if IE 6]><![endif]-->
<!--[if IE 7]><![endif]-->
<!--[if IE 8]><![endif]-->
<!--[if IE 9]><![endif]-->
</head>
<body>
<ul>
<li>
<div>使用float:left 来控制列数</div>
<div class="container">
<div>1111111111</div>
<div>222222222</div>
<div>333333333</div>
<div>333333333</div>
<div>333333333</div>
<div>333333333</div>
<div>333333333</div>
<div style="float:none; clear:both;"></div>
</div>
</li>
<li>
<div>删除链接上的虚线框</div>
<div><a href="#">删除链接上的虚线框</a></div>
</li>
<li>
<div>给行内元素定义宽度</div>
<div>
<p>如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: <div>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.</p>
<
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div float 控制列数</title>
<script src="jquery-1.4.1.min.js"></script>
<style>
@-moz-document url-prefix(){
.container {background-color:pink;} /*firefox*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.container {background-color:gray;}
} /* webkit and opera and chrome*/
.container{
width:750px;
background-color:blue\0;
background-color:green\0/;
*background-color:yellow;
_background-color:purple;
}
.container div{
float:left;
width:300px;
border:#000 solid 1px;
margin-left:10px;
margin-left:10px\9;
*margin-left:10px;
_margin-left:5px;
}
ul li{
list-style:decimal;
margin-top:20px;
}
a:active, a:focus {
outline:none;
}
</style>
<!--[if IE 6]><![endif]-->
<!--[if IE 7]><![endif]-->
<!--[if IE 8]><![endif]-->
<!--[if IE 9]><![endif]-->
</head>
<body>
<ul>
<li>
<div>使用float:left 来控制列数</div>
<div class="container">
<div>1111111111</div>
<div>222222222</div>
<div>333333333</div>
<div>333333333</div>
<div>333333333</div>
<div>333333333</div>
<div>333333333</div>
<div style="float:none; clear:both;"></div>
</div>
</li>
<li>
<div>删除链接上的虚线框</div>
<div><a href="#">删除链接上的虚线框</a></div>
</li>
<li>
<div>给行内元素定义宽度</div>
<div>
<p>如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: <div>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.</p>
<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
