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

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

下载地址：http://fontawesome.io/

1.引用方式：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    // 引用当前目录下的 font-awesome.min.css

    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

</head>

2.使用图标：

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

<div class="right icons">

    <!--将提供的样式直接放到需要的位置-->

    <i class="fa fa-cc-visa" aria-hidden="true"></i>

    <a>..</a>

</div>

<div class="right icons">

    <i class="fa fa-envelope-square" aria-hidden="true"></i>

    <a>3</a>

</div>

3.布局加导航栏展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

    <style>

        body{

            margin: 0;

        }

        .left{

            float: left;

        }

        .right{

            float: right;

        }

        .pg-header{

            height: 48px;

            background-color: #2459a2;

            color: #f5f5f5;

            min-width: 1180px;

            line-height: 48px;

        }

        .pg-header .logo{

            width: 200px;

            background-color: #000795;

            text-align: center;

        }

        .pg-header .icons{

            font-size: 30px;

            padding: 0 20px;

        }

        .pg-header .icons:hover{

            background-color: #204982;

        }

        .pg-header .icons a{

            font-size: 11px;

            display: inline-block;

            /*line-height: 1px; 可以将不跟随父级的line-height值 */

            line-height: 1px;

            background-color: red;

            padding: 6px 3px;

            border-radius: 50%;

        }

        .pg-header .user{

            margin-right: 80px;

            padding: 0 20px;

            height: 48px;

            position: relative;

        }

        .pg-header .user:hover .userinfo{

            display: block;

        }

        .pg-header .user .userinfo{

            z-index: 20;

            position: absolute;

            top: 48px;

            right: 0;

            width: 160px;

            background-color: #cccccc;

            color: black;

            display: none;

        }

        .pg-header .user .userinfo a{

            display: block;

        }

        .pg-header .user:hover{

            background-color: #204982;

        }

        .pg-header .user .headimg img{

            width: 40px;

            height: 40px;

            margin-top: 4px;

            border-radius: 50%

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="logo left">

            叨客厨子

        </div>

        <div class="user right">

            <a class="headimg" href="#">

                <img src="tt.jpg" alt="">

            </a>

            <div class="userinfo">

                <a href="">个人信息</a>

                <a href="">通知</a>

                <a href="">关注</a>

                <a href="">注销</a>

            </div>

        </div>

        <div class="right icons">

            <i class="fa fa-cc-visa" aria-hidden="true"></i>

            <a>..</a>

        </div>

        <div class="right icons">

            <i class="fa fa-envelope-square" aria-hidden="true"></i>

            <a>3</a>

        </div>

    </div>

    <div class="pg-footer"></div>

</body>

</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. xht37的码风

    写在前面 众所周知,在 Dev-C++ 上有一个代码格式化的功能,快捷键Ctrl+Shift+A 我的码风致力于写出格式化后毫无变化的代码,这被认为是标准代码 同时,对不可格式化的部分(如空格),我同 ...

  2. 海马玩模拟器——搭建React Native环境

    Visual Studio Emulator for Android 模拟器国内这网络环境不太用,所以使用海马玩模拟器,给大家推荐一下! 下面开始配置环境: 1)下载1.8+JDK,配置JDK环境参考 ...

  3. python实战===教你用微信每天给女朋友说晚安【转】

    转自:https://www.cnblogs.com/botoo/p/8622379.html#4081184 但凡一件事,稍微有些重复.我就考虑怎么样用程序来实现它. 这里给各位程序员朋友分享如何每 ...

  4. 负载均衡集群中的session解决方案【转】

    通常面临的问题 从用户端来解释,就是当一个用户第一次访问被负载均衡代理到后端服务器A并登录后,服务器A上保留了用户的登录信息:当用户再次发送请求时, 根据负载均衡策略可能被代理到后端不同的服务器,例如 ...

  5. 关于CaciiEZ端口流量阀值报警的设置

    作者:邓聪聪 环境:CactiEZ v10.1 为了更高效的发现问题,在非工作期间,公司的网络可能会出现一些故障,为了及时解决问题,所以做了一个流量监控,并以邮件的方式发送流量异常的端口,以便及时了解 ...

  6. struts2框架学习之第二天

    day02 下面是在每个Action之前都会执行的拦截器,这段代码来自与struts-default.xml文件. <interceptor-stack name="defaultSt ...

  7. Android应用内嵌cocos2dx游戏项目

    cocos2dx的Android环境搭建(Windows/Mac) 我用的cocos2dx3.15版本的. 以下步骤是在Windows平台执行的. 创建Cocos2d-x项目 将刚才下载的cocos2 ...

  8. Windows中查看端口占用及关闭对应进程

    开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID,之后在任务管理器(右键电脑屏幕的状态栏即可找到)中找到这个PID所对应的程序.如果任务管理器中没有PID ...

  9. 【进阶3-1期】JavaScript深入之史上最全--5种this绑定全面解析（转）

    这是我在公众号(高级前端进阶)看到的文章,现在做笔记  https://github.com/yygmind/blog/issues/20 this的绑定规则总共有下面5种. 1.默认绑定(严格/非严 ...

  10. Swift 学习- 08 -- 闭包

    // 闭包是自包含的函数代码块, 可以在代码中被传递和使用, swift 中的闭包 与 C语言 和 OC 中的代码块 (blocks) 以及其他一些编程语言中的匿名函数比较类似 // 闭包可以捕获和存 ...