欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

基本布局和块状元素

程序员文章站 2022-03-24 09:38:07
...

浏览效果

基本布局和块状元素

基本布局和块状元素

代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>基本布局</title>
  8. <style>
  9. .main{
  10. width: 400px;
  11. height: 800px;
  12. background: #6ff;
  13. position: absolute;
  14. top: 40px;
  15. left: 400px;
  16. display: inline;
  17. }
  18. .top{
  19. width: 380px;
  20. height: 190px;
  21. position: relative;
  22. background: coral;
  23. margin-top: 10px;
  24. margin-left: 10px;
  25. }
  26. .line{
  27. width: 130px;
  28. height: 400px;
  29. position: relative;
  30. background: royalblue;
  31. float: left;
  32. margin-top: 10px;
  33. margin-left: 10px;
  34. }
  35. .line2{
  36. width: 130px;
  37. height: 400px;
  38. position: relative;
  39. background: #432;
  40. float: right;
  41. margin-top: 10px;
  42. margin-right: 10px;
  43. }
  44. .foot{
  45. width: 380px;
  46. height: 150px;
  47. position: relative;
  48. background: seashell;
  49. margin-left: 10px;
  50. margin-top: 430px;
  51. }
  52. /* 隐藏与显示 */
  53. .st{
  54. display: none;
  55. }
  56. .main:hover .st{
  57. display: block;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div class="main">
  63. <div class="top"></div>
  64. <div class="st">
  65. <div class="line"></div>
  66. <div class="line2"></div>
  67. </div>
  68. <div class="foot"></div>
  69. </div>
  70. </body>
  71. </html>