search

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

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

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

字体图标引用

  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>
    27.      </ul>
    28.  </header>
    29. </body>
    30. </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 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多