文档章节

HTML三列布局

黄柳淞
 黄柳淞
发布于 2016/12/15 00:05
字数 935
阅读 114
收藏 0

1.三列布局1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三列布局</title>
	<style type="text/css">
		body{padding: 0;margin: 0;}
		.left{width:33.3%;height: 500px;background-color: #ccc;float: left;}
		.middle{width:33.3%;height: 500px;background-color: #bbb;float: left;}
		.right{width:33.3%;height: 500px;background-color: #aaa;float: left;}
	</style>
</head>
<body>
	<div class="left">33.3%</div>
	<div class="middle">33.3%</div>
	<div class="right">33.3%</div>
</body>
</html>

效果图:

 

2.html三列布局2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三列布局</title>
	<style type="text/css">
		body{padding: 0;margin: 0;}
		.left{width:200px;height: 500px;background-color: #ccc;position: absolute;left: 0;top:0;}
		.middle{height: 500px;background-color: #bbb;margin:0 300px 0 200px;}
		.right{width:300px;height: 500px;background-color: #aaa;position: absolute;right: 0px;top:0;}
	</style>
</head>
<body>
	<div class="left">200px</div>
	<div class="middle">随着互联网的发展速度迅猛,前端工程师职业越来越火热,想学习Web前端技能吗 ? 该路径从基础知识到实战案例演练,一步步带您快速掌握如何搭建网站静态页面、开发网站交互特效,为您打开WEB前端工程师大门。还在等什么?快来学习吧!随着互联网的发展速度迅猛,前端工程师职业越来越火热,想学习Web前端技能吗 ? 该路径从基础知识到实战案例演练,一步步带您快速掌握如何搭建网站静态页面、开发网站交互特效,为您打开WEB前端工程师大门。还在等什么?快来学习吧!</div>
	<div class="right">300px</div>
</body>
</html>

效果图:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三列布局</title>
	<style type="text/css">
		body{padding: 0;margin: 0;}
		.left{width:200px;height: 500px;background-color: #ccc;position: absolute;left: 0;top:0;}
		.middle{height: 500px;background-color: #bbb;margin:0 300px 0 200px;}
		.right{width:300px;height: 500px;background-color: #aaa;position: absolute;right: 0px;top:0;}
	</style>
</head>
<body>
	<div class="left">200px</div>
	<div class="middle">随着互联网的发展速度迅猛,前端工程师职业越来越火热,想学习Web前端技能吗 ? 该路径从基础知识到实战案例演练,一步步带您快速掌握如何搭建网站静态页面、开发网站交互特效,为您打开WEB前端工程师大门。还在等什么?快来学习吧!随着互联网的发展速度迅猛,前端工程师职业越来越火热,想学习Web前端技能吗 ? 该路径从基础知识到实战案例演练,一步步带您快速掌握如何搭建网站静态页面、开发网站交互特效,为您打开WEB前端工程师大门。还在等什么?快来学习吧!</div>
	<div class="right">300px</div>
</body>
</html>

效果图:

3.三列布局3

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三列布局</title>
	<style type="text/css">
		body{padding: 0;margin: 0;}
		.left{width:200px;height: 500px;background-color: #ccc;position: absolute;left: 0;top:0;}
		.middle{height: 500px;background-color: #bbb;margin:0 310px 0 210px;}
		.right{width:300px;height: 500px;background-color: #aaa;position: absolute;right: 0px;top:0;}
	</style>
</head>
<body>
	<div class="left">200px</div>
	<div class="middle">随着互联网的发展速度迅猛,前端工程师职业越来越火热,想学习Web前端技能吗 ? 该路径从基础知识到实战案例演练,一步步带您快速掌握如何搭建网站静态页面、开发网站交互特效,为您打开WEB前端工程师大门。还在等什么?快来学习吧!随着互联网的发展速度迅猛,前端工程师职业越来越火热,想学习Web前端技能吗 ? 该路径从基础知识到实战案例演练,一步步带您快速掌握如何搭建网站静态页面、开发网站交互特效,为您打开WEB前端工程师大门。还在等什么?快来学习吧!</div>
	<div class="right">300px</div>
</body>
</html>

效果图:

© 著作权归作者所有

上一篇: HTML混合布局
下一篇: html两列布局
黄柳淞
粉丝 2
博文 108
码字总数 54251
作品 0
南宁
程序员
私信 提问
Div CSS常用布局方式代码集锦

现在都Div CSS布局了,本文收集整理了一些常用的DivCSS布局代码,比如两行一列、三行一列、两行两列、三行两列、两行三列、单行三列以及float定位的代码集锦,下面逐一帖出各个布局的代码: ...

名字已被取
2016/03/01
496
0
CSS——把“可以动的盒子”更优雅地展示:③ 常用的“布局”

前言: 拿到一张设计稿,我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替,以前很多老的布局方式现在也慢慢淡化了,那哪些是我们最基本最常用的布局方式呢? 本篇给...

itsOli
05/09
0
0
从css盒子与定位到布局

css盒子模型 原理:padding,border,margin三者构成一个盒子。 图片来自网络 Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内...

黑天很黑
2017/01/26
0
0
css布局 - 常规上中下分左右布局的一百种实现方法

一、 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部、底部和左侧固定不动,只有中间右侧超出可滚动。 html: 1 1 2 关键点: 上下部分就是普通处理,fixed固定布局 position: ...

Eddie_yang
2018/11/15
25
0
10分钟理解CSS3 Grid布局

基本介绍 上一篇文章我们介绍了css3 flexbox,今天我们再来说说css3的另外一个强大的功能:Grid。 Grid做前端的同学应该都很熟悉了,翻译成中文为“栅格”,用过bootstrap、semantic ui、ant...

前端小攻略
2018/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HBase新建表报错 org.apache.hadoop.hbase.TableExistsException

之前安装了旧版本的hbase, 没有清理其在Zookeeper上的内容。 解决办法 stop-hbase.sh zkCli.sh >>> rmr /hbase >>> quit start-hbase.sh...

dreamness
6分钟前
0
0
大数据技术的应用现状与展望

本文是我即将由嵌入式底层驱动行业转入大数据研究领域的综述文章,案例摘自《程序员》电子期刊,由于初学者知识面较窄,查看文献量较少,因此后续还会在此基础上,继续跟踪并深入研究,为论文...

陈小君
12分钟前
0
0
NCRE考试感想 三级信息安全(上)

时间节点 报名时间:2017-06 考试时间:2017-09 查询成绩:2017-11   考试简述 满分100分,时间120分钟。题型有三种,选择题、综合题、应用题。   备考经验 题库是WLJY的,买了激活码。为了...

志成就
19分钟前
0
0
百度地图显示我的位置

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery-1.8.2.min.js"></script></head><body><sec......

塔塔米
24分钟前
0
0
mysql mysql常用的常用函数

1. 数学函数 函 数 作 用 ABS(x) 返回x的绝对值 CEIL(x),CEILIN(x) 返回不小于x的最小整数值 FLOOR(x) 返回不大于x的最大整数值 RAND() 返回0~1的随机数 RAND(x) 返回0~1的随机数,x值相同返...

edison_kwok
55分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部