html+css布局类型
一、单列布局
1.代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>单列布局</title>
<style>
body{
margin:0;}
.box{
width:960px;
margin:0 auto;
}
.dinbu{
height:100px;
border:1px solid #f0f;
}
.zhongbu{
height:400px;
border:1px solid #f00;
}
.dibu{
height:100px;
border:1px solid #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="dinbu"></div>
<div class="zhongbu"></div>
<div class="dibu"></div>
</div>
</body>
</html>
运行结果
二、双列布局
代码如下
<doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>双列布局(自适应布局 固定布局)</title>
<style>
body{
margin:0;
}
.box{
width:960px;
margin:0 auto;
}
.zuo{
width:20%;
height:500px;
background-color:#f0f;
float:left;
}
.you{
width:80%;
height:500px;
background-color:#f00;
float:right;
}
</style>
</head>
<body>
<div class="box">
<div class="zuo"></div>
<div class="you"></div>
</div>
</body>
</html>
运行结果
三、三列标签
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>三列布局</title>
<style>
body{
margin:0;
}
.box{
width:960px;
margin:0 auto;
position:relative;
}
.zuo{
width:200px;
height:500px;
background-color:#f0f;
position:absolute;
left:0;
top:0
}
.zhong{
height:500px;
background-color:#ff0;
margin:0 300px 0 200px;
}
.you{
width:300px;
height:500px;
background-color:#f00;
position:absolute;
right:0;
top:0
}
</style>
</head>
<body>
<div class="box">
<div class="zuo"></div>
<div class="zhong"></div>
<div class="you"></div>
</div>
</body>
</html>
运行结果
四、混合布局
代码如下
<doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>混合布局</title>
<style>
body{
margin:0;
}
.box{
width:960px;
margin:0 auto;
}
.dinbu{
height:100px;
background-color:#ccc;
}
.zhongbu{
height:400px;
background-color:#fff;
position:relative;
}
.zhongbu .zuo{
width:200px;
height:400px;
background-color:#f0f;
position:absolute;
left:0px;
top:0px
}
.zhongbu .czy{
height:400px;
background-color:#f00;
margin:0 310px 0 210px;
}
.zhongbu .you{
width:300px;
height:400px;
background-color:#00f;
position:absolute;
right:0px;
top:0px;
}
.dibu{
height:100px;
background-color:#cba;
}
</style>
</head>
<body>
<div class="box">
<div class="dinbu"></div>
<div class="zhongbu">
<div class="zuo"></div>
<div class="czy"></div>
<div class="you"></div>
</div>
<div class="dibu"></div>
</div>
</body>
</html>
运行结果
总结:
1、css布局主要是四种
2、排版布局需要掌握的知识
- div 相关属性
- float 浮动属性
- position 定位属性
- clear 清除浮动的应用
html+css布局类型的更多相关文章
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- Python之路-python(css布局、JavaScript)
CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...
- css布局模型
---恢复内容开始--- 在清楚了CSS盒模型的基本概念,盒模型类型,我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是CSS最基本,最核心的概念.但布局模型是建立在盒型基础之上,又不同 ...
- css布局模式
css布局模型在网页中,元素有三种布局模型: 流动模型(Flow) 浮动模型 (Float) 层模型(Layer) 流动Flow模型(一): 流动(Flow)是默认的网页布局模式.也就是说网页在默认状 ...
- css012 css布局简介
css012 css布局简介 一. 网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二. 如何进行css布局 1.强大的<div>标签 网页的h ...
- 《深入理解bootstrap》读书笔记:第三章 CSS布局
一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...
- [Bootstrap]7天深入Bootstrap(3)CSS布局
Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (I ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
随机推荐
- 2)thinkphp的带有命名空间的自动加载机制
(1)为啥thinkphp里面的文件要是写你的命名空间,要与你的路径一样,因为在thinkphp实现自动加载机制的原理,就是靠的你的命名空间对应这个路径,然后自动加载机制通过这个路径找到你的类文件,然 ...
- 39)PHP,选取数据库中的两列
首先是我的文件关系: 我的b.php是主php文件,BBB.php是配置文件,login.html是显示文件, b.php文件代码: <?php /** * Created by PhpStor ...
- python Pandas Profiling 一行代码EDA 探索性数据分析
文章大纲 1. 探索性数据分析 代码样例 效果 解决pandas profile 中文显示的问题 1. 探索性数据分析 数据的筛选.重组.结构化.预处理等都属于探索性数据分析的范畴,探索性数据分析是帮 ...
- linux系统权限(基本权限)
linux的系统权限:r-- 100 4-w- 010 2--x 001 1 [root@localhost ~]# ll -d dir drwxrwxrwx root root Nov : di ...
- 电脑莫名重启,VS代码丢失的解决办法
今天写了一天的代码,然后电脑放在公司了,出去看电影(公司组织红色文化培训..)回来发现电脑重启,再打开电脑,VS的代码都不见了.好慌.... 别慌处理办法来了: 打开everything(没有的可以下 ...
- nginx相关地址
http://www.nginx.cn/doc/ 中文文档 http://nginx.org/en/docs/ 英文文档 https://pan.baidu.com/s/1qWAZ ...
- SQL语句:把Excel文件中数据导入SQL数据库中的方法
1.从Excel文件中,导入数据到SQL数据库情况一.如果接受数据导入的表不存在 select * into jd$ from OPENROWSET('MICROSOFT.JET.OLEDB.4.0' ...
- Python连接SQLServer2000
http://www.pymssql.org/en/stable/pymssql_examples.html 实例 import pymssql # 获取连接 conn = pymssql.conne ...
- android cpu affinity
暂时无法获取当前线程运行在哪个CPU上,待调查... int omask = 0; int nmask = 0xF0; static void affinity() { int err; int sy ...
- 听《Sara》
Sara这首歌太好听了,虽然没有清楚具体是唱什么,但我感觉是讲一个故事,很好奇,我找到了歌词. Sara 塞拉 鲍勃迪伦 I laid on a dune, I looked at the sky, ...