首页手记绝对定位实现内容块自适应宽度布局（实例练习）
绝对定位实现内容块自适应宽度布局（实例练习）

标签：
Html5 CSS3
本文根据《网页布局基础》第四章绝对定位布局教程内容进行总结，对通过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">慕课&copy;版权所有</div>
    </div>
</body>
</html>
点击查看更多内容