字体图标

流程

  1. 引入字体 css 文件
  2. 引入图标类,修改图标编码
  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. <!-- 引入CSS文件 -->
  9. <link rel="stylesheet" href="style.css" />
  10. </head>
  11. <body>
  12. <!-- class引入 -->
  13. <div><span class="iconfont icon-cc-visa visa"></span></div>
  14. <div><span class="iconfont icon-cc-mastercard mastercard"></span></div>
  15. <!-- JS引入 -->
  16. <div>
  17. <svg class="icon" aria-hidden="true">
  18. <use xlink:href="#icon-visa-"></use>
  19. </svg>
  20. </div>
  21. <div>
  22. <svg class="icon" aria-hidden="true">
  23. <use xlink:href="#icon-icon_zhifumastercard"></use>
  24. </svg>
  25. </div>
  26. <!-- 引入字体图标JS文件 -->
  27. <script src="font_icon/iconfont.js"></script>
  28. </body>
  29. </html>
  1. /* CSS代码 */
  2. /* 引入图标字体的CSS文件 */
  3. @import url(font_icon/iconfont.css);
  4. .visa {
  5. font-size: 2em;
  6. color: lightgreen;
  7. }
  8. .mastercard {
  9. font-size: 2em;
  10. color: coral;
  11. }

媒体查询

  • 媒体:屏幕 平板 手机 打印机
  • 查询:获取媒体当前状态
  • 布局前提:宽度固定,高度增长, 用户不可能在一个无限空间内进行布局, 宽度, 或高度, 必须要有一个固定下来
  • 当你使用 min-width 时,需要从小到大
  • 当你使用 max-width 时,需要从大到小
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>PC媒体查询</title>
  7. <link rel="stylesheet" href="style2.css" />
  8. </head>
  9. <body>
  10. <div>
  11. <ul>
  12. <li><a href="#">首页</a></li>
  13. <li><a href="#">教程</a></li>
  14. <li><a href="#">博客</a></li>
  15. <li><a href="#">论坛</a></li>
  16. </ul>
  17. </div>
  18. </body>
  19. </html>
  1. /* css文件 */
  2. body {
  3. width: 100vw;
  4. }
  5. div {
  6. width: 50%;
  7. box-sizing: border-box;
  8. overflow: auto;
  9. margin: auto;
  10. }
  11. /* 导航 */
  12. li {
  13. float: left;
  14. margin-left: 15px;
  15. list-style: none;
  16. }
  17. a:link {
  18. color: black;
  19. text-decoration: none;
  20. }
  21. /* 宽度大于1024像素的窗口,导航背景色为红色*/
  22. @media (min-width: 1025px) {
  23. div {
  24. background-color: red;
  25. }
  26. }
  27. /* 宽度在861-1024像素的窗口,导航背景色为绿色*/
  28. @media (min-width: 861px) and (max-width: 1024px) {
  29. div {
  30. background-color: chartreuse;
  31. }
  32. }
  33. /* 宽度小于等于860像素的窗口,导航背景色为蓝色*/
  34. @media (max-width: 860px) {
  35. div {
  36. background-color: aqua;
  37. }
  38. }

更多相关文章

  1. Android(安卓)8.0 新特性及开发指南
  2. 提示服务Notification在Android中的应用
  3. 阿里字体图标使用写法与响应式代码
  4. 【Android】如何更换icon和icon不变的问题
  5. 2011.09.13(3)——— android 添加快捷方式并且图标上添加数字
  6. Android(安卓)ActionBar
  7. 2011.09.13(2)——— android 图标上面添加数字
  8. 2011.09.13(2)——— android 图标上面添加数字
  9. Android菜单详解(三)——SubMenu和IconMenu

随机推荐

  1. 条码扫描二维码扫描——ZXing android 源
  2. (详解)Eclipse3.6搭建 Android 2.2 开发
  3. 亚马逊面向开发人员推出Android应用商店
  4. Android面试及开发忠告
  5. 2011届 实训总结
  6. Android的三个阶段
  7. [置顶] 【Android】开源 闲暇(Leisure)
  8. ClassLoader解析——Android篇
  9. Android RIL
  10. Android 开发中的日常积累