本文根据《网页布局基础》第四章绝对定位布局教程内容进行总结，对通过position属性的设置实现未定义宽度大小的部分自适应宽度布局，这篇代码为具体实现一个稍复杂的页面（初学党，复杂程度自动脑补），简化的模型见上一篇文章，本文页面还是参考《网页布局基础》第四章中的示例，老师讲的比较简单，当时觉得这个页面挺漂亮的就想做出来试试，于是就花了三个小时根据原页面效果进行代码实现（初学党，速度不太美 ///_/// ），因为不喜欢原作内容页面宽度，所以自己做的效果与课程示例有点差别。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>绝对定位实现横向两列自适应宽度布局（练习）</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 20px;
font-family: Verdana, 宋体;
color: #333;
}
li{
list-style: none;
}
/*****************************************************/
#wrap{
width: 850px;
margin: 0 auto;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
padding: 0 10px;
}
/*****************************************************/
#header{
}
.logo{
width: 100%;
height: 80px;
line-height: 80px;
background-color: #3399cc;
text-indent: 30px;
font-family: "微软雅黑";
font-size: 30px;
color: #fff;
}
.nav{
width: 100%;
}
.nav li a{
font-size: 18px;
text-decoration: none;
color: #888;
}
.nav li a:hover{
border-bottom: 3px solid red;
}
.nav li:first-child{
border-bottom: 3px solid red;
}
.nav li{
float: left;
margin: 20px 40px;
}
/*****************************************************/
#mainbody{
/*border:1px solid #999;*/
position: relative;
width: 100%;
margin: 70px 0 0;
}
/*****************************************************/
.sidebar{
width: 200px;
/*height: 500px;*/
text-indent: 20px;
}
.sidebar dl{
margin-bottom: 18px;
}
.sidebar dt{
background-color: #3399cc;
line-height: 35px;
font-size: 18px;
color: #fff;
}
.sidebar dd a{
text-decoration: none;
font-size: 12px;
}
.sidebar dd a:hover{
text-decoration: underline;
color: red;
}
.sidebar dd:first-child{
text-decoration: underline;
color: red;
}
.vilid{
color: red;
text-decoration: underline;
}
/*****************************************************/
.content{
/*border:1px solid #000;*/
width:
background-color: rgba(0,0,0,0.2);
position: absolute;
top: 0;
margin-left:220px;
font-family: "微软雅黑";
font-weight: normal;
}
button{
border:1px solid #ddd;
background-color: #eee;
font-size: 13px;
line-height: 26px;
width: 80px;
height: 26px;
color: #666;
margin: 0 12px;
}
button:hover{
color: #000;
}
h1{
font-weight: normal;
color: #000;
font-size: 24px;
line-height: 30px;
height: 30px;
}
h3{
font-size: 13px;
line-height: 30px;
font-weight: bolder;
}
p{
font-size: 12px;
}
p a{
font-size: 12px;
color: red;
}
.content_footer{
font-size: 13px;
line-height: 40px;
color: #999;
}
.line0{
width: 100%;
border-bottom: 1px dashed #ddd;
margin: 15px 0;
}
.line1{
width: 100%;
border-bottom: 1px solid #999;
margin: 10px 0;
}
.line2{
width: 100%;
border-bottom: 3px solid #999;
margin: 10px 0;
}
/*****************************************************/
#footer{
background-color: #ddd;
width: inherit;
margin-top: 15px;
padding: 15px 0;
text-align: center;
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo">前端开发教程</div>
<div class="nav">
<ul>
<li>
<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 class="sidebar">
<div>
<dl>
<dt>CSS 基础教程</dt>
<dd>
<a href="" class="vilid">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>
<div class="content">
<h1>CSS 简介</h1>
<div class="line1"></div>
<div class="btn"><button>上一章</button><button>下一章</button></div>
<div class="line2"></div>
<div>
<h3>你应该知道这些知识</h3>
<p>在继续之前，你应该有一个以下基本认识：<br>
· HTML / XHTML<br>
如果您希望首先学习这些项目，我们的<a href="">主页</a>上可以找到教程。</p>
</div>
<div class="line0"></div>
<div>
<h3>什么是CSS？</h3>
<p>CSS即级联样式表。 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
</div>
<div class="line0"></div>
<div>
<h3>基本信息</h3>
<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
</div>
<div class="line0"></div>
<div>
<h3>发展历史</h3>
<h3>CSS1</h3>
<p>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</p>
<h3>CSS2</h3>
<p>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</p>
<h3>CSS3</h3>
<h3>CSS3 计划将 CSS 划分为更小的模块。</h3>
<p><a href="">亲自体验一下</a>！</p>
</div>
<div class="line1"></div>
<div><button class="btn">上一章</button><button>下一章</button></div>
<div class="line2"></div>
<div class="content_footer">
本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
</div>
</div>
</div>
<div id="footer">慕课©版权所有</div>
</div>
</body>
</html>点击查看更多内容
7人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦