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

字体图标引用

常用的字体图标库：iconfont 、Font Awesome
引入方法：下载所需图标文件（先收藏后整体下载，根据demo文档中的操作方法，在html中通过link标签引入）

字体图标以高清无损的方式显示，可设置其大小、颜色等字体本身能设置的属性。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>字体图标引用实例</title>
 <link rel="stylesheet" href="/font/CSS/font/iconfont.css">
 <link rel="stylesheet" href="/font/CSS/style.css">
</head>
<body>
 <header>
     <ul>
         <li>
             <span class="iconfont icon-shezhi"></span>
             <span>系统设置</span>
         </li>
         <li>
             <span class="iconfont icon-shangping"></span>
             <span>奖品名称</span> 
         </li>
         <li>
             <span class="iconfont icon-lianxiren17"></span>
             <span>中奖名单</span>
         </li>
     </ul>
 </header>
</body>
</html>

页面布局

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>页面布局</title>
 <style>
     *{
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }
     header{
         width: 100vw;
         height: 4rem;
         background-color: #009999;
         color: white;
     }
     .container{
         width: 100vw;
         color: white;
         position: fixed;
         top: 4rem;
         left: 0;
         right: 0;
         bottom: 4rem;
     }
     .container>aside:first-child{
         background-color: #345;
         color: #fff;
         position: fixed;
         top: 4.5rem;
         left: 0;
         right: 80vw;
         bottom: 4.5rem;
     }
     .container>aside:last-child{
         background-color: #345;
         color: #fff;
         position: fixed;
         top: 4.5rem;
         left: 80vw;
         right: 0;
         bottom: 4.5rem;
     }
     .container>main{
         position:fixed;
         left: 20vw;
         right: 20vw;
         top: 4.5rem;
         bottom:4.5rem ;
         background-color: rgb(182, 21, 96);
         margin: 0 0.6rem;
     }
     footer{
         width: 100vw;
         height: 4rem;
         background-color: #1d1f26;
         color: white;
         position:fixed;
         bottom: 0;
         left: 0;
         right: 0;
     }
 </style>
</head>
<body>
 <header>
     头部
 </header>
 <div class="container">内容区
     <aside>
         左边栏
     </aside>
     <main>
         中心内容区
     </main>
     <aside>
         右边栏
     </aside>
 </div>
 <footer>
     页脚
 </footer>
</body>
</html>

字体图标引用

页面布局

更多相关文章

随机推荐