search

zilongxuan001 / LearnFreecode

0 stars 0 forks source link

chapter1:理解HTML #330

Closed zilongxuan001 closed 6 years ago

zilongxuan001 commented 6 years ago

制作Starbuzz网站

制作文本版本

  1. 将文字输入到notepad中，【编码】选择【以utf-8格式编码】，保存为index.html。 
    
Starbuzz Coffee Beverages

House Blend, $1.49 A smooth, mild blend of coffees from Mexico, Bolivia and Guatemela.

Mocha Cafe Latte, $2.35 Espresso, steamed milk and chocolate syrup.

Cappuccino, $1.89 A mixture of expresso, steamed milk and foam.

Chai Tea, $1.85 A spicy drink made with black tea, spices, milk and honey.



2.双击打开index.html，在浏览器中显示如下
![image](https://user-images.githubusercontent.com/19257507/39911655-be768050-552e-11e8-903d-4d9a81f795af.png)

来源：
《Head First HTML与CSS》，Elisabeth Robson & Eric Freeman 著，徐阳 丁晓峰等译，第二版 O‘REILLY 
 Media, Inc 授权中国电力出版社出版，2013年9月。
zilongxuan001 commented 6 years ago

加上HTML标记

添加<h>``<p>元素

添加<html>、<head>、<title>、<body>元素

<html>
    <head>
        <title>Starbuzz Coffee</title>  
    </head>

<body>
    <h1>Starbuzz Coffee Beverages</h1>

    <h2>House Blend, $1.49</h2>
    <p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemela.
</p>

    <h2>Mocha Cafe Latte, $2.35</h2>
    <p>Espresso, steamed milk and chocolate syrup.</p>

    <h2>Cappuccino, $1.89</h2>
    <p>A mixture of expresso, steamed milk and foam.</p>

    <h2>Chai Tea, $1.85</h2>
    <p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>

</html>

效果如下 image

资料来源： 《Head+First+HTML与CSS（第2版）》，P23 image

zilongxuan001 commented 6 years ago

制作一个mission页面

制作一个mission页面，保存为mission.html

<html>
    <head>
        <title>Starbuzz Coffee's Mission</title>
    </head>

<body>
<h1>Starbuzz Coffee's Mission</h1>

<p>To provide all the caffeine that you need to power your life.</p>

<p>Just drink it.</p>

</body>
</html>

浏览器显示如下 image

zilongxuan001 commented 6 years ago

增加<style>元素

资料来源 《Head+First+HTML与CSS（第2版）》，P29 image

zilongxuan001 commented 6 years ago

添加CSS

在style里加上body的属性。

<html>
    <head>
        <title>Starbuzz Coffee</title>
        <style type="text/css">
            body{
                background-color: #d2b48c;
                margin-left: 20%;
                margin-right: 20%;
                border: 2px dotted black;
                padding: 10px 10px 10px 10px;
                font-family: sans=serif;
            }
        </style>
    </head>

<body>
    <h1>Starbuzz Coffee Beverages</h1>

    <h2>House Blend, $1.49</h2>
    <p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemela.
</p>

    <h2>Mocha Cafe Latte, $2.35</h2>
    <p>Espresso, steamed milk and chocolate syrup.</p>

    <h2>Cappuccino, $1.89</h2>
    <p>A mixture of expresso, steamed milk and foam.</p>

    <h2>Chai Tea, $1.85</h2>
    <p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>

</html>

结果如下 image

资料来源： 《Head+First+HTML与CSS（第2版）》，P31 image

zilongxuan001 commented 6 years ago

更新mission页面

在mission.html里添加css的body属性。

<html>
    <head>
        <title>Starbuzz Coffee's Mission</title>
        <style type="text/css">
            body{
                background-color: #d2b48c;
                margin-left: 20%;
                margin-right: 20%;
                border: 2px dotted black;
                padding: 10px 10px 10px 10px;
                font-family: sans=serif;
            }
        </style>
    </head>

<body>
<h1>Starbuzz Coffee's Mission</h1>

<p>To provide all the caffeine that you need to power your life.</p>

<p>Just drink it.</p>

</body>
</html>

效果如下 image