下面,大家来了解一下一份完整的CSS样式应用教案:
<html> <head> <style> /*样式表*/ p { font-size: 16px; line-height: 1.5; color: #333; } .container { width: 960px; margin: 0 auto; } .box { width: 200px; height: 200px; background-color: #ccc; margin: 20px; float: left; } .box-title { font-size: 20px; font-weight: bold; padding: 10px 0; text-align: center; } </style> </head> <body> <div class="container"> <div class="box"> <h4 class="box-title">Box 1</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum tristique libero a mattis. Etiam pellentesque libero ac condimentum bibendum. Ut luctus eget magna in suscipit. Vivamus sit amet sapien nec lacus euismod consectetur.</p> </div> <div class="box"> <h4 class="box-title">Box 2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum tristique libero a mattis. Etiam pellentesque libero ac condimentum bibendum. Ut luctus eget magna in suscipit. Vivamus sit amet sapien nec lacus euismod consectetur.</p> </div> </div> </body> </html>
在这份教案中,大家使用了p、div等标签,并对它们应用了不同的CSS样式,使得网页展现出一定的美观和规整性。