CSS基础2
日期：2014-05-17 浏览次数：20687 次
CSS基础二
<html>
<head>
<title>div 标记范例</title>
<style type="text/css">
<!--
div{
font-size:18px; /* 字号大小 */
font-weight:bold; /* 字体粗细 */
font-family:Arial; /* 字体 */
color:#FFEEEE; /* 颜色 */
background-color:#001166; /* 背景颜色 */
text-align:center; /* 对齐方式 */
width:300px; /* 块宽度 */
height:100px; /* 块高度 */
}
-->
</style>
</head>
<body>
<div>
这是一个div标记
</div>
</body>
</html>
<html> <head> <title>div与span的区别</title> </head> <body> <p>div标记不同行：</p> <div><img src="lotus.jpg" border="0"></div> <div><img src="lotus.jpg" border="0"></div> <div><img src="lotus.jpg" border="0"></div> <p>span标记同一行：</p> <span><img src="lotus.jpg" border="0"></span> <span><img src="lotus.jpg" border="0"></span> <span><img src="lotus.jpg" border="0"></span> </body> </html>
<html>
<head>
<title>float属性</title>
<style type="text/css">
<!--
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:1px solid #111111;
padding:25px; /* 父块的padding */
}
.son1{
padding:10px; /* 子块son1的padding */
margin:5px; /* 子块son1的margin */
background-color:#70baff;
border:1px dashed #111111;
float:left; /* 块son1左浮动 */
}
.son2{
padding:5px;
margin:0px;
background-color:#ffd270;
border:1px dashed #111111;
}
-->
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
<div class="son2">float2</div>
</div>
</body>
</html>
<html>
<head>
<title>position属性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
position:relative;
width:100%;
height:100%;
}
#block{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute; /* absolute绝对定位 */
left:20px; /* 块的左边框离页面左边界20px */
top:40px; /* 块的上边框离页面上边界40px */
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block">absolute</div>
</div>
</body>
</html>
<html>
<head>
<title>position属性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
width:100%; height:100%;
padding:5px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative; /* relative相对定位 */
left:15px; /* 子块的左边框距离它原来的位置15px */
top:10%;
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">relative</div>
</div>
</body>
</html>
<html>
<head>
<title>z-index属性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:20px;
top:30px;
z-index:1; /* 高低值1 */
}
#block2{
background-color:#ffc24c;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:40px;
top:50px;
z-index:0; /* 高低值0 */
}
#block3{
background-color:#c7ff9d;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:60px;
top:70px;
z-index:-1; /* 高低值-1 */
}
-->
</style>
</head>
<body>
<div id="block1">AAAAAAAA
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
