当前位置:   article > 正文

用html编写简单的天气预报界面_html天气预报静态页面

html天气预报静态页面

 css3层叠样式表在此不再详述, 请看代码备注及运行效果图!

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!--meta 单标签 用来引入或声明一些内容-->
  5. <meta charset="UTF-8">
  6. <!--viewport 视口-->
  7. <!--width 设置视口宽度-->
  8. <!--user-scalable 网页是否可以被缩放-->
  9. <!--initial-scale 网页被加载时,初始的比例-->
  10. <!--maximum-scale 网页最大的放大比例-->
  11. <!--minimum-scale 网页最小的缩放比例-->
  12. <meta name="viewport"
  13. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  14. <!--title 标题标签-->
  15. <title>天气预报</title>
  16. <style>
  17. html{
  18. height: 100%;
  19. }
  20. body{
  21. /*边界看宽度默认为8,在这里初始值设为零*/
  22. margin: 0;
  23. /*高度100%,整个界面*/
  24. height: 100%;
  25. /*display: inline-block 转换为行内块元素*/
  26. /*display: flex 将该标签作为弹性布局的容器*/
  27. display: flex;
  28. /*指定容器内的item布局方向*/
  29. /*row 容器内的item按照x轴(主轴方向布局)*/
  30. /*column 容器内的item按照y轴(交叉轴)方向布局*/
  31. /*row-reverse 容器内的item按照x轴反向布局*/
  32. /*column-reserve 容器内的item按照y轴反向布局*/
  33. flex-direction: column;
  34. /*文本居中*/
  35. text-align: center;
  36. /*设置背景图片*/
  37. /*rgb() red green blue 取值0~255*/
  38. /*rgba() red green blue alpha(取0~1)*/
  39. /*设置背景色从rgb(14,105,189)到red值从上到下渐变*/
  40. background-image: linear-gradient(to bottom,rgb(14,105,189),red);
  41. /*主轴项目item的布局方式*/
  42. justify-content: space-between;
  43. /*交叉轴的项目item布局方式*/
  44. /*align-items: ;*/
  45. }
  46. header{
  47. /*字体大小*/
  48. font-size: 30px;
  49. }
  50. img{
  51. /*width: 设置图片显示宽度,高度会自适应*/
  52. width: 80px;
  53. }
  54. footer{
  55. /*display: flex 将该标签作为弹性布局的容器*/
  56. display: flex;
  57. /*设置item的布局方式*/
  58. justify-content: space-between;
  59. }
  60. footer section{
  61. /*宽度占比33%*/
  62. width: 33%;
  63. border-right: 1px black solid;
  64. }
  65. </style>
  66. </head>
  67. <!--body 标记网页主题信息-->
  68. <body>
  69. <!--header 网页中的头部内容-->
  70. <header>郑州市</header>
  71. <!--main 块元素 标记网页中的主要内容-->
  72. <main>
  73. <!--img 标记网页中的图片-->
  74. <!--src source 图片来源-->
  75. <!--alt alter 当图片未被加载出来时,以文本方式代替图片显示-->
  76. <!--title 当鼠标停留在图片上时,展示的文本-->
  77. <img src="days/qing.png" alt="qing.png">
  78. <!--h1~h6 标题标签, 标签独自占一行空间,称之为块元素-->
  79. <h2>27~32℃</h2>
  80. <h3>晴转多云</h3>
  81. <!--p标签,用来标记网页中的段落内容!-->
  82. <p>东风微风</p>
  83. <p>实时温度: 32℃,空气质量指数65,良</p>
  84. </main>
  85. <!--footer 网页中的尾部内容-->
  86. <footer>
  87. <!--section 组件、模块, 块元素-->
  88. <section>
  89. <p>周三</p>
  90. <p>27~30℃</p>
  91. <img src="days/xiaoyu.png" alt="">
  92. <p>阴转小雨</p>
  93. <p>南风微风</p>
  94. </section>
  95. <section>
  96. <p>周三</p>
  97. <p>27~30℃</p>
  98. <img src="days/xiaoyu.png" alt="">
  99. <p>阴转小雨</p>
  100. <p>南风微风</p>
  101. </section>
  102. <section>
  103. <p>周三</p>
  104. <p>27~30℃</p>
  105. <img src="days/xiaoyu.png" alt="">
  106. <p>阴转小雨</p>
  107. <p>南风微风</p>
  108. </section>
  109. </footer>
  110. </body>
  111. </html>

                                                               运行结果如下:

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/寸_铁/article/detail/906592
推荐阅读
相关标签
  

闽ICP备14008679号