1. Design upper, middle and lower formats
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
body{font-family: "Song style";font-size: 12px;}
.big{width: 800px;margin: 0 auto 0 auto;}
.up{width: 800px;height: 100px;background-image: url(3.jpg);background-repeat: no-repeat;}
.middle{background-color: #66CCFF;margin-top: 10px;}
.bottom{background-color: #CCCCCC;height: 80px;text-align: center;}
</style>
</head>
<body>
<div class="big">
<div class="up">
<p><a href="#">home page</a><a href="#">Market dynamics</a><a href="#">Latest Products</a><a href="#">About us</a><a href="#Contact us</a></p>
</div>
<div class="middle">
<br><h1>Camry lowest 16.78 Renewal of the price war between Wanzhong and Senior Vehicles</h1>
<p>16.75 Ten thousand yuan! Even back at the beginning of the year, the lowest price of Guangzhou Auto Camry (Tuku Forum) is still hard to imagine, but recently, it has become a reality. Five Guangzhou Auto Toyota dealers in Hangzhou are currently launching joint promotional campaigns. Camry's All-car model is priced at the factory's guideline price of 18..28-28.38 10,000 yuan discount.5 Ten thousand yuan, with a car gift package.</p>
<p>This is the first time that Camry's price has fallen below 170,000 yuan since it went public in June 2006. It is also the first time that Camry's price has fallen to 14,000 yuan after Mazda 6 (Tuku Forum)..98 Ten thousand yuan later, the price of Hangzhou's medium and high-grade cars has gone to the bottom again.</p>
</div>
<div class="bottom">
<br><p><a href="#">home page</a><a href="#">Market dynamics</a><a href="#">Latest Products</a><a href="#">About us</a><a href="#Contact us</a></p>
<p>2010©Technical Support of Shanghai Runfei Information Technology Co., Ltd.</p>
</div>
</div>
</body>
</html>2. Designing a fixed width and centered style
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
.big{width: 1000px;margin: 0 eauto 0 auto;}
.nav{background-color: #C2E3E9;width: 1000px;height: 25px;}
.main{width: 1000px;height: 600px;}
.left{width: 220px;float: left;height: 600px;text-align: center;}
.right{width: 550px;float: left;height: 600px;border-left: #CCCC00 solid;}
.right .wen{width: 600px;margin: 0 auto 0 auto;}
.foot{height: 15px;background-color: #CCCCCC;text-align: center;}
.logo{width: 1000px;height: 160px;background-image: url(4.jpg);text-align: center;}
</style>
</head>
<body>
<div class="big">
<div class="logo"> <h1> tea website </h1> </div>
<div class="nav">
<p>& nbsp; & <a href="#">> homepage </a> <a href= "\#">>>>>> green tea knowledge </a> <a href= (\\\\\\\\\\\\href="">Teaware Knowledge</a>
</p></div>
<div class="main">
<div class="left"><img src="5.jpg">
<p> Disease prevention: black tea has strong antimicrobial activity. Black tea vomiting can prevent colds caused by filtered viruses, prevent tooth decay and food poisoning, and reduce blood sugar and hypertension. </p>
<img src="8.jpg">
<p> In spring, when everything recovers, it is advisable to drink scented tea to drive away the cold evil and promote the rising of Yang qi; in summer, it is hot and humid. The human body consumes more, so it is suitable to drink green tea, which has the effect of relieving heat and heat.</p>
</div>
<div class="right">div class="wen">h1> reducing fat and weight, preventing cardiovascular and cerebrovascular diseases</h1>
<p> Reduce fat and weight, prevent cardiovascular and cerebrovascular diseases. The relationship between tea drinking and weight loss is very close, "Shennong Materia Medica" as early as 2,000 years ago has mentioned the role of tea in weight loss: "long-term serving peace of mind and benefiting qi...... light body and not old". Modern scientific research and clinical trials have proved that drinking tea can reduce blood lipids and cholesterol and make the body lighter. This is due to the synthetical coordination of phenolic derivatives, aromatic substances, amino acids and vitamins in tea, especially the synthetical action of tea polyphenols with tea element and vitamin C. It can promote fat oxidation, help digestion, reduce fat and lose weight. In addition, tea polyphenols can dissolve fat, while vitamin C can promote cholesterol excretion in vitro. Green tea itself contains tea ganning, tea Ganning is to improve vascular toughness, so that blood vessels are not easy to rupture. </p>
<h1> Cancer prevention</h1>
<p> Tea polyphenols and caffeine, which are the components of green tea, play a comprehensive role in not only refreshing and refreshing effect, but also in improving human immunity and anti-cancer effect. In recent years, the American Chemical Association has always found that tea not only inhibits cancer of digestive system, but also inhibits cancer of skin, lung and liver. It has been confirmed by scientific research that the main organic anticancer substances in tea are tea polyphenols, theophylline, vitamin C and vitamin E, and the inorganic anticancer elements in tea are X, X, X, X, X and so on. Chinese and Japanese scientists believe that catechins in tea polyphenols have the best anti-cancer effect.</p>
</div></div>
</div>
<div class="foot">p>Shanghai Runfei Network Information Technology Copyright All Rights Reserved </p></div>
</div>
</body>
</html>3. Designing the left, middle and right layout
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
.left{width: 200px;float: left;height: 500px;}
.middle{width: 800px;height: 500px;float: left;background-color: #FDFBCA;}
.right{width: 200px;float: left;height: 500px;text-align: center;background-color: #F4FAFB;}
.big{width: 1200px;margin: 0 eauto 0 auto;}
.middle .wen{width: 600px;margin: 0 auto 0 auto;}
.dh{font-size: 16px;font-style: solid;text-align: center;padding: 5;}
</style>
</head>
<body>
<div class="big">
<div class="left">
<div class="dh">
<ul>
<li><a href="#">Home page</a></li>
<li><a href="#Green Tea Knowledge</a></li>
<li><a href="#Black Tea Knowledge</a></li>
<li><a href="#">Teaware Knowledge</a></li>
</ul>
<h2 class="text-align: left;">Friendship Links</h2>
<ul>
<li><a href="#"> Playing with the Class Net</a></li>
<li><a href="#"> Playing with the Class Net</a></li>
<li><a href="#"> Playing with the Class Net</a></li>
<li><a href="#"> Playing with the Class Net</a></li>
</ul></div></div>
<div class="middle">
<div class="wen">
<h1>Reducing Fat and Weight and Preventing Cardiovascular and Cerebrovascular Diseases</h1>
<p>Reduce fat and weight, prevent cardiovascular and cerebrovascular diseases. The relationship between tea drinking and weight loss is very close, "Shennong Materia Medica" as early as 2,000 years ago has mentioned the role of tea in weight loss: "long-term comfort and Qi.....Lightweight is not old. Modern scientific research and clinical trials have proved that drinking tea can reduce blood lipids and cholesterol and make the body lighter. This is due to the synthetical coordination of phenolic derivatives, aromatic substances, amino acids and vitamins in tea, especially tea polyphenols with tea elements and vitamins. C In addition, tea polyphenols can dissolve fat and vitamins. C It can promote cholesterol excretion in vitro. Green tea itself contains tea ganning, tea Ganning is to improve vascular toughness, so that blood vessels are not easy to rupture.</p>
</div>
</div>
<div class="right">
<p><img src="1.jpg"></p>
<p><img src="6.jpg"></p>
<p><img src="7.jpg"></p>
</div>
</div>
</body>
</html>4. Background color and background picture of design block