首页 百科知识 从实例中,理解,,的区别

从实例中,理解,,的区别

时间:2023-09-22 百科知识 版权反馈
【摘要】:


代码:

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>实例2</title>

<style>  

 #container{

width: 1000px;

background-color: #98F5AD;

}

   #header{

height: 100px;

}

  #main{

height: 1000px;

background-color: #09F;

}

 #footer{

height: 100px;

}

#right{

float: right;

width: 800px;

height: 1000px;

background-color: #BBFFFF;

}

#left{

float: left;

width: 200px;

height: 1000px;

background-color: #0099FF;

}

#up{

width: 500px;

height: 200px;

background-color: #0099FF;

margin:10px;

}

#mid{

width: 500px;

height: 200px;

background-color: #CCFF99;

padding: 10px;

}

#down{

width: 500px;

height: 200px;

border-style: solid;

background-color: #FF9999;

border-top-width: 10px;

border-right-width: 10px;

border-bottom-width: 10px;

border-left-width: 10px;

border-top-color: #0CF;

border-right-color: #C3C;

border-bottom-color: #06C;

border-left-color: #F00;

}

</style>

</head>


<body>

<div id=container>

 <div id=header> </div>

 <div id=main>

   <div id=right> 

      <div id=up> 我有margin值</div>

      <div id=mid> 我有padding值</div>

       <div id=down> 我有border值</div>

  </div>

   <div id=left>我是左边</div>

  </div>

 <div id=footer> </div>

</div>

</body>

</html>


免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈