<!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. DEDE在下载文件时会生成table

    当我们在系统内容模型中添加附件类型字段时,前台需要用{dede:field name='字段名'/}来调用. 例如我在后台发布一篇文章,上传一个zip的附件,字段的时间内容是:'/uploads/so ...

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

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

  3. ASP.Net string 类的扩展方法 [转]

    string 类的扩展方法列表(基本相同于 IEnumerable<T> 接口的成员列表): Aggregate<>     //累加 All<>        / ...

  4. STM32f103------按键处理

    (1)按键去抖 /******************************************函数名称:Key_Scan(GPIO_TypeDef*GPIOx,u16 GPIO_pin)*描 ...

  5. 【Hybrid App】关于Hybrid App技术解决方案的选择

    [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员,技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越多 ...

  6. WPF利用动画实现圆形进度条

    原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...

  7. Android 介绍spydroid每个包的大体功能

    看了接近一周的spydroid源代码,对spydroid这个开源项目有了一定的认识.也许有些理解不一定正确,给后来者一点启示.也是自己对rtsp协议,rtp协议的总结. 在windows下,如果安装了 ...

  8. linux shell 终端中文乱码（转）

    方法一:修改/etc/sysconfig/i18n 文件把里面的LANG="en_US"改成 GB2312就可以了要重启一下机器不用重启的方法,直接# LANG＝"GB2 ...

  9. Qt入门（7）——QApplication类

    QApplication类管理图形用户界面应用程序的控制流和主要设置.它包含主事件循环,在其中来自窗口系统和其它资源的所有事件被处理和调度.也用于处理应用程序的初始化和结束,并且提供对话管理.它也处理 ...

  10. cryptopp开源库的使用（一）：md5加密

    项目总是各种新需求,最近遇到需要对字符串进行md5加密,确保传输字符串的有效性. 考虑到跨平台性和通用性,选择了cryptopp开源库,这里主要是用静态库调用. 1.引入头文件和lib库 #inclu ...