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

本文根据《网页布局基础》第四章绝对定位布局教程内容进行总结，对通过position属性的设置实现未定义宽度大小的部分自适应宽度布局，这篇代码为具体实现一个稍复杂的页面（初学党，复杂程度自动脑补），简化的模型见上一篇文章，本文页面还是参考《网页布局基础》第四章中的示例，老师讲的比较简单，当时觉得这个页面挺漂亮的就想做出来试试，于是就花了三个小时根据原页面效果进行代码实现（初学党，速度不太美 ///_/// ），因为不喜欢原作内容页面宽度，所以自己做的效果与课程示例有点差别。





绝对定位实现横向两列自适应宽度布局（练习）

    *{
 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{
 
 position: relative;
 width: 100%;
 margin: 70px 0 0;
    }
    
    .sidebar{
 width: 200px;
 
 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{
 
 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;
    }





    
 
     前端开发教程
     
  
      
   CSS
      
      
   HTML
      
      
   Javascript
      
      
   jQuery
      
      
   Ajax
      
  
     
 
 
     
  
      
   CSS 基础教程
   
CSS 简介
   
   
CSS 基础语法
   
   
CSS 高级语法
   
   
CSS 派生选择器
   
   
CSS id选择器
   
   
CSS 类选择器
   
   
CSS 属性选择器
   
   
CSS 创建
   
      
      
   CSS 样式
   
CSS 背景
   
   
CSS 文本
   
   
CSS 字体
   
   
CSS 链接
   
   
CSS 列表
   
   
CSS 表格
   
   
CSS 轮廓
   
      
      
   CSS 盒子模型
   
CSS 盒子模型概述
   
   
CSS 内边距
   
   
CSS 边框
   
   
CSS 外边距
   
   
CSS 外边距合并
   
      
      
   CSS 定位
   
CSS 定位概述
   
   
CSS 相对定位
   
   
CSS 绝对定位
   
   
CSS 浮动
   
      
      
   CSS 选择器
   
CSS 元素选择器
   
   
CSS 选择器分组
   
   
CSS 类选择器详解
   
   
CSS ID选择器详解
   
   
CSS 属性选择器详解
   
   
CSS 后代选择器
   
   
CSS 子元素选择器
   
   
CSS 相邻兄弟选择器
   
   
CSS 伪类
   
   
CSS 伪元素
   
      
      
   CSS 高级
   
CSS 对齐
   
   
CSS 尺寸
   
   
CSS 分类
   
   
CSS 导航栏
   
   
CSS 图片库
   
   
CSS 图片透明
   
   
CSS 媒介类型
   
   
CSS 注意事项
   
   
CSS 总结
   
      

  
     
     
  CSS 简介
  
  
  
  
      你应该知道这些知识
      在继续之前，你应该有一个以下基本认识：

      · HTML / XHTML

      如果您希望首先学习这些项目，我们的主页上可以找到教程。
  
  
  
      什么是CSS？
      CSS即级联样式表。 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
  
  
  
      基本信息
      CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
  
  
  
      发展历史
      CSS1
      作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。
      CSS2
      作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。
      CSS3
      CSS3 计划将 CSS 划分为更小的模块。
      亲自体验一下！
  
  
  
  
  
      本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
  
     
 
 慕课©版权所有

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

CSS教程相关栏目本月热门文章