字体图标

流程

  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. AngularJS 日期时间选择组件(附详细使用方
  2. HTML5制作一场精美的烟花盛宴
  3. 【前端词典】11 个 CSS 知识搭配 11 个 J
  4. HTML5 3D蝴蝶飞舞动画
  5. 聊一聊加班严重时要如何自我提升
  6. 阿里对蒋凡的处理真的太重了吗?
  7. jQuery做一个漂亮的下拉框,用十几行代码就
  8. 【前端词典】8 个提高 JS 性能的方法
  9. 辞职后才明白的10个道理
  10. 15个炫酷的CSS3加载动画图标