页面布局之--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. P5270 无论怎样神树大人都会删库跑路

    题目地址:P5270 无论怎样神树大人都会删库跑路 第一眼看上去是模拟,似乎是 \(O(n)\) 的 水题 信心满满的写完: #include <bits/stdc++.h> using ...

  2. P5239 回忆京都

    题目地址:P5239 回忆京都 杨辉三角即组合数的"打表"形式 再求一个二维前缀和 然后处理一下负数即可(因为在求前缀和的过程中有减法) #include <bits/std ...

  3. SpringSecurityOAuth认证配置及Token的存储

    ⒈pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  4. [Jenkins]CentOS7下Jenkins搭建

    最近在倒腾Kubernetes的一些东西,这次需要用到Jenkins来实现自动化构建.来讲一讲搭建的整个过程. Jenkins是什么 Jenkins提供了软件开发的持续集成服务.它运行在Servlet ...

  5. Dubbo--基于Zookeeper服务与Spring集成

    Dubbo Zookeeper Spring  1.部署dubbo服务管理中心 2.搭建dubbo服务环境 2.1 pom.xml 依赖 2.2 log4j.properties 日志打印 3.api ...

  6. SNet解读

    解读论文:Learning Local Image Descriptors with Deep Siamese and Triplet Convolutional Networks by Minimi ...

  7. Faster_RCNN 4.训练模型

    总结自论文:Faster_RCNN,与Pytorch代码: 本文主要介绍代码最后部分:trainer.py  .train.py , 首先分析一些主要理论操作,然后在代码分析里详细介绍其具体实现.首先 ...

  8. MongoDB 的 upsert

    MongoDB 的update 方法的三个参数是upsert,这个参数是个布尔类型,默认是false.当它为true的时候,update方法会首先查找与第一个参数匹配的记录,在用第二个参数更新之,如果 ...

  9. ubuntu Qt linuxdeployqt打包

    1.下载PatchELF 0.9.,https://nixos.org/patchelf.html 安装:./configure make sudo make install 2.终端命令设置设置环境 ...

  10. hue的历史查询记录querys乱码问题解决

    hue的历史查询记录querys乱码问题解决: master1中配置文件/home/hadoop/.versions/hue-3.10.0/desktop/conf/hue.ini 可以看到连接的是m ...