starbuzz coffee 网页练习

Posted 2020-10-26 春暖花未开

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了starbuzz coffee 网页练习相关的知识，希望对你有一定的参考价值。

一、用到的基本知识点

主要用到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;
}

以上是关于starbuzz coffee 网页练习的主要内容，如果未能解决你的问题，请参考以下文章

列表练习题简单购物车

HTML代码片段

spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

如何在html中自动暂停视频？

Python练习册第 0013 题：用 Python 写一个爬图片的程序，爬这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)(代码片段