<!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. sql 汉字转首字母拼音

    从网络上收刮了一些,以备后用 create function fun_getPY(@str nvarchar()) returns nvarchar() as begin declare @word ...

  2. struts.xml详细配置

    <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN&quo ...

  3. C#开发学习——.net C#中页面之间传值传参的方法以及内置对象

    1.QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法.但是对于传递数组或对象的话,就不能 ...

  4. PHP之路——Apache启动失败查看日志

    windows下用运行 eventvwr--->windows日志--->应用程序日志-->软件

  5. matplotlib绘制精美的图表（这是教程哦）

    http://sebug.net/paper/books/scipydoc/matplotlib_intro.html

  6. linux下的工具总结

    1. 编译阶段 gcc: -Wall -Werror -O2 make nm: nm -C a.o c++filt strip objdump readelf 2. 链接 ldd: ldd ./a.o ...

  7. ClipDrawable 资源

    ClipDrawable 代表从其他位图上截取的一个“图片片段”. 示例: main.xml <?xml version="1.0" encoding="utf-8 ...

  8. [flex & bison]编译器杂谈

    flex与bison是编译器设计工具.这里的编译器为广义,其中包括一般的编译器.脚本解析器等,需要进行语言结构解析来得出意义的程序. 当我们需要用一个语言来设计一款编译器时,需要考虑太多设计重心外的东 ...

  9. MATLAB图像处理基础

    MATLAB图像处理基础 2.2.1 图像文件格式及图像类型 1．MATLAB支持的几种图像文件格式: ⑴JPEG(Joint Photogyaphic Expeyts Group):一种称为联合图像 ...

  10. Hadoop Compression

    文件压缩主要有两方面的好处:一方面节省文件存储空间:另一方面加速网络数据传输或磁盘读写.当处理大规模的数据时这些效果提升更加明显,因此我们需要仔细斟酌压缩在Hadoop环境下的使用.   目前已经存在 ...