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项目的方式 //链接数 ...
随机推荐
- poj3718 Facer's Chocolate Dream
题目链接 正解:组合数+$dp$. 今天考试的题,考试的时候感觉自己有点脑残过头了.. 似乎发现了所有$1$其实都是一样的,然后不知道怎么强制每种物品只选一个.. 然后就写了一个所有物品可以选任意个的 ...
- 安装LAMP PHP的./configure 參数，未出现MYSQ
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/default7/article/details/30613781 编译參数: ./configure ...
- 【[ZJOI2008]泡泡堂】
想贪心就是反复\(hack\)自己的过程 首先这很田忌赛马,但是又不完全一样 田忌赛马保证了所有马的实力不同,因此没有平局 田忌赛马的策略是当自己最强的马比不过对方最强的马的时候,就用自己最弱的马来自 ...
- git用户限制ssh登录服务器
服务器额外的防范措施: 搭建git服务器后通常会建立一个git账户,其它人共用这个账户来克隆或推送数据到git仓库中,通常也只需要这个功能,但是如果不加限制,那么其它人可以通过这个git账户登录到主机 ...
- [BJWC2018]最长上升子序列
十分感谢GXZ大佬的讲解,此处致以敬意!emmmm在初学状压DP时就理解了如此精妙的一道题,感到很开森~ \(Address\) ________________ #\(\color{red}{\ma ...
- Mac 下 SVN 的使用
在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...
- JavaScript前端将时间戳转换为日期格式
function (data) { var date = new Date(data) var Y = date.getFullYear() + '-' var M = (date.getMonth( ...
- LINUX升级PHP版本至5.4.26
参考网址:http://www.itbulu.com/wdcp-php54.html文件:链接:http://pan.baidu.com/s/1slbbNxr 密码:s0yb 1.运行下载PHP版本文 ...
- android学习：关于RelativeLayout叠放布局的问题
RelativeLayout布局关于元素叠加的问题 1.RelativeLayout布局中的元素如果要实现元素叠加必须设置 RelativeLayout.ALIGN_PARENT_TOP 这样元素 ...
- iOS之限制TextField的输入长度
网上有很多限制textField输入长度方法,但是我觉得都不是很完美,准确来说可以说是不符合实际开发的要求,因此在这里整理一下textField限制输入长度的方法.我所采用的并不是监听方法而是最不同的 ...