XML:CSS基础之五

LIST.XML

<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="list.css"?>
<!--本学期教材列表-->
<menu>
<dish>
<name>清蒸鲈鱼</name>
<seasoning>原料
<seas>鲈鱼</seas>
<seas>葱丝</seas>
<seas>姜丝</seas>
<seas>盐</seas>
<seas>蒸鱼豉油</seas>
</seasoning>
<method>
<img1/>
做法：1.鲈鱼洗干净后加绍酒、少许盐、葱丝、姜丝腌制15分钟，随后再冲洗干净，去去腥味；2.将鲈鱼从尾部切开成蝴蝶状，再从背部切一刀铺在盘子里，并在鱼身下铺上葱姜丝，开水上锅蒸5-6分钟关火焖2分钟.将盘子里的汤汁倒掉，浇上蒸鱼豉油，撒上葱丝，最后浇上热油就好啦.虽然切的不是很好，但是能缩短蒸鱼的时间，散热均匀，鱼肉不会老。</method>
</dish>

<dish>
<name>培根金针菇卷</name>
<seasoning>原料
<seas>金针菇</seas>
<seas>培根</seas>
<seas>香葱</seas>
<seas>泰式甜辣酱</seas>
</seasoning>
<method>
<img2/>
做法：将培根把洗干净的金针菇，香葱段卷起来，有牙签固定，摆在刷过油的烤盘上;烤箱预热200°，将做好的培根卷入烤箱烤15分钟，中间翻1、2次.烤好取出摆盘，随甜辣酱一起上桌，蘸酱,非常好吃。</method>
</dish>

<dish>
<name>凉拌丝腐竹</name>
<seasoning>原料
<seas>丝腐竹</seas>
<seas>黄瓜</seas>
<seas>蒜末</seas>
<seas>盐</seas>
<seas>醋</seas>
<seas>香油</seas>
<seas>鸡精</seas>
<seas>葱丝</seas>
</seasoning>
<method>
<img3/>
做法：丝腐竹用热水泡开后过凉水，控干水备用；黄瓜切丝，将所有的材料混合拌均就好。丝腐竹是豆制品，味道和腐竹有些类似，只是做法更简单,也挺好吃的。</method>
</dish>
</menu>

 

LIST.CSS

menu {
 display: block;
 font-family: "宋体";
 font-size: 11pt;
}
dish {
 display: block;
 font-family: "宋体";
 font-size: 11pt;
 line-height: 1.2em;
 border: thin dotted #666600;
 width: 500px;
 margin: 20px;
 padding: 20px;
}
name {
 display: block;
 font-family: "宋体";
 font-size: 12pt;
 text-align: center;
 font-weight: bolder;
}
seasoning{
 display: block;
 font-family: "宋体";
 font-size: 11pt;
}
seas {
 display: list-item;
 font-family: "宋体";
 font-size: 11pt;
 list-style-position: inside;
 list-style-type: circle;
 color: #009966;
}
method{
 display:block;
 height: 220px;
 width: 460px;
 margin: 5px;
 padding: 5px;
 text-align: justify;
 text-justify:inter-ideograph;
}
img1{
 display:block;
 height: 200px;
 width: 240px;
 background-image: url(pic/246708f04d49e0bfa40f52b5.jpg);
 float: right;
}
img2{
 display:block;
 height: 180px;
 width: 220px;
 background-image: url(pic/6457ecdde95713245982ddfd.jpg);
 float: right;
}
img3{
 display:block;
 height: 180px;
 width: 220px;
 background-image: url(pic/4765e813f6fe70906438db62.jpg);
 float: right;
}

 效果演示如下: