<!DOCTYPE html>
<html>
<head>
<title>美食乐园</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="content">
<h1>水果饮料和小吃</h1>
<p>果汁(浆)及果汁饮料(品)类。它的定义为用新鲜或冷藏水果为原料，经加工制成的制品。果汁(浆)及果汁饮料(品)类也可以细分为果汁、果浆、浓缩果浆、果肉饮料、果汁饮料、果粒果汁饮料、水果饮料浓浆、水果饮料等9种类型，其大都采用打浆工艺将水果或水果的可食部分加工制成未发酵但能发酵的浆液或在浓缩果浆中加入果浆在浓缩时失去的天然水分等量的水，制成的具有原水果果肉的色泽、风味和可溶性固形物含量的制品。</p>
<p>果汁饮料是指从新鲜水果榨汁而成的一种饮料。各种不同水果的果汁含有不同的维生素等营养，而被视为是一种对健康有益的饮料，但其缺乏水果所有的纤维素和过高的糖分有时被视为其缺点。各种常见果汁：苹果汁、 葡萄柚汁、 奇异果汁 、芒果汁 、凤梨汁 、西瓜汁 、葡萄汁 、蔓越莓汁、 柳橙汁、 椰子汁 、柠檬汁 、哈密瓜汁 、草莓汁 、木瓜汁 。</p>
<p>甜品的种类十分多样，豆类的有红豆沙、绿豆沙； [1] 糊类的有芝麻糊、杏仁糊、花生糊、核桃糊；药材类的有百合糖水、莲子糖水；牛奶类的有窝蛋奶、姜撞奶、双皮奶。另外，诸如银耳炖木瓜、芝麻汤圆、养颜西米露、黑糯米这样的甜食，也是糖水店里的常备之物。</p>
<div class="cleaner_h40"></div>
<div class="box_w270 float_l">
<h3>鲜榨果汁</h3>
<div class="image_wrapper">
<a href="#"><img src="D:\ttt\img\img2.PNG" alt="image"></a>
</div>
<p>鲜榨果汁：鲜榨的果汁是果汁中营养价值最高的，既新鲜，又不会在榨取过程中丢失营养物质。没有添加物质，含糖量少，自己可以选择适合孩子的水果，如橙子、柠檬、胡柚、猕猴桃和芒果等，它们含有丰富的维生素，可以增强免疫功能，适合各年龄组儿童。鲜榨的果汁在榨汁过程中容易受到污染，没有防腐剂，也不易存放，应随榨随饮。</p>
<div class="button"><a href="products.html">详细</a></div>
</div>
<div class="box_w270 float_r">
<h3>甜品小吃</h3>
<div class="image_wrapper">
<a href="#"><img src="D:\ttt\img\img1.PNG" alt="image"></a>
</div>
<p>华夫饼，又叫格子饼、格仔饼。是一种烤饼，源于比利时，用配有专用烤盘的烤炉制成。
华夫饼属于点心类，主要原料是鸡蛋和牛奶，含有丰富的蛋白质、脂肪、维生素和铁、钙、钾等人体所需要的矿物质。</p>
<div class="button"><a href="products.html">详细</a></div>
</div>
</div>
<div class="cleaner"></div>
</div>
<div class="cleaner"></div>
</div>
</body>
</html>
body{
margin: 0px;
padding: 0px;
color: #333333;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 13px;
line-height: 1.5em;/*设置行高是字符的1.5倍*/
background-color: #ede4bb;
}
a,a:link,a:visited{/*设置超链接及访问过链接的样式*/
columns: #7c0d0b;
}
a:hover{/*设置鼠标悬停链接的样式*/
color: #996600;
text-decoration:none;
}
p{
margin: 0px;
padding: 0 0 10px 0;
}
img{
border: none;
}
h1,h3{/*设置h1标题和h3标题共同的样式*/
font-weight: normal;
}
h1{/*设置h1标题独立的样式*/
font-size: 40px;
color: #000000;
margin: 0 0 30px 0;
padding: 5px 0;
}
h3{/*设置h3标题独立的样式*/
font-size: 21px;
color: #000;
margin: 0 0 20px 0px;
padding: 0;
}
.cleaner{
clear: both;
}
.cleaner_h40{
clear: both;
height: 40px;
}
.float_l{
float: left;
}
.float_r{
float: right;
}
.image_wrapper{
padding: 8px;
border: 1px solid #cccccc;
background: #ffffff;
}
.button a{/*按钮超链接的样式*/
clear: both;
display: block;/*块级元素*/
width: 92px;
height: 24px;
padding: 4px 0 0 0;
background: url("D:\ttt\img\button1.PNG");
color: #cccccc;
font-weight: bold;
font-size: 11px;
text-align: center;
text-decoration: none;
}
.button a:hover{
color: #ffffff;
background: url("D:\ttt\img\button2.PNG");
}
#wrapper{
position: relative;
width: 980px;
padding: 0 5px;
margin: 0 auto;
}
#main{
clear: both;
padding: 20px 40px;
}
#content{
float:right;
width: 600px;
padding-bottom: 90px;
}
.box_w270{
width: 270px;
}
