第六章 盒子模型
2016-10-18 19:12
375 查看
课堂练习
<!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>
<bod
a265
y>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 