HTML 5--Grouping and Nesting Styles

最新推荐文章于 2023-10-17 19:39:34 发布

ai516001066

最新推荐文章于 2023-10-17 19:39:34 发布

阅读量138

点赞数

原文链接：http://www.cnblogs.com/Catherinezhilin/p/8971313.html

版权

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5     h1{
 6         text-align: center;
 7     }
 8     </style>
 9 </head>
10 <body>
11 <h1>BookYourHotel</h1>
12 <ul>
13     <li><a href="html5-2/images/背景.jpg">About us</a></li>
14     <li><a href="html5-2/images/背景1.jpg">Rooms</a></li>
15     <li><a href="html5-2/images/背景2.jpg">Facilities</a></li>
16     <li><a href="html5-2/images/背景3.jpg">Contact Us</a></li>
17 </ul>
18 <hr>
19 <h3>Welcome to the Home page</h3>
20 <P> BookYourHotel welcome you with your warmth and a feeling that each quest is truly special.It offers a cozy and intimate experience amidst the glitz and glamour of South America.Our caring and courteous staffs are ever eager to ensure that all individual needs are cared for with professional expertise and a personal touch.</P>
21 <P>The rooms have been designed with different floor plans to create ensuite Bathrooms .</P>
22 
23 </body>
24 </html>

测试结果：

只有在紧接着<div>后面的<p>标志会变成蓝色

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5     div+p{background-color:blue;}
 6     </style>
 7 </head>
 8 <body>
 9 <h1>Welcome to the page.</h1>
10 <div>
11     <P>This is pagagraph 1</P>
12 </div>
13 <P>This is pagagraph 2</P>
14 
15 <p>This is pagagraph 3</p>
16 </body>
17 </html>

测试结果：

转载于:https://www.cnblogs.com/Catherinezhilin/p/8971313.html

ai516001066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 5--Grouping and Nesting Styles

1.示例代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 h1{ 6 text-align: center; 7 } 8 </style> 9 </head>10 <bo...
复制链接

扫一扫