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项目的方式 //链接数 ...
随机推荐
- Web App, Native APP,Hybird App 介绍
一.Web App 这个主要是采用统一的标准的 HTML,JavaScript.CSS 等 web 技术开发. 用户无需下载,通过不同平台 的浏览器访问来实现跨平台, 同时可以通过浏览器支持充分使用 ...
- Vue实现购物小球抛物线
.shop{ position: fixed; top: 300px; left: 40px; } .ball{ position: fixed; left: 32px; bottom: 22px; ...
- Nginx学习之从零搭建静态资源网站
前言 在某学习网站学习了nginx的安装和使用,以此文记录. 环境准备 安装在VMWare下的Centos虚拟机.由于我这是新装的虚拟机.所以很多插件都没有,这里干脆一次性安装上. wget ...
- .Net Sokcet 异步编程
一.概述 使用Socket 进行实时通讯,如果使用APM,只需要一个Socket类即可.如果使用EAP,则还需要一个SocketAsyncEventArgs类.本文以EAP的方式展开讨论. Socke ...
- CC2640R2F&TI-RTOS 拿到 TI CC2640R2F 开发板 第三件事就是使用 TI-RTOS 创建 一个任务 和 使用 信号量 超时来闪烁 LED灯
/* * data_process.c * * Created on: 2018年7月5日 * Author: admin */ #include <ti/sysbios/knl/Task.h& ...
- SpringMVC转发页面405错误
需要在该方法前加上:@ResponseBody注解 加上这个注解后可能在转发页面的时候出现问题,则需要在方法的参数中增加HttpServletRequest 和HttpServletResponse参 ...
- hiveSql常见错误记录
1. In strict mode, if ORDER BY is specified, LIMIT must also be specified. 这个错误提示是因为在hive下写的sql使用了or ...
- mysql5.7 安装版 表不能输入汉字解决方案
安装版本 的安装目录没有 my.ini 配置文件 在所在表执行 alter table 数据表名 CONVERT TO CHARACTER SET utf8;
- webpack+vuecli使用问题总结
1,按照官网安装步骤install $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm insta ...
- 【2017 ICPC亚洲区域赛北京站 J】Pangu and Stones（区间dp）
In Chinese mythology, Pangu is the first living being and the creator of the sky and the earth. He w ...