简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 字体图标的用法和布局的原则与元素
Blogger Information
Blog 7
fans 0
comment 0
visits 3942
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
字体图标的用法和布局的原则与元素
冷风
Original
688 people have browsed it

字体图标的用法和布局的原则与元素的理解

字体图标的用法

  • 首先我们用到最多的就是阿里图标库

阿里图标网址

  • 选择自己喜欢的图标加入购物车然后下载到本地，将下载的文件解压-放入源码中，需要在哪个页面让他显示，就引入进去

  • 第二步:引用方式（首先引用CSS，iconfont.css是下载文件中的CSS，路径必须填对）

  1. <link rel="stylesheet" href="./88/iconfont.css">
  • 第二步：挑选相应图标并获取类名，(这里要选择Font class引用，icon-xxx是图标名，这里需要换成自己的)
  1. <span class="iconfont icon-xxx"></span>
  2. <span class="iconfont icon-hongbao-"></span>
  • 第三步：如果不喜欢当前图标的颜色，可自行更改样式，他是一个字体图标，就用字体CSS属性更改
  1.  .icon-hongbao- {
  2.         font-size: 10em;
  3.         color: aqua;
  4.       }

布局的原则与元素的默认排列方式

  • 一个页面只有两种方式排列【水平】【垂直】，宽存在受限，但是高是无限的，如果页面存在多个元素的时候它会水平排列，当第一排排满没有空间的时候会自动转入第二行，任何元素默认就是内元素：display: inline;如果页面存在块级元素，这个块级元素它会独占一行，存在多个块级元素它也不会水平排列，而是会第二排排列，块级元素通常是display: block;

盒模型常用属性

  • 常用属性有：宽和高（width），（height），内边距（padding），外边距（margin），计算盒子大小（box-sizing）
  • box-sizingzhie这个属性是计算了这个盒子设置的总高度和总宽度，设置的宽高多大，它最终就是多大
  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>Document</title>
  8.     <style>
  9.       .top {
  10.         width: 200px; /*宽度 */
  11.         height: 200px; /*高度 */
  12.         border: 1px solid rgb(252, 12, 12); /*边框 */
  13.         padding: 30px; /*内边距 */
  14.         margin: 30px; /*外边距 */
  15.         background-color: rgb(66, 82, 82); /*内容背景 */
  16.         box-sizing: border-box; /*计算盒子大小*/
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div class="top">1111111</div>
  22.     <div class="top">2222222</div>
  23.   </body>
  24. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！