页面布局之--Font Awesome+导航
页面布局之--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+导航的更多相关文章
- 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱
一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...
- python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)
昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...
- 第三百八十二节,Django+Xadmin打造上线标准的在线教育平台—xadmin管理员详情页面布局,导航图标设置
第三百八十二节,Django+Xadmin打造上线标准的在线教育平台—xadmin进阶 1.后台管理员详情页面布局 后台管理员详情页面,区块是可以拖动的,而且分为了很多个区块 这个页面的布局在xadm ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 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- ...
- CSS3与页面布局学习总结——多种页面布局
一.负边距与浮动布局 1.1.负边距 所谓负边距就是margin取负值的情况,如margin:-40px:margin-left:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见 ...
- css书写规范 & 页面布局规范 &常用案例经验总结
CSS 属性书写顺序(重点) 建议遵循以下顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 displa ...
- CSS入门指南-4:页面布局
这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...
随机推荐
- ORA-03113: end-of-file on communication channel 磁盘慢,数据库启动失败
磁盘慢,数据库启动失败:解决思路:1.让数据文件offline: 2.删除表空间 SQL> startup pfile='/server/oracle/admin/test/pfile/init ...
- Codeforces 408D Long Path (DP)
题目: One day, little Vasya found himself in a maze consisting of (n + 1) rooms, numbered from 1 to (n ...
- RefineDet网络简介(转载)
转载链接:https://blog.csdn.net/u014380165/article/details/79502308 思想:框架建立在FPN上,只不过在提取特征层(down-top)的时候就加 ...
- Java的static类
首先Java的static类只能是静态内部类.如果在外部类声明为static,程序会编译通不过. 其次,主要了解下static内部类与普通内部类的区别是什么,以及static内部类的作用是什么,详见下 ...
- NODE_ENV不是内部或外部命令,也不是可运行的程序
NODE_ENV不是内部或外部命令,也不是可运行的程序 解决办法:安装across-env:npm install cross-env –save-dev 在运行命令加前缀:在NODE_ENV=xxx ...
- node promise库bluebird
var fs = require('fs') var Promise = require("bluebird") function file1() { return new Pro ...
- 1、git基础介绍及远程/本地仓库、分支
1. Git基础介绍 基于Git进行开发时,首先需要将远程仓库代码clone到本地,即为本地仓库.后续大部分时间都是基于本地仓库上的分支进行编码,最后将本地仓库的代码合入远程仓库. 1.1. 远程仓库 ...
- vue 控制 input 的 disabled
<input type="number" v-model="item.rvb07_1" :disabled="type == 'receiveN ...
- SQL Server 之 内部连接
1.内部联接 2.外部联接 外部联接扩展了内部联接的功能,会把内联接中删除表源中的一些保留下来,由于保存下来的行不同,可将外部联接分为左联接和右联接. 2.1左联接: 如果左表的某一行在右表中没有匹配 ...
- 前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画 方式一: $("div" ...