第六章盒子模型

71 阅读 0 评论 47 点赞

我是靠谱客的博主犹豫火车，最近开发中收集的这篇文章主要介绍第六章盒子模型，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

课堂练习

<!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>无标题文档</title>
<style type="text/css">
.ull{
	width:230px;
	height:80px;
	background-color:#0F3;
	border: 5px;
	border-top-color: #09F;
	border-right-color: #F39;
	border-bottom-color: #96F;
	border-left-color: #F0F;
	border-top-style: dashed;
	border-right-style: dashed;
	border-bottom-style: dashed;
	border-left-style: dashed;
	margin: 6px   auto;
	padding: 10px  ;
	text-align:center
	
	}
	.do{
	border-color: #C09;
	border-top-color: #9FF;
	border-right-color: #C6F;
	border-bottom-color: #FC3;
	border-left-color: #F99;
	border-top-style: dashed;
	border-right-style: dashed;
	border-bottom-style: dashed;
	border-left-style: dashed;
		}
</style>
</head>
<body  class="do">
<div  class="ull">人生若是无误,铅笔何须橡皮!</div>
<div  class="ull">人生若是无误,铅笔何须橡皮!</div>
<div  class="ull">人生若是无误,铅笔何须橡皮!</div>

</body>
</html>


练习五

<!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>美容热点产品</title>
<style  type="text/css">
    .do{
	background-color: #F09;
	color: #FFF;
	font-size: 24px;
	
	}
  .r{
	width:400px;
	height:45px;
	font-size: 18px;
	border-bottom-style: dashed;
	margin:0px;
	padding:0px;
	background-color: #FFF;

	}
   a span{
	background-repeat: no-repeat;
	background-position: right;
	background-image: url(dot_01.gif);
	padding: 0px   8px;
	color: #FFF;
	   }
	   
	
	  a:hover span{
	 color:#F0F;
		   }  
		   a:hover{
	 color:#F0F;
		   }  
	   ul{list-style-type:none;}
	   ul li a{text-decoration:none;
	  
	   }
	 
	
</style>
</head>
<body>
<div  class="do">大家都喜欢买的美容品</div>
<ul  >
<li class="r"><a  href="#" ><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a></li>
<li class="r"><a  href="#" ><span>2</span> 伊丽莎白雅顿显效复合活肤霜75ml</a></li>
<li class="r"><a  href="#" ><span>3</span>OLAY玉兰油多效修护霜 50g</a></li>
<li class="r"><a  href="#" ><span>4</span>倩碧保湿洁肤水2号 200ml</a></li>
<li class="r"><a  href="#" ><span>5</span>比度克细肤淡印霜 30g</a></li>
<li class="r"><a  href="#" ><span>6</span>兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a></li>
<li class="r"><a href="#" ><span>7</span>SK-II护肤精华露 215ml</a></li>
<li class="r"><a  href="#" ><span>8</span>欧莱雅青春密码活颜精华肌底液</a></li>

</ul>
</body>
</html>

练习三

</pre><pre class="html" name="code"><!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>彩妆热卖产品列表</title>
<style  type="text/css">
.tt{
	border: 10px groove #000;
	
	}
	ul{  list-style-type: none;
	}
	ul li a  {
	text-decoration: none;		
		}
.title{
	background-repeat: no-repeat;
	color: #FFF;
	background-position: 0px 0px;
	background-color: #F0F;
	border-bottom-style: double;	
	}
	a span{
	background-repeat: no-repeat;
	background-position: right;
	background-image: url(dot_01.gif);
	padding: 0px   8px;
	color: #FFF;
		}
	  li  div{
	display:none;
	
			}
	   a:hover  div{
		
		display:block;
		}
		 a:hover  {
		
		
		color:#0FF;
		} a:hover span{
		
		color:#0FF;
		} 
	
	
			
</style>
</head>
<body>
<div  id="tt">
<p  class="title">大家都喜欢的彩妆</p>
<ul>
<li><a href="#"><span>1</span> Za姬芮新能真皙美白隔离霜 35g 
<div id="r" ><img src="icon-1.jpg"  alt="Za姬芮新能真皙美白隔离霜" />
<p>￥62.00 最近69122人购买</p>
</div>
</a></li>
<li><a  href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml 
<div><img src="icon-2.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜 " />
<p>￥89.00 最近13610人购买</p>
</div>
</a></li>
<li><a  href="#"><span>3</span>菲奥娜水漾CC霜40g 
<div><img src="icon-3.jpg"alt="菲奥娜水漾CC霜" />
<p>￥59.90 最近13403人购买</p>
</div>
</a></li>
<li><a  href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml
<div><img src="icon-4.jpg"
alt="蝶翠诗橄榄卸妆油" />
<p>￥169.00 最近16757人购买</p>
</div>
</a></li>

</ul>
</body>
</html>