html 后台页面布局

<!DOCTYPE html>

<html lang="en">

<head>

<title></title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="css/style.css" rel="stylesheet">

<style>

body{

margin:0;

}

.left{

float:left;

}

.right{

float:right;

}

.clear{

clear:both;

}

.pg-header .header{

margin: 0 auto;

width:100%;

min-width:1080px;

height: 48px;

background-color:#2a6496;

line-height: 48px;

color: white;

}

.pg-header .header .logo{

font-size:16px;

font-weight: 600;

width: 200px;

text-align: center;

padding:0 20px;

}

.pg-header .header .user{

width:150px;

height: 48px;

position: relative;

}

.pg-header .header .user-list{

width:120px;

background-color: grey;

position: absolute;

top:40px;

right:80px;

display:none;

z-index: 10;

}

.pg-header .header .user-list a{

display: block;

}

.pg-header .header .user a img{

height: 32px;

width: 32px;

border-radius: 50%;

padding: 0 5px;

vertical-align: middle;

}

.pg-header .header:hover .user-list{

display: block;

}

.pg-content .left_content{

position: absolute;

top:48px;

left:0;

bottom: 0;

width:280px;

background-color: grey;

}

.pg-content .right_content{

position: absolute;

right:0;

top:48px;

bottom: 0px;

left:285px;

background-color: #eeeeee;

overflow: auto;

}

.pg-content .right_content .right_text{

min-width: 780px;

background-color: red;

z-index: 9;

}

</style>

</head>

<body>

<div class=‘pg-header‘>

<div class=‘header‘>

<div class=‘logo left‘>博客</div>

<div class=‘user right‘><a><img src=‘head2.jpg‘/>howhy</a></div>

<div class=‘user-list‘><a>个人中心</a><a>设置</a></div>

</div>

</div>

<div class=‘pg-content‘>

<div class=‘left_content‘></div>

<div class=‘right_content‘>

<div class=‘right_text‘>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<p>erwer</p>

<div>

</div>

</div>

<div class=‘pg-footer‘></div>

</body>

</html>

时间: 2024-10-09 04:04:18

html 后台页面布局的相关文章

搭建后台页面布局利用属性target 属性

HTML 5 <form> target 属性 HTML 5 <form> 标签 实例 提交一个在新窗口中打开的表单: <form action="demo_form.asp" target="_blank"> First name: <input type="text" name="fname" /><br /> Last name: <input type=

后台管理页面布局

1 <!DOCTYPE html> 2 <!--后台管理页面布局1--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .rig

jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载

http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hibernate实现了一个系统的一小部分功能,下面给大家分享一下. 首先看运行效果: [图一:登录页] [图二:页面布局] [图三:用户编辑层] [图四:确认弹出框] 准备 easyui插件简介在这就不赘述了,大家可以在iteye上找到很多该插件的相关消息. 如果页面需要使用easyui插件,需要引进一下js和

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

CSS3与页面布局学习笔记(四)——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结(四)——页面布局的多种方法

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

【SSH项目实战03】使用EasyUI搭建后台页面框架

前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基本开发环境已经搭建好了,这一节我们搭建一下后台的页面.我们讨论一下两种搭建方式:基于frameset和基于easyUI.最后我们会使用easyUI来开发. 1. 抽取公共JSP页面 我们先来看一下当前的jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

【Android】纯代码创建页面布局(含异步加载图片)

开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 Fragment 中,采用 ScrollView + LinearLayout 实现. 1 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http:/

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加