做简单的事,简单的事重复做.......
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>茶叶文化网站</title>
<link href="style/css2-7.css" rel="stylesheet" type="text/css" />
<link href="style/div2-7.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<!-- 为保证图片显示不失真,width,height与图片的宽,高一致;-->
<div id="top"><img src="images/2502.jpg" width="950" height="379" /></div>
<div id="main">
<div id="main-left"><img src="images/2503.png" width="258" height="180" /><br />
<span class="font01">百佳妍迷迭香茶</span><br />
用迷迭香来泡茶,其强烈香气会随热水的浸泡而扩散到茶雾之中,有令人清醒的功效。身心疲劳,头脑昏沉的时候来上这样一杯茶,迷迭香将会在体内释放源源不断的活力,精神也为之振奋起来。迷迭香草中含有的益于人体健康的物质能促进血液循环、强化血管,所以迷迭香茶又有"回春茶"之称,它还活化脑部,提高记忆力,早上喝它会觉得神清气爽,充满活力。</div>
<div id="main-main"><img src="images/2504.png" width="258" height="180" /><br />
<span class="font01">七彩云南醇香袋泡茶</span><br />
七彩云南醇香普洱茶,汤色绝妙,芳香诱人,醇香回甘,美味悠长;醇香普洱精选上等普洱,提取一叶一芽之精华,以非常品质带来非常滋味,非常健康!地道普洱熟茶,感觉温暖柔和,散发熟茶特有悠悠的陈香。将普洱茶大叶肥壮的条索切细筛分为颗粒状,使得品质优异,香郁持久,味美纯然。现代商务精英首选,简约品位,在享受醇香四溢的同时获得纯正普洱茶的关爱。 </div>
<div id="main-right"><img src="images/2505.png" width="258" height="188" /><br />
<span class="font01">中茶大国茶园滇红茶</span><br />
滇红的品饮多以加糖加奶调和饮用为主,加奶后的香气滋味依然浓烈。冲泡后的滇红茶汤红艳明亮,高档滇红,茶汤与茶杯接触处常显金圈,冷却后立即出现乳凝状的冷后浑现象,冷后浑早出现者是质优的表现。滇红工夫茶最大的特征为茸毫显露,毫色分淡黄、菊黄、金黄。凤庆、云昌等地生产的滇红工夫茶,毫色呈菊黄;临沧、勐海等地所产,毫色则多为金黄。 </div>
</div>
<div id="bottom"><br />
关于我买网<span>│</span>送货范围<span>│</span>退换货政策<span>│</span>媒体报道<span>│</span>友情链接<span>│</span>联系我们<span>│</span>招聘信息
<br/>
Copyright@2021 All Rights Reserved 托普朗宁(北京)教育科技有限公司版权所有 <br/>
技术支持:托普朗宁(北京)教育科技技术有限公司</div>
</div>
</body>
</html>
对应的css文件:
// 样式文件 css2-7.css
@charset "utf-8";
/**
先大道小; 所有的
*/
* {
margin: 0px;
padding: 0px;
border: 0px;
}
/**
本页面的body标签
*/
body {
font-family: "宋体";
font-size: 12px;
color: #666666;
background-image: url("../images/2501.jpg");
background-repeat: repeat-x;
}
.font01 {
font-family: "微软雅黑";
font-size: 18px;
color: #5ca900;
line-height: 30px;
}
// 样式文件div2-7.css
@charset "utf-8";
/*margin:auto; 四周的外补丁平均,自动适应*/
#box {
width: 1007px;
height: auto;
margin: auto;
}
/**
ctrl+shift +/ 注释单行,有相同的样式,遵循就进生效法则
*/
#top {
width: 950px;
height: 375px;
margin: auto;
}
#main {
width: 1042px;
height: 400px;
margin: auto;
}
/*float: left;左浮动,最外层的height现在内层的div高度*/
#main-left {
width: 258px;
height: 400px;
float: left;
line-height: 20px;
margin: 0px 35px 0px 35px;
}
#main-main {
width: 258px;
height: 400px;
float: left;
line-height: 20px;
margin: 0px 35px 0px 35px;
}
#main-right {
width: 290px;
height: 400px;
float: left;
line-height: 20px;
margin: 0px 35px 0px 35px;
}
#bottom {
width: 1007px;
height: 89px;
color: #000;
text-align: center;
line-height: 20px;
background-image: url("../images/2506.png");
background-position: center bottom;
background-repeat: repeat-x;
margin-top: 20px;
border-top: #093 dashed 1px;
}
效果图如下: