一、用到的基本知识点
主要用到html中盒模型、浮动、表格布局和表单相关的一些基本知识，和css样式中的一些样式渲染等。
二、效果图
三、主程序代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>starbuzz coffee</title> <link rel="stylesheet" type="text/css" href="coffee.css"> </head> <body> <div id="banxin"> <header> <img src="images1/headerlogo2.gif"> <img id="right" src="images1/headerSlogan.gif"> </header> <nav> <ul> <li id="selected"><a href="">HOME</a></li> <li><a href="BLOG.html">BLOG</a></li> <li><a href="dingdan.html">ORDER</a></li> <!-- <li><a href="">RECIPES</a></li> <li><a href="">LOCATIONS</a></li> --> </ul> </nav> <div id="tablecontain"> <div id="tablerow"> <section id="leftside"> <h1>BEVERAGES</h1> <P>House Blend, $1.49</P> <p>Mocha Cafe Latte, $2.35 </p> <p>Cappuccino, $1.89 </p> <p>Chai Tea, $1.85</P> <h1>ELIXIRS</h1> <P>We proudly serve elixirs brewed by our friends at the Head First Lounge.</p> <p>Green Tea Cooler, $2.99 </p> <p>Raspberry Ice Concentration, $2.99 </p> <p>Blueberry Bliss Elixir, $2.99</p> <p>Cranberry Antioxidant Blast, $2.99 </p> <p>Chai Chiller, $2.99 </p> <p>Black Brain Brew, $2.99</P> </section> <section id="main"> <h1>QUALITY COFFEE, QUALITY CAFFEINE</h1> <p>At Starbuzz Coffee, we are dedicated to filling all your caffeine needs through our quality coffees and teas. Sure, we want you to have a great cup of coffee and a great coffee experience as well, but we're the only company that actively monitors and optimizes caffeine levels. So stop by and fill your cup, or order online with our new Bean Machine online order form, and get that quality Starbuzz coffee that you know will meet your caffeine standards.</p> <p>And, did we mention caffeine? We've just started funding the guys doing all the wonderful research at the Caffeine Buzz. If you want the latest on coffee and other caffeine products, stop by and pay them a visit.</p> <h1>OUR STORY</h1> <p>"A man, a plan, a coffee bean". Okay, that doesn't make a palindrome, but it resulted in a damn good cup of coffee. Starbuzz's CEO is that man, and you already know his plan: a Starbuzz on every corner.</p> <p>In only a few years he's executed that plan and today you can enjoy Starbuzz just about anywhere. And, of course, the big news this year is that Starbuzz teamed up with Head First readers to create Starbuzz's Web presence, which is growing rapidly and helping to meet the caffeine needs of a whole new set of customers.</p> <h1>STARBUZZ COFFEE BEVERAGES</h1> <p>We've got a variety of caffeinated beverages to choose from at Starbuzz, including our House Blend, Mocha Cafe Latte, Cappuccino, and a favorite of our customers, Chai Tea.</p> <p>We also offer a variety of coffee beans, whole or ground, for you to take home with you. Order your coffee today using our online Bean Machine, and take the Starbuzz Coffee experience home.</p> </section> <section id="rightside"> <div id="tuxing"> <p> <img src="images1/bag.gif"><br> ORDER ONLINE with the <a href="">BEAN MACHINE </a><br> <span id="rightside1">FAST <br> FRESH <br> TO YOUR DOOR <br> </span> </p> </div> <p>Why wait? You can order all our fine coffees right from the Internet with our new, automated Bean Machine. How does it work? Just click on the Bean Machine link, enter your order, and behind the scenes, your coffee is roasted, ground (if you want), packaged, and shipped to your door.</p> </section> </div> </div> <footer> <p>© 2012, Starbuzz Coffee</p> <p>All trademarks and registered trademarks appearing on this site are the property of their respective owners.</p> </footer> </div> </body> </html>
css样式程序
*{ padding:0; margin: 0; } body{ background-color:#b5a789; font-family:Georgia, "Times New Roman", Times, serif; font-size: small; margin: 0px; } header{ background-color: #675c47; margin:10px; } #right{ float:right; } nav{ background-color: #efe5d0; margin:0px 10px; /*height:30px;*/ } nav ul{ list-style-type: none; margin:0px; padding:5px 0px; } nav ul li{ display: inline; padding:5px 10px; } nav ul li a:link,nav ul li a:visited{ text-decoration: none; /*border-bottom:none;*/ color:#954b4b; font-weight:bold; } li#selected{ background-color: #c8b99c; } #tablecontain{ display:table; border-spacing: 10px; } #tablerow{ display:table-row; } #leftside,#main,#rightside{ display: table-cell; background: #efe5d0 url(images/background.gif) top left; vertical-align: top; font-size: 105%; padding: 30px 15px 15px 15px; } #leftside{ width:20%; } #tuxing{ text-align: center; line-height: 1.8em; } #rightside1{ color: #954b4b; } section h1{ font-size: 120%; color: #954b4b; } section p{ margin:10px 0px; } footer{ background-color: #675c47; margin:0px 10px 10px 10px; padding:15px; text-align: center; font-size: 90%; color:#efe5d0; } #rightside a{ color: #954b4b; text-decoration: none; border-bottom: thin dotted #b76666; } time{ line-height: 40px; }