welcome.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <meta name="viewport" content="user-scalable=0" />
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <meta name="viewport"
  5. content="width=device-width,initial-scale=1.0, minimum-scale=0.2 maximum-scale=1.0, user-scalable=no" />
  6. <style>
  7. html {
  8. margin: 0;
  9. padding: 0;
  10. overflow: hidden;
  11. height: 60%;
  12. }
  13. body {
  14. margin: 0;
  15. padding: 0;
  16. overflow: hidden;
  17. height: 100%;
  18. }
  19. .content {
  20. width: 100%;
  21. height: 100%;
  22. position: relative;
  23. background-color: rgba(0,0,0,0.8);
  24. overflow: hidden;
  25. }
  26. .title{
  27. margin-top: 30px;
  28. font-size: 35px;
  29. line-height: 1.5;
  30. color: #fff;
  31. text-align: center;
  32. font-weight: bold;
  33. }
  34. .content .detail{
  35. left: 50%;
  36. top: 54%;
  37. width: 80%;
  38. transform: translate(-50%,-50%);
  39. position: absolute;
  40. font-size: 30px;
  41. text-indent: 2em;
  42. line-height: 1.5;
  43. color: #fff;
  44. letter-spacing: 0.1em;
  45. }
  46. </style>
  47. <body>
  48. <!--外层div绝对定位,左上定点居中-->
  49. <div class="content">
  50. <div class="title">前&emsp;言</div>
  51. <div class="detail">
  52. 《梦幻契丹》数字展挑选内蒙古地区吐尔基山辽墓及其它辽墓葬出土文物精品,以数字化技术进行交互展示。展览突出数字化文物的多维度展示与解读,对文物从静态品鉴向动态“活化”进行重新诠释。
  53. </div>
  54. </div>
  55. </body>