Catherine_zhilin

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
HTML 5--implementing the class selector（一）

 

1.

<!doctype html><html>
<head>
<style>
    p{
        font-size: 20px;
        color: red;
        font-weight: bold;
    }
    h1{
        font-size: 20px;
        color: green;
        font-weight: bold;
    }
    h2{
        font-size: 20px;
        color: blue;
        font-weight: bold;
    }
    </style>
</head>

<body>
<h1>Welcome to BookYourHotel website.</h1>
<h2>This site is very friendly.</h2>
<p>This site gives information of all the hotels in USA.<p>
<p>You can book your hotel while sitting in your room.<p>

</body>
</html>

测试结果：

2.引用类：

 1 <!doctype html><html>
 2 <head>
 3 <style>
 4     .color1{
 5         color: blue;
 6     }
 7     p.color2{
 8         color: red;
 9     }
10     </style>
11 </head>
12 
13 <body>
14 <h4 class="color1">Welcome to BookYourHotel website.</h4>
15 <p class="color1"> Provides online  booking of domestic and international hotels.</p>
16 <P class="color2"> Avail great discounts and offers</P>
17 </body>
18 </html>

测试结果：

3.Styling HTML Elements:

 1 <!doctype html><html>
 2 <head>
 3 </head>
 4 
 5 <body>
 6 <h1>About Us</h1><hr>
 7 <p>BookYourHotel is the most trusted name int the destination management industry. </p>
 8 <p>In addition, we have our presence across all the major cities in the US and Europe.  </p>
 9 <p>We are one of the pinoeers for hotel booking.Currently we are operating out of our head office in chicago.</p>
10 <ul>
11     <li>Alabama</li>
12     <li>Floroda</li>
13     <li>California</li>
14     <li>Colorado</li>
15     <li>Texas</li>
16     <li>New York</li>
17     
18 </ul>
19 <p>123</p>
20 <p>456</p>
21 <a href="html5-2/chap2.html">BookYourHotel</a>
22 </body>
23 </html>

测试结果：

点击后可以进行页面跳转.

 

posted on 2018-04-25 10:51  kkkshiki  阅读(119)  评论(0)    收藏  举报