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项目的方式 //链接数 ...
随机推荐
- robotframwork数据库测试（一）——pymysql与pyodbc
本章节仅总结一下使用pymysql与pyodbc链接MySQL数据库. 2个都可以链接mysql数据,进行增删改查.但是呢,使用pyodbc操作数据库,对中文支持度好一些.pymysql则需要处理一下 ...
- ROS C++ 规范概要
一.动机 代码一致才能可读.联调.高效率.高复用.可移植性. 二.命名方式 CamelCased camelCased under_scored ALL_CAPITALS 2.1 Package命名方 ...
- Python KafkaProducer and KafkaConsumer的开发模块
1.在python中往kakfa写数据和读取数据,使用的是python-kafka库 2.消费者需持续写入数据,因groupid存在偏移量,才能看看到数据. 3.安装库的命令为pip install ...
- 【luogu P2245 星际导航】 题解
题目链接:https://www.luogu.org/problemnew/show/P2245 = 货车运输 被逼着写过mst+lca 后来成了mst+树剖 #include <cstdio& ...
- cloudstack 用admin 账号创建虚拟机只是提示insufficient resource
报错: com.cloud.exception.ResourceUnavailableException: Resource [DataCenter:1] is unreachable: Unable ...
- 跟我一起学Linux-线程创建，类似FreeRTOS创建任务
1.参考学习大神网址:http://blog.csdn.net/ithomer/article/details/6063067 #include<stdio.h> #include< ...
- MySQL5.7.19 免安装配置 + Navicat for MySQL安装和破解（附全部资源）
近段时间因为工作原因安装了好多次本地MySQL,安装过程也是时有曲折,索性记录一下. 环境: Win10 家庭版 MySQL5.7.19 (链接:https://pan.baidu.com/s/1 ...
- [iOS]UIInterpolatingMotionEffect重力视觉差
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
- C++笔记014：C++对C的扩展——新增数据类型bool类型
原创笔记,转载请注明出处! 点击[关注],关注也是一种美德~ 1.C++在C语言的基本类型系统之上增加了bool类型. 2.C++中的bool类型变量可取的值只有true 和false,true代表真 ...
- Redis（四）：解析配置文件redis.conf
解析配置文件redis.conf目录导航: 它在哪 Units单位 INCLUDES包含 GENERAL通用 SNAPSHOTTING快照 REPLICATION复制 SECURITY安全 LIMIT ...