十.理解CSS与div定位

10.1Div与span标记

div{

font-size:18px; /* 字号大小 */

font-weight:bold; /* 字体粗细 */

font-family:Arial; /* 字体 */

color:#FF0000; /* 颜色 */

background-color:#FFFF00; /* 背景颜色 */

text-align:center; /* 对齐方式 */

width:300px; /* 块宽度 */

height:100px; /* 块高度 */

}

<title>div与span的区别</title>

   </head>

<body>

<p>div标记不同行：</p>

<div><img src="building.jpg" border="0"></div>

<div><img src="building.jpg" border="0"></div>

<div><img src="building.jpg" border="0"></div>

<p>span标记同一行：</p>

<span><img src="building.jpg" border="0"></span>

<span><img src="building.jpg" border="0"></span>

<span><img src="building.jpg" border="0"></span>

</body>

10.2盒子模型

10.2.1盒子模型的概述

Margin

Border

Padding

Content

10.2.2border

<title>border-style</title>

<style type="text/css">

<!--

div{

border-width:6px;

border-color:#000000;

margin:20px; padding:5px;

background-color:#FFFFCC;

}

-->

</style>

   </head>

<body>

<div style="border-style:dashed">The border-style of dashed.</div>

<div style="border-style:dotted">The border-style of dotted.</div>

<div style="border-style:double">The border-style of double.</div>

<div style="border-style:groove">The border-style of groove.</div>

<div style="border-style:inset">The border-style of inset.</div>

<div style="border-style:outset">The border-style of outset.</div>

<div style="border-style:ridge">The border-style of ridge.</div>

<div style="border-style:solid">The border-style of solid.</div>

</body>

<title>border-bottom的运用</title>

   </head>

<body>

<p style="border-bottom: 8px dotted blue;">

preserve their history is to recount it as sagas.

</p>

<p>Next paragraph</p>

</body>

<title>浏览器对待background-color的不同</title>

<style type="text/css">

<!--

.chara1{

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

}

.tableborder{

border:1px solid #000000;

}

.cell{

border:10px dashed #000000;

text-align:center;

background-color:#e799f8;

}

-->

</style>

   </head>

<body>

<table cellpadding="10" cellspacing="25" class="chara1 tableborder">

<tr>

<td class="cell" height="80px" width="120px">content</td>

</tr>

</table>

</body>

10.2.3padding

<title>padding-bottom的运用</title>

   </head>

<body>

<p style="border-bottom: 8px dotted blue; padding-bottom: 30px;">

We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.

</p>

<p>Next paragraph</p>

</body>

<title>padding</title>

<style type="text/css">

<!--

.outside{

padding:10px 30px 50px 100px; /* 同时设置，顺时针 */

border:1px solid #000000; /* 外边框 */

background-color:#fffcd3; /* 外背景 */

}

.inside{

background-color:#66b2ff; /* 内背景 */

border:1px solid #005dbc; /* 内边框 */

width:100%; line-height:40px;

text-align:center;

font-family:Arial;

}

-->

</style>

   </head>

<body>

<div class="outside">

<div class="inside">padding</div>

</div>

</body>

10.2.4maigin

<title>margin-bottom的运用</title>

   </head>

<body>

<p style="border-bottom: 8px dotted blue; padding-bottom: 30px; margin-bottom: 60px;">

We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.

</p>

<p>Next paragraph</p>

</body>

两个行内元素的margin

span.left{

margin-right:30px;

background-color:#a9d6ff;

}

span.right{

margin-left:40px;

background-color:#eeb0b0;

}

<body>

<span class="left">行内元素1</span><span class="right">行内元素2</span>

</body>

两个块级元素的margin

<body>

<div style="margin-bottom:50px;">块元素1</div>

<div style="margin-top:30px;">块元素2</div>

</body>

<title>父子块的margin</title>

<style type="text/css">

<!--

div.father{ /* 父div */

background-color:#fffebb;

text-align:center;

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

padding:10px;

border:1px solid #000000;

    height:180px; /* 设置父div的高度 */

}

div.son{ /* 子div */

background-color:#a2d2ff;

margin-top:30px;

margin-bottom:0px;

padding:15px;

border:1px dashed #004993;

}

-->

</style>

   </head>

<body>

<div class="father">

<div class="son">子div</div>

</div>

</body>

span.left{

margin-right:30px;

background-color:#a9d6ff;

}

span.right{

margin-left:-53px; /* 设置为负数 */

background-color:#eeb0b0;

}

10.3元素的定位

10.3.1Float定位

float:left; /* 块son1左浮动 */

10.3.2Position定位

position:absolute; /* absolute绝对定位 */

left:20px; /* 块的左边框离页面左边界20px */

top:40px; /* 块的上边框离页面上边界40px */

position:absolute; /* absolute绝对定位 */

right:75%; /* 块的右边框离页面右边界70% */

bottom:10%; /* 块的下边框离页面下边界10% */

position:absolute; /* absolute绝对定位 */

right:20px; left:30px; /* 同时设置4个位置 */

bottom:10%; top:10%;

<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>

<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; /* 子块1的左边框距离它原来的位置15px */

top:30px; /* 子块1的左边框距离它原来的位置30px */

}

#block2{

background-color:#ffc24c;

border:1px dashed #000000;

padding:10px;

position:relative; /* relative相对定位 */

left:10px; /* 子块2的左边框距离它原来的位置10px */

top:20px; /* 子块2的上边框距离它原来的位置15px */

}

-->

</style>

   </head>

<body>

<div id="father">

<div id="block1">relative</div>

<div id="block2">block2</div>

</div>

</body>

10.3.3z-index

z-index:1; /* 高低值1 */

z-index:0; /* 高低值0 */

z-index:-1; /* 高低值-1 */

10.4给图片签名

<title>轻轻松松给图片签名</title>

<style type="text/css">

<!--

body{

margin:15px;

font-family:Arial;

font-size:12px;

font-style:italic;

}

#block1{

padding:10px; /* 给图片加框 */

border:1px solid #000000;

float:left;

}

#block2{

color:white;

padding:10px;

position:absolute;

left:255px; /* 移动到图片上 */

top:205px;

}

-->

</style>

   </head>

<body>

<div id="father">

<div id="block1"><img src="building4.jpg" border="0"></div>

<div id="block2">isaac photo</div>

</div>

</body>

 

<title>文字阴影效果</title>

<style type="text/css">

<!--

body{

margin:15px;

font-family:黑体;

font-size:60px;

font-weight:bold;

}

#block1{

position:relative;

z-index:1;

}

#block2{

color:#AAAAAA; /* 阴影颜色 */

position:relative;

top:-1.06em; /* 移动阴影 */

left:0.1em;

z-index:0; /* 阴影重叠关系 */

}

-->

</style>

   </head>

<body>

<div id="father">

<div id="block1">CSS定位阴影</div>

<div id="block2">CSS定位阴影</div>

</div>

</body>

 posted on 2008-12-12 12:38  李要南  阅读(196)  评论(0)    收藏  举报