页面布局之--Font Awesome+导航

  1. Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
  2. 下载地址：http://fontawesome.io/

1.引用方式：

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     // 引用当前目录下的 font-awesome.min.css
  5.     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  6. </head>

2.使用图标：

图标样式：http://fontawesome.io/icons/

  1. <div class="right icons">
  2.     <!--将提供的样式直接放到需要的位置-->
  3.     <i class="fa fa-cc-visa" aria-hidden="true"></i>
  4.     <a>..</a>
  5. </div>
  6. <div class="right icons">
  7.     <i class="fa fa-envelope-square" aria-hidden="true"></i>
  8.     <a>3</a>
  9. </div>

3.布局加导航栏展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  7.     <style>
  8.         body{
  9.             margin: 0;
  10.         }
  11.         .left{
  12.             float: left;
  13.         }
  14.         .right{
  15.             float: right;
  16.         }
  17.         .pg-header{
  18.             height: 48px;
  19.             background-color: #2459a2;
  20.             color: #f5f5f5;
  21.             min-width: 1180px;
  22.             line-height: 48px;
  23.         }
  25.         .pg-header .logo{
  26.             width: 200px;
  27.             background-color: #000795;
  28.             text-align: center;
  29.         }
  31.         .pg-header .icons{
  32.             font-size: 30px;
  33.             padding: 0 20px;
  34.         }
  35.         .pg-header .icons:hover{
  36.             background-color: #204982;
  37.         }
  38.         .pg-header .icons a{
  39.             font-size: 11px;
  40.             display: inline-block;
  41.             /*line-height: 1px; 可以将不跟随父级的line-height值 */
  42.             line-height: 1px;
  43.             background-color: red;
  44.             padding: 6px 3px;
  45.             border-radius: 50%;
  46.         }
  47.         .pg-header .user{
  48.             margin-right: 80px;
  49.             padding: 0 20px;
  50.             height: 48px;
  51.             position: relative;
  52.         }
  54.         .pg-header .user:hover .userinfo{
  55.             display: block;
  56.         }
  57.         .pg-header .user .userinfo{
  58.             z-index: 20;
  59.             position: absolute;
  60.             top: 48px;
  61.             right: 0;
  62.             width: 160px;
  63.             background-color: #cccccc;
  64.             color: black;
  65.             display: none;
  66.         }
  68.         .pg-header .user .userinfo a{
  69.             display: block;
  70.         }
  72.         .pg-header .user:hover{
  73.             background-color: #204982;
  74.         }
  76.         .pg-header .user .headimg img{
  77.             width: 40px;
  78.             height: 40px;
  79.             margin-top: 4px;
  80.             border-radius: 50%
  81.         }
  83.     </style>
  84. </head>
  85. <body>
  86.     <div class="pg-header">
  87.         <div class="logo left">
  88.             叨客厨子
  89.         </div>
  90.         <div class="user right">
  91.             <a class="headimg" href="#">
  92.                 <img src="tt.jpg" alt="">
  93.             </a>
  95.             <div class="userinfo">
  96.                 <a href="">个人信息</a>
  97.                 <a href="">通知</a>
  98.                 <a href="">关注</a>
  99.                 <a href="">注销</a>
  100.             </div>
  101.         </div>
  102.         <div class="right icons">
  104.             <i class="fa fa-cc-visa" aria-hidden="true"></i>
  105.             <a>..</a>
  106.         </div>
  107.         <div class="right icons">
  108.             <i class="fa fa-envelope-square" aria-hidden="true"></i>
  109.             <a>3</a>
  110.         </div>
  111.     </div>
  112.     <div class="pg-footer"></div>
  113. </body>
  114. </html>

页面布局之--Font Awesome+导航的更多相关文章

  1. 《React后台管理系统实战 ：二》antd左导航：cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱

    一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...

  2. python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  3. 第三百八十二节，Django+Xadmin打造上线标准的在线教育平台—xadmin管理员详情页面布局，导航图标设置

    第三百八十二节,Django+Xadmin打造上线标准的在线教育平台—xadmin进阶 1.后台管理员详情页面布局 后台管理员详情页面,区块是可以拖动的,而且分为了很多个区块 这个页面的布局在xadm ...

  4. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  5. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  7. CSS3与页面布局学习总结——多种页面布局

    一.负边距与浮动布局 1.1.负边距 所谓负边距就是margin取负值的情况,如margin:-40px:margin-left:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见 ...

  8. css书写规范 & 页面布局规范 &常用案例经验总结

    CSS 属性书写顺序(重点) 建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 displa ...

  9. CSS入门指南-4：页面布局

    这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...

随机推荐

  1. .NET中制做对象的副本（一）

    .NET中对于复杂对象制作副本比较困难,闲暇之时写了这个方法,和大家分享. 本案例用于大型对象的副本制作,常见的应用场景就是树形对象节点的拷贝,但是也有局限性,目前使用于类里有基本类型(int sti ...

  2. 【转】Python用数据说明程序员需要掌握的技能

    [转]Python用数据说明程序员需要掌握的技能 https://blog.csdn.net/HuangZhang_123/article/details/80497951 当下是一个大数据的时代,各 ...

  3. 一个优秀windows C++ 程序员该有哪些知识

  4. codeforces 161D Distance in Tree 树上点分治

    链接:https://codeforces.com/contest/161/problem/D 题意:给一个树,求距离恰好为$k$的点对是多少 题解:对于一个树,距离为$k$的点对要么经过根节点,要么 ...

  5. LabVIEW中下拉列表和枚举的区别（两点）

    第一:如图,在表示法上,下拉列表表示的数据范围要大,枚举只能是U32,U16, U8 第二:在vi的动态调用过程中,常用下拉列表,因为枚举控件不能动态的增加或者减少项目,而下拉列表则可以.

  6. python学习第4天

    03 初识列表 why: 字符串的缺点: 1,只能存储少量的数据. 2,s = '1True[1,2,3]' 无论索引,切片 获取的都是字符串类型,单一,转化成它原来的类型还需要再一步转换. int( ...

  7. laravel sql复杂语句，原生写法----连表分组

    ### 使用了临时表.又分组又连表的感觉好难写,使用拉 ravel 但是现在越来也相信,没解决一个新的难题,自己又进步了一点点 ### 原生的sql: select user_code, realna ...

  8. java8 lambda方法引用

    注意引用方法的参数列表与返回值类型要与函数式接口中的抽象方法的参数列表与返回值类型保持一致 主要有三种语法格式: * * 对象::实例方法名 * * 类::静态方法名 * * 类::实例方法名 pub ...

  9. 【原创】大数据基础之Logstash（2）应用之mysql-kafka

    应用一:mysql数据增量同步到kafka 1 准备mysql测试表 mysql> create table test_sync(id int not null auto_increment, ...

  10. 洛谷P4689 [Ynoi2016]这是我自己的发明 [莫队]

    传送门 ynoi中比较良心不卡常的题. 思路 没有换根操作时显然可以变成dfs序莫队随便搞. 换根操作时一个子树可以变成两段区间的并集,也随便搞搞就好了. 这题完全不卡常,随便过. 代码 #inclu ...