<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="v.js"></script>
</head>
<style>
*{
margin: 0;padding:0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height:10%;
background:yellow;
}
section{
width: 80%;
margin: 0 auto;
background:red;
}
footer{
width: 100%;
height: 60px;
background:blue;
}
.h_content{
width: 80%;
margin: 0 auto;
background:#ccc;
text-align: center;
display: table;
height: 100%;
}
.h_content ul{
text-align: center;
width: 60%;
background: #aaa;
height: 30px;
display: table-cell;
vertical-align: middle;
}
.h_content li{
display: inline-block;
width: 30px;
background:purple;
margin-right: 15px;
height: 30px;
}
.s_content{
position: relative;
overflow: hidden;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 200px;
}
.c_l{
position: absolute;
width: 200px;
top: 0;
left: 0;
height: 200px;
background: #ffaacc;
}
.c_m{
position: absolute;
width: 200px;
top: 0;
left: 200px;
background: #aaa;
margin-bottom: -2000px;
padding-bottom: 2000px;
word-wrap: break-word;
　　 word-break: break-all;
/*文字换行*/
line-height: 30px;
}
.c_r{
background: #aaccdd;
margin-left: 400px;
height: 200px;
}
.c_l2{
width: 300px;
height: 200px;
background: #ddaacc;
}
.c_r2{
background: #00ff00;
margin-left: 300px;
height: 200px;
margin-top: -200px;
}
.c_l3{
float: left;
background: #aabbcc;
height: 200px;
width: 150px;
}
.c_m3{
height: 200px;
background: #ccbbaa;
margin: 0 150px;
}
.c_r3{
float: right;
background: #aabbcc;
height: 200px;
width: 150px;
}
table{
width: 100%;
border: none;
text-align: center;
vertical-align: middle;
color: #fff;
font-size: 20px;
}
table td:nth-child(1){
background: #f0f;
}
table td:nth-child(3){
background: #f0f;
}
table td:nth-child(2){
width: 600px;
height: 200px;
background: #ddaacc;
}
</style>
<body>
<header>
<div class="h_content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
</ul>
</div>
</header>
<section>
<!-- 定位实现自适应 -->
<div class="s_content">
<div class="c_l">左侧宽高固定</div>
<div class="c_m">中间不设置高度，通过margin，padding与左右元素对齐</div>
<div class="c_r">右侧宽度占满剩余的空间</div>
</div>
<!-- margin-top负值实现自适应布局 -->
<div class="s_content">
<div class="c_l2">左侧宽高固定</div>
<div class="c_r2">右侧宽度占满剩余的空间</div>
</div>
<!-- 两侧宽度固定，中间自适应 -->
<div class="s_content">
<div class="c_l3">左侧宽度固定</div>
<div class="c_r3">右侧宽度固定</div>
<div class="c_m3">中间宽度不固定</div>
</div>
<table cellspacing="0">
<tr>
<td>左侧自适应</td>
<td>中间宽度固定</td>
<td>右侧自适应</td>
</tr>
</table>
</section>
<footer></footer>
</body>
</html>

css布局篇的更多相关文章

  1. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  2. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  3. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  4. html+css 布局篇

    float 做了float后有一些不好的影响. 1.背景不能显示 由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景 ...

  5. CSS布局篇——固宽、变宽、固宽+变宽

    学了前端挺久了.近期写一个项目測试系统,布局时发现自己对变宽+固宽的布局还没有全然掌握,所以在这里总结一下,以后须要的时候回头看看. 1.最简单的当然是一列或多列固宽 比如两列固宽: <1> ...

  6. 3.实战HTML+CSS布局（实例入门篇）

    转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...

  7. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  8. 第九篇、CSS布局

    <!--css布局 标准流:从上到下 从左到右 脱离标准流:(浮在父控件的最左边或者最右边)(类似ios在window上添加的控件) 1.float: 2.position: absolute( ...

  9. [面试仓库]CSS面试题汇总--布局篇

    一,盒模型   说到 CSS 布局这块的内容,首当其冲的就是我们的盒模型宽度计算问题,在开始我们的问题之前,我们首先要搞懂这些概念: 盒模型里面的内容(content): 也就是实实在在要展现的内容, ...

随机推荐

  1. ActiveX控件资料

    Visual Studio 2008(c#)开发ActiveX控件及制作CAB包总结(1) 分类: C#2011-05-27 15:50 403人阅读 评论(0) 收藏 举报 c#stringhook ...

  2. ext等待提示

    1.Store加载信息等待 ExtJs的Store在加载时候一般是延迟加载的,这时候Grid就会先出现一片空白,等加载完成后才出现数据:因此,我们需要给它添加一个提示信息! 但是Store却没有wai ...

  3. jquery easy ui 学习 （5） windowlayout

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. python3数据类型--数字

    数字 Python数字数据类型用于存储数值.数字数据类型是不允许改变的,所以如果改变数字数据类型的值,将重新分配内存空间. 以下实例在变量赋值时Number对象被创建: #!/usr/bin/env ...

  5. 【记录】在MAC上安装caffe

    ---恢复内容开始--- 最近尝试在MAC(OS X 10.11 El Capitan)上安装Caffe 以及Python接口遇到了一些问题但是官方安装教程上并没有提出这些问题的解决办法搜索了很久(主 ...

  6. python中的几种遍历列表的方法比较

    python的内容非常丰富,给我们带来的便利很多,很多事情的表达方法有很大的多样性,比如我经常需要遍历一个列表,取它的下标和值,这个时候就有很多方法需要取舍一下才行. for循环遍历 l = [1,2 ...

  7. 初识Java反射机制

    1.ClassLoader的类加载机制:并非一次性加载,而是需要的时候加载(运行期间动态加载)(Class文件加载到内存的代码段),static语句块在加载后执行一次.dynamic语句块(就是一个语 ...

  8. Chrome extension

    PageSpeed Tincr SpriteMe JSONView FireMobileSimulator for Google Chrome™

  9. h.264全搜索以及快速全搜索算法

    Full Search 全搜索算法是最简单暴力的一种搜索算法,对搜索范围内的所有像素点都进行匹配对比,选出最合适的运动向量,以下就是一个搜索范围为4的全搜索范围(单个像素点) /*! ******** ...

  10. KEIL C51 中嵌入汇编以及C51与A51间的相互调用

    如何在 KEIL C51(v6.21) 中调用汇编函数的一个示例 有关c51调用汇编的方法已经有很多帖子讲到,但是一般只讲要点,很少有对整个过程作详细描述,对于初学者是不够的,这里笔者通过一个简单例子 ...