<!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. 弹出层iframe链接设置

    jQuery 比较方便就是创建删除了,所以创建一个弹出层就是当点击div的时候创建一个新的div利用固定位fixed(与浏览器窗口有关)和z-index覆盖body 并利用opacity设置其透明度产 ...

  2. python运维开发之第十一天（RabbitMQ，redis）

    一.RabbitMQ python的Queue与RabbitMQ之间的理解: python的进程或线程Queue只能python自己用.RabbitMQ队列多个应用之间共享队列,互相通信. 1.简单的 ...

  3. 工具函数之JS

    1. 判断元素是否有滚动条 /* 检测元素是否出现滚动条 @param [object HTMLElement] elm The HTMLElement object @return [Object] ...

  4. OC中的@interface和java中的区别以及 @implementation @protocol

      java 在java中的interface是‘接口’的意思,而java的类声明用class,即接口用interface声明,类是用class声明,是两个独立的部分. 只有在类声明要实现某个接口时, ...

  5. JS和正则表达式验证手机号码、邮箱等

    <-------------------------------------验证手机号码---------------------------------------------> fun ...

  6. HDU 3446 daizhenyang's chess

    http://acm.hdu.edu.cn/showproblem.php?pid=3446 题意:一个棋盘,有个KING,有一些能走的点,每次只能走到没走过的地方,没路可走的输,求先手是否必胜. 思 ...

  7. MV规范 ---ISO7816 T=1协议的时间特性

    终端发送的连续字符之间的时间间隔应在11etu域42etu之间,卡片应能正确接收终端发送的时间间隔为11.8+Netu的连续字符. 卡片发出的连续字符之间的时间间隔最小为11etu,终端应能正确接收卡 ...

  8. eclipse能够自动提示变量名.

    打开 Eclipse -> Window -> Perferences -> Java -> Editor -> Content Assist,在右边最下面一栏找到 au ...

  9. MySQL全连接(Full Join）实现,union和union all用法

    MySQL本身不支持你所说的full join(全连接),但可以通过union来实现 ,下面是一个简单测试,可以看看: mysql> CREATE TABLE a(id int,name cha ...

  10. logstash 通过mysql 慢日志了解(?m)

    <pre name="code" class="html"># User@Host: zjzc_app[zjzc_app] @ [10.171.24 ...