html模板 练习（仿照抽屉网）
1.页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: auto;
} .pg-header{
height: 48px;
background-color:#2459a2;
color: white;
line-height: 48px;
} .pg-content .menu{
position: absolute;
background-color: #dddddd;
top: 48px;
left: ;
bottom: ;
width: 200px;
}
.pg-content .content{
position: absolute;
background-color: #00bbee;
top: 48px;
right: ;
bottom: ;
left: 200px;
overflow: auto; #a模板b模板切换
} </style>
</head>
<body>
<div class="pg-header">
<div class="logo"><a>LOGO</a></div>
</div> <div class="pg-content"> <div class="menu"><a>菜单界面</a></div> <div class="content"><a>content</a></div> </div> <div class="pg-footer"></div>
</body>
</html>
2.pg-header
3个div进行添加上class，float浮动操作
.pg-header .logo{
float: left;
width: 200px;
}
.pg-header .action-menu{
float: left;
width: 980px;
}
.pg-header .action-person{
float: right;
width: 200px;
}
<div class="pg-header">
<div class="logo"><a>LOGO</a></div>
<div class="action-menu">
<a>全部</a>
<a>42区</a>
<a>段子</a>
<a>图片</a>
<a></a>
</div>
<div class="action-person">
<a>注册</a>
<a>登录</a>
</div>
</div>
注意：当页面缩小，float的消失不见了
3. menu菜单
menu 进行 padding，margin，hover操作
.pg-header .menu{
display: inline-block;
padding: 10px 10px;
color: white;
}
.pg-header .menu:hover{
background-color: #;
}
<div class="pg-header">
<div class="logo"><a>LOGO</a></div>
<div class="action-menu">
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">图片</a>
<a class="menu"></a>
</div>
<div class="action-person">
<a class="menu">注册</a>
<a class="menu">登录</a>
</div>
</div>
4.添加按钮
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
.pg-header .icons{
display: inline-block;
padding: 20px ;
}
.pg-header .icons:hover{
background-color: #;
}
<div class="action-person" style="position: relative;">
<div class="icons" style="position: absolute;left:0;">
<i class="fa fa-share-alt" aria-hidden="true"></i>
<span></span>
</div>
<div class="icons" style="position: absolute;left:80px;">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<span style="padding: 9px 7px;background-color: red;border-radius: 50%"></span>
</div> </div>
5.添加头像
/*第5步 ： 头像 */
.pg-header .user-image{
display: inline-block;
height: 48px;
width: 100px;
}
/*第6步 ： 个人信息 */
.pg-header .user-image .user-message {
position: absolute;
z-index: ;
background-color: antiquewhite;
top: 48px;
width: 100px;
display: none;
}
.pg-header .user-image:hover .user-message{
display: block;
}
.pg-header .user-image .user-message a{
display: block;
color: black;
text-align: center;
}
<div class="user-image" style="position: absolute;right:20px;">
<a><img src="data:images/user.png"></a>
<div class="user-message" >
<a>个人资料</a>
<a>设置</a>
<a>退出</a>
</div> </div>
6.完整代码
# css模板：font-awesome-4.7.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
body{
margin: 0 auto;
} .pg-header{
height: 48px;
background-color:#2459a2;
color: white;
line-height: 48px;
}
/*第二步：三个div进行 float*/
.pg-header .logo{
float: left;
width: 200px;
}
.pg-header .action-menu{
float: left;
width: 880px;
}
.pg-header .action-person{
float: right;
width: 300px;
height: 48px;
}
/********************** */
/*第三步 ： menu菜单 */
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
.pg-header .menu:hover{
background-color: #204982;
}
/********************** */
/*第4步 ： icons图标 */
.pg-header .icons{
display: inline-block;
padding: 0 20px ;
}
.pg-header .icons:hover{
background-color: #204982;
} /*第5步 ： 头像 */
.pg-header .user-image{
display: inline-block;
height: 48px;
width: 100px;
}
/*第6步 ： 个人信息 */
.pg-header .user-image .user-message {
position: absolute;
z-index: 21;
background-color: antiquewhite;
top: 48px;
width: 100px;
display: none;
}
.pg-header .user-image:hover .user-message{
display: block;
}
.pg-header .user-image .user-message a{
display: block;
color: black;
text-align: center;
} .pg-content .menu{
position: absolute;
background-color: #dddddd;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
}
.pg-content .content{
position: absolute;
background-color: #00bbee;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto;
z-index: 20;
} </style>
</head>
<body>
<div class="pg-header"> <!--第二步：div标签 添加上class-->
<!--第二步：a标签 添加class menu-->
<div class="logo">
<a href="#"><img src="data:images/logo.png"></a>
</div> <div class="action-menu">
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">图片</a>
<a class="menu">1024</a>
</div> <div class="action-person" style="position: relative;"> <div class="icons" style="position: absolute;left:0;">
<i class="fa fa-share-alt" aria-hidden="true"></i>
<span style="padding: 9px 7px;background-color: red;border-radius: 50%">5</span>
</div> <div class="icons" style="position: absolute;left:80px;">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<span>5</span>
</div> <div class="user-image" style="position: absolute;right:20px;">
<a><img src="data:images/user.png"></a>
<div class="user-message" >
<a>个人资料</a>
<a>设置</a>
<a>退出</a>
</div> </div> </div> <!----------------------------------->
</div> <div class="pg-content"> <div class="menu"><a>菜单界面</a>
</div> <div class="content"><a>content</a></div> </div> <div class="pg-footer"></div>
</body>
</html>
html模板 练习（仿照抽屉网）的更多相关文章
- 爬虫 requests模块的其他用法 抽屉网线程池回调爬取+保存实例,gihub登陆实例
requests模块的其他用法 #通常我们在发送请求时都需要带上请求头,请求头是将自身伪装成浏览器的关键,常见的有用的请求头如下 Host Referer #大型网站通常都会根据该参数判断请求的来源 ...
- 第一个网页（仿照当当网,仅仅使用CSS）
这个网页是在学过CSS之后,对当当网首页进行模仿的网页,没有看当当网的网页源码,纯按照自己之前学的写的,由于是刚学过HTML和CSS才一个星期,所以里面有许多地方写的非常没有水平,仅仅用来学习使用,欢 ...
- Css进阶练习(实现抽屉网样式布局)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- php第三方登录（微博登录，仿照慕课网）
https://www.cnblogs.com/haoyu521/p/5606931.html 1:开发之前,请大家先自行熟悉一下OAuth协议原理. 2:我们开发需要具备一个外网可访问的线上域名,如 ...
- HTML-CSS写抽屉网的置顶区域
1.在pycharm的已有工程中新建一个html文件. 2.在<body></body>标签内部写入要内容: <div class='head-box' > < ...
- 导航条且手机版.html——仿照官网例子
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- angular2系列教程（二）模板语法
今天我们要讲的是angualr2的模板语法,官网写的很清楚,但我也用通俗易懂的讲法再罗列一下吧! 例子
- DotNet 资源大全中文版，内容包括：编译器、压缩、应用框架、应用模板、加密、数据库、反编译、IDE、日志、风格指南等
DotNet 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-dotnet 是由 quozd 发起和维护.内容包括:编译器. ...
- Smarty模板引擎技术
Smarty模板引擎技术 什么是模板引擎? 什么是Smarty模板引擎? 为何选择Smarty模板引擎? 如何使用Smarty模板引擎? 一.历史背景 场景一:回顾之前编写PHP项目的方式 //链接数 ...
随机推荐
- BZOJ 1562 变换序列 二分图匹配+字典序
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1562 题目大意: 思路: 逆序匹配,加边匹配的时候保持字典序小的先加入. 具体证明:h ...
- xss实现获取网站源码
当网站cookie设置了httponly,xss获取不到到网站的cookie.但是我们是可以获取到网站后台的url. 这时候我们可以xss得到网站后台源码,从而找到网站后台的一些敏感操作:添加用户,删 ...
- 1、RabbitMQ入门
RabbitMQ 可以参考官网进行学习! 开发语言:Erlang – 面向并发的编程语言. AMQP:是消息队列的一个协议. mysql 是 java 写的吗?不是 那么 java 能不能访问?可以, ...
- 【问题】 cookie 不保存特殊字符 解决办法
遇到的问题: 在做项目,用geolocation 获取经纬度,格式如(23.1133,113.2552) ,想保存到cookie中备用.但读取cookie出来之后发现逗号变成了 %2c. 找到的原因 ...
- [LuoguP1363]幻想迷宫
[LuoguP1363]幻想迷宫(Link) 现在有一个迷宫,从迷宫边界的任意一点可以走到对面,即:若都是路面,则可以从\((1, i)\)走到\((N, i)\).其余情况依旧.问是否可以从指定的起 ...
- Mac 下 SVN 的使用
在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...
- Unity Loding白屏
卡loading很多时候是由于网络原因造成的,你可以尝试断网,进入离线模式.如果使用VPN也可以先关闭使用,部分Vpn的配置也会导致该问题出现.最后可以查看一下防火墙的设置.
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
- No active profile set, falling back to default profiles: default
No active profile set, falling back to default profiles: default 这个错误是由于idea没有设置默认启动环境,设置即可
- 19-3-14Python中函数的进阶
1.动态参数: def func(*args): #在形参位置*叫做聚合 print(args) #元组形式 func(1,2,3,4,5,6) def func(**kwargs): # 动态关键字 ...