<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.pg-header{ ???????????/*position用于固定标题头永远放在上面*/ ???????????position: fixed; ???????????right:0; ???????????left:0; ???????????top:0; ???????????background-color: #2459a2; ???????????/*height、line-height用于设置行高，并将内容居中*/ ???????????height: 48px; ???????????line-height: 48px; ???????} ???????.pg-body{ ???????????background-color: white; ???????????/*margin-top: 用于设置去顶部的边距，头部是48px,所以这里是50px,预留了一部分空间;*/ ???????????margin-top: 48px; ???????????height: 5000px; ???????} ???????.w{ ???????????/*width:为头部具体内容宽度;*/ ???????????width: 980px; ???????????margin: 0 auto; ???????} ???????.pg-header .menu{ ???????????/*使其既具有block的宽度和高度特性*/ ???????????display: inline-block; ???????????/*使该标签的上下边距为0，左右边距为10px*/ ???????????padding: 0 10px; ???????????color: white; ???????} ???????/*当鼠标放到此位置时，进行背景颜色替换 */ ???????.pg-header .menu:hover{ ???????????background-color: aqua; ???????} ???</style></head><body> ???<div class="pg-header"> ???????<div class="w"> ???????????<a class="logo">LOGO</a> ???????????<a class="menu">全部</a> ???????????<a class="menu">42区</a> ???????????<a class="menu">社区</a> ???????????<a class="menu">段子</a> ???????????<a class="menu">1024</a> ???????????<!--float:right 让登陆标签右移动--> ???????????<div class="menu" style="float: right">登陆</div> ???????????<!--float:right 让注册标签右移动--> ???????????<div class="menu" style="float: right">注册</div> ???????????<!--当父div管不住子div的float时，可使用如使下面的语句--> ???????????<div style=“clear:both;”></div> ???????</div> ???</div> ???<div class="pg-body"> ???????<div class="w">bbbb</div> ???</div></body></html>展示
HTML 之 标准版面设计
原文地址：https://blog.51cto.com/12965094/2368487