博客列表 >字体图标引用、网页布局与元素排列、盒模型使用

字体图标引用、网页布局与元素排列、盒模型使用

移动用户-7367797
移动用户-7367797原创
2021年07月05日 14:12:06477浏览

字体图标引用

  1. 常用的字体图标库:iconfont 、Font Awesome
  2. 引入方法:下载所需图标文件(先收藏后整体下载,根据demo文档中的操作方法,在html中通过link标签引入)
  3. 字体图标以高清无损的方式显示,可设置其大小、颜色等字体本身能设置的属性。

    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. <link rel="stylesheet" href="/font/CSS/font/iconfont.css">
    9. <link rel="stylesheet" href="/font/CSS/style.css">
    10. </head>
    11. <body>
    12. <header>
    13. <ul>
    14. <li>
    15. <span class="iconfont icon-shezhi"></span>
    16. <span>系统设置</span>
    17. </li>
    18. <li>
    19. <span class="iconfont icon-shangping"></span>
    20. <span>奖品名称</span>
    21. </li>
    22. <li>
    23. <span class="iconfont icon-lianxiren17"></span>
    24. <span>中奖名单</span>
    25. </li>
    26. </ul>
    27. </header>
    28. </body>
    29. </html>

    页面布局

    在网页中一般采用二维布局方式:从上到下、从左到右

    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. *{
    10. margin: 0;
    11. padding: 0;
    12. box-sizing: border-box;
    13. }
    14. header{
    15. width: 100vw;
    16. height: 4rem;
    17. background-color: #009999;
    18. color: white;
    19. }
    20. .container{
    21. width: 100vw;
    22. color: white;
    23. position: fixed;
    24. top: 4rem;
    25. left: 0;
    26. right: 0;
    27. bottom: 4rem;
    28. }
    29. .container>aside:first-child{
    30. background-color: #345;
    31. color: #fff;
    32. position: fixed;
    33. top: 4.5rem;
    34. left: 0;
    35. right: 80vw;
    36. bottom: 4.5rem;
    37. }
    38. .container>aside:last-child{
    39. background-color: #345;
    40. color: #fff;
    41. position: fixed;
    42. top: 4.5rem;
    43. left: 80vw;
    44. right: 0;
    45. bottom: 4.5rem;
    46. }
    47. .container>main{
    48. position:fixed;
    49. left: 20vw;
    50. right: 20vw;
    51. top: 4.5rem;
    52. bottom:4.5rem ;
    53. background-color: rgb(182, 21, 96);
    54. margin: 0 0.6rem;
    55. }
    56. footer{
    57. width: 100vw;
    58. height: 4rem;
    59. background-color: #1d1f26;
    60. color: white;
    61. position:fixed;
    62. bottom: 0;
    63. left: 0;
    64. right: 0;
    65. }
    66. </style>
    67. </head>
    68. <body>
    69. <header>
    70. 头部
    71. </header>
    72. <div class="container">内容区
    73. <aside>
    74. 左边栏
    75. </aside>
    76. <main>
    77. 中心内容区
    78. </main>
    79. <aside>
    80. 右边栏
    81. </aside>
    82. </div>
    83. <footer>
    84. 页脚
    85. </footer>
    86. </body>
    87. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议