码迷，mamicode.com
首页 > Web开发 > 详细

绝对定位实现网页布局

时间：2015-07-26 09:41:18      阅读：111      评论：0      收藏：0      [点我收藏+]

标签：

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位实现布局</title>
<style type="text/css">
* {
    margin:0;
	padding:0;
	font-size:12px;
	color:#333;
	font-family:Verdana, Geneva, sans-serif, "宋体";
	list-style:none;
}
a {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
	color:#ff0000;
}
p {
	line-height:24px;
}
#wrap {
	width:780px;
	margin:0 auto;
	padding:0 10px 10px;
	border-left:1px solid #e7e7e7;
	border-right:1px solid #e7e7e7;
}
#header {
	width:100%;
	overflow:hidden;
}
.logo {
	width:100%;
	height:80px;
	line-height:80px;
	font-size:30px;
	font-family:"微软雅黑";
	background:#3399cc;
	color:#fff;
	text-indent:30px;
}
.nav {
	width:100%;
	margin-top:10px;
}
.nav li {
	margin:0 32px;
	float:left;
}
.nav li a {
	color:#7f7f7f;
	font-size:16px;
	display:block;
	padding-bottom:2px;
}
.nav li a:hover {
	border-bottom:3px solid #cc0000;
	text-decoration:none;
}
.nav li.current {
	border-bottom:3px solid #cc0000;
}
.nav li.current a:hover {
	border-bottom:none;
}
#mainbody {
	     width:100%;
	     position:relative;
	     margin-top:20px;
}
#sidebar {
	width:180px;
	padding-bottom:10px;
}
#sidebar dl {
	padding:0 0 5px;
}
#sidebar dt {
	font-weight:bold;
	line-height:22px;
	font-family:"微软雅黑";
	font-size:14px;
	color:#fff;
	background:#3399cc;
	padding:5px 0 5px 15px;
	font-weight:normal;
	margin-bottom:10px;
}
#sidebar dd {
	line-height:20px;
	padding-left:15px;
}
#sidebar dd.current a {
	color:#f00;
}
#content {position: absolute;top: 0;margin-left: 200px;}
#content h1 {
	color:#000;
	font-size:24px;
	font-family:"微软雅黑";
	font-weight:normal;
}
#content  h3 {
	margin-top:10px;
	line-height:26px;
}
#content  dl {
	margin-bottom:10px;
}
#content  dt {
	font-weight:bold;
	line-height:26px;
}
#content  dd {
	line-height:22px;
}
.learn a {
	color:#900b09;
	text-decoration:underline;
	padding-bottom:2px;
}
.learn a:hover {
	text-decoration:none;
}
.tips {
	color:#999;
	margin-top:20px;
}
.pageto {
	border-top:1px solid #aaa;
	border-bottom:3px solid #aaa;
	margin-top:5px;
	padding:15px 0;
}
.pageto a {
	margin:0 10px;
	background:#f3f3f3;
	padding:5px 20px;
	border:1px solid #dfdfdf;
	color:#555;
}
.pageto a:hover {
	color:#000;
	text-decoration:none;
}
.disline {
	border-bottom:1px dashed #ccc;
	margin-top:10px;
}
#footer {
	width:100%;
	margin-top:15px;
	padding:15px 0;
	text-align:center;
	color:#999;
	background:#ddd;
}
</style>
</head>

<body>
<div id="wrap">
  <div id="header">
    <div class="logo">前端开发教程</div>
    <div class="nav">
      <ul>
        <li class="current"><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Ajax</a></li>
      </ul>
    </div>
  </div>
  <div id="mainbody">
    <div id="sidebar">
      <dl>
        <dt>CSS 基础教程</dt>
        <dd class="current"><a href="#">CSS 简介</a></dd>
        <dd><a href="#">CSS 基础语法</a></dd>
        <dd><a href="#">CSS 高级语法</a></dd>
        <dd><a href="#">CSS 派生选择器</a></dd>
        <dd><a href="#">CSS id 选择器</a></dd>
        <dd><a href="#">CSS 类选择器</a></dd>
        <dd><a href="#">CSS 属性选择器</a></dd>
        <dd><a href="#">CSS 创建</a></dd>
      </dl>
      <dl>
        <dt>CSS 样式</dt>
        <dd><a href="#">CSS 背景</a></dd>
        <dd><a href="#">CSS 文本</a></dd>
        <dd><a href="#">CSS 字体</a></dd>
        <dd><a href="#">CSS 链接</a></dd>
        <dd><a href="#">CSS 列表</a></dd>
        <dd><a href="#">CSS 表格</a></dd>
        <dd><a href="#">CSS 轮廓</a></dd>
      </dl>
      <dl>
        <dt>CSS 盒子模型</dt>
        <dd><a href="#">CSS 盒子模型概述</a></dd>
        <dd><a href="#">CSS 内边距</a></dd>
        <dd><a href="#">CSS 边框</a></dd>
        <dd><a href="#">CSS 外边距</a></dd>
        <dd><a href="#">CSS 外边距合并</a></dd>
      </dl>
      <dl>
        <dt>CSS 定位</dt>
        <dd><a href="#">CSS 定位概述</a></dd>
        <dd><a href="#">CSS 相对定位</a></dd>
        <dd><a href="#">CSS 绝对定位</a></dd>
        <dd><a href="#">CSS 浮动</a></dd>
      </dl>
      <dl>
        <dt>CSS 选择器</dt>
        <dd><a href="#">CSS 元素选择器</a></dd>
        <dd><a href="#">CSS 选择器分组</a></dd>
        <dd><a href="#">CSS 类选择器详解</a></dd>
        <dd><a href="#">CSS ID 选择器详解</a></dd>
        <dd><a href="#">CSS 属性选择器详解</a></dd>
        <dd><a href="#">CSS 后代选择器</a></dd>
        <dd><a href="#">CSS 子元素选择器</a></dd>
        <dd><a href="#">CSS 相邻兄弟选择器</a></dd>
        <dd><a href="#">CSS 伪类</a></dd>
        <dd><a href="#">CSS 伪元素</a></dd>
      </dl>
      <dl>
        <dt>CSS 高级</dt>
        <dd><a href="#">CSS 对齐</a></dd>
        <dd><a href="#">CSS 尺寸</a></dd>
        <dd><a href="#">CSS 分类</a></dd>
        <dd><a href="#">CSS 导航栏</a></dd>
        <dd><a href="#">CSS 图片库</a></dd>
        <dd><a href="#">CSS 图片透明</a></dd>
        <dd><a href="#">CSS 媒介类型</a></dd>
        <dd><a href="#">CSS 注意事项</a></dd>
        <dd><a href="#">CSS 总结</a></dd>
      </dl>
    </div>
    <div id="content">
      <h1>CSS 简介</h1>
      <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
      <h3>你应该知道这些知识</h3>
      <p>在继续之前，你应该有一个以下基本认识：</p>
      <p>· HTML / XHTML</p>
      <p class="learn">如果您希望首先学习这些项目，我们的<a href="#">主页</a>上可以找到教程。</p>
      <div class="disline"></div>
      <h3>什么是CSS？</h3>
      <p>CSS即级联样式表。
        它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
      <div class="disline"></div>
      <h3>基本信息</h3>
      <p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
      <div class="disline"></div>
      <h3>发展历史</h3>
      <dl>
        <dt>CSS1</dt>
        <dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd>
      </dl>
      <dl>
        <dt>CSS2</dt>
        <dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd>
      </dl>
      <h3>CSS3</h3>
      <dl>
        <dt>CSS3 计划将 CSS 划分为更小的模块。</dt>
        <dd class="learn"><a href="#">亲自体验一下</a>！</dd>
      </dl>
      <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
      <p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
    </div>
  </div>
  <div id="footer">慕课©版权所有</div>
</div>
</body>
</html>

 来源：慕课网-网页布局基础

绝对定位实现网页布局

标签：

原文地址：http://www.cnblogs.com/wx1993/p/4677101.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！