9.demo.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. #box {
  9. width: 450px;
  10. height: 830px;
  11. border: 4px solid green;
  12. }
  13. #part1 {
  14. width: 100%;
  15. height: 520px;
  16. }
  17. #part1 #top {
  18. width: 100%;
  19. height: 30px;
  20. line-height: 30px;
  21. background: #ccc;
  22. font-weight: 600;
  23. }
  24. #part1 #top span {
  25. font-size: 14px;
  26. color: rgb(109, 131, 242);
  27. }
  28. #part1 #main #content1 {
  29. width: 100%;
  30. }
  31. #part1 #main #content1 h3 {
  32. color: orange;
  33. }
  34. #part1 #main #content1 h3 span {
  35. color: rgb(109, 131, 242);
  36. }
  37. #part1 #main #content1 p {
  38. color: #ccc;
  39. font-size: 14px;
  40. text-indent: 2em;
  41. }
  42. #part1 #main #content1 ul li span {
  43. color: rgb(109, 131, 242);
  44. }
  45. #part1 #bottom {
  46. width: 100%;
  47. height: 72px;
  48. }
  49. #part1 #bottom img {
  50. width: 100%;
  51. height: 100%;
  52. }
  53. #part2 {
  54. width: 100%;
  55. height: 310px;
  56. }
  57. #part2 #top {
  58. width: 100%;
  59. height: 25px;
  60. line-height: 25px;
  61. color: rgb(109, 131, 242);
  62. background: #eee;
  63. border-top: 2px solid #000;
  64. border-bottom: 1px dashed #000;
  65. text-indent: 10px;
  66. font-size: 14px;
  67. font-weight: bold;
  68. }
  69. #part2 #bottom #title {
  70. width: 100%;
  71. height: 40px;
  72. font-weight: bold;
  73. }
  74. #part2 #bottom #title img{
  75. width: 40px;
  76. height: 40px;
  77. }
  78. #part2 #bottom #content2 {
  79. width: 100%;
  80. text-indent: 2em;
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <div id="box">
  86. <div id="part1">
  87. <div id="top">
  88. 出行风向标<span>更多>></span>
  89. </div>
  90. <div id="main">
  91. <div id="content1">
  92. <h3>节日独享:<span>在他多过大年,体验别样年味</span></h3>
  93. <p>距高春节血来心近了,过年的气慰已经在空气中开始弥悉,辛勤忙楼了一年,想给自己放个假,从忙不完的工作生活中解说出来…</p>
  94. <ul>
  95. <li>深院出游:<span>给客20000元奖金,相被会的人</span></li>
  96. <li>深院出游:<span>给客20000元奖金,相被会的人</span></li>
  97. <li>深院出游:<span>给客20000元奖金,相被会的人</span></li>
  98. </ul>
  99. </div>
  100. <div id="content1">
  101. <h3>节日独享:<span>在他多过大年,体验别样年味</span></h3>
  102. <p>距高春节血来心近了,过年的气慰已经在空气中开始弥悉,辛勤忙楼了一年,想给自己放个假,从忙不完的工作生活中解说出来…</p>
  103. <ul>
  104. <li>深院出游:<span>给客20000元奖金,相被会的人</span></li>
  105. <li>深院出游:<span>给客20000元奖金,相被会的人</span></li>
  106. <li>深院出游:<span>给客20000元奖金,相被会的人</span></li>
  107. </ul>
  108. </div>
  109. </div>
  110. <div id="bottom">
  111. <img src="./images/2.jpg" alt="">
  112. </div>
  113. </div>
  114. <div id="part2">
  115. <div id="top">
  116. 深度观察
  117. </div>
  118. <div id="bottom">
  119. <div id="title">
  120. <img src="./images/3.jpg" alt="">
  121. 脉荫而归de球叹洇
  122. </div>
  123. <br>
  124. <div id="content2">
  125. 犹记得小时候,北风呼啸,晚自习结束之后,对于制骗的恐惧面献那一更灯光才放博脚步。小时候的记它大多已机,而在放学里。
  126. </div>
  127. <div id="content2">
  128. 犹记得那一年,我和闻宝来到自己梦深已久的这个城市,穿幻:外国街头的改色中,人来人往穿你织逊,一轮明月渐渐升超然回首:一双思闪忽网的大报精像今夜酸美绩拍灯光在进处向我门的偏爱,让我们走在了一起。
  129. </div>
  130. <div id="content2">
  131. 从此,只要有时问就喜欢到多村、田野,所林,古请主主疲督的身心得到放松、让空虚的大脑得以充实。
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </body>
  137. </html>