2-2 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现让３个控制元素分别漂浮在面板的右侧，底部和右下角。效果如图：

温馨提示:
完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

一、为３个控制元素添加对应CSS样式

 

  提示:
  块级元素的宽度和高度如果设置为100%则会和父元素一样。
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. <title>慕课网-Resizable</title>
  8.  
  9. <style type="text/css">
  10.  
  11. 	body{
  12. 		margin: 0px;padding: 50px;font-size: 14px;color: #333;
  13. 	}
  14.  
  15. 	.panel{
  16. 		width: 400px;height: 240px;
  17. 		border:1px solid #ccc;
  18. 	}
  19.  
  20. 	.panel .title{
  21. 		background-color: #eee;text-align: center;line-height: 30px;
  22. 		border: 1px solid #fff;
  23. 		font-weight: bold;
  24. 	}
  25.  
  26. 	.ui-Resizable-r{
  27. 		/* 右侧控制元素样式　*/
  28.  
  29. 	}
  30. 	.ui-Resizable-b{
  31. 		/* 底边控制元素样式　*/
  32.  
  33. 	}
  34. 	.ui-Resizable-rb{
  35. 		/* 右下角控制元素样式　*/
  36. 	}
  37. </style>
  38.  
  39. </head>
  40. <body>
  41.  
  42. 	<div class="panel">
  43. 		<div class="title">Resizable Panel</div>
  44. 		<div class="ui-Resizable-r"></div>
  45. 		<div class="ui-Resizable-b"></div>
  46. 		<div class="ui-Resizable-rb"></div>
  47. 	</div>
  48.  
  49. </script>
  50. </body>
  51. </html>
下一节