html5学习之路_003
html布局
- 使用<div>元素布局
- 使用<table>元素布局
<div>元素布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>div布局</title>
<link rel="stylesheet" type="text/css" href="mycss03.css">
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="footing">底部</div>
</div>
</body>
</html>
<div id="container"> 设置div布局,给一个id为"container";
接下去设置div头部、内容菜单、内容主体、底部;
<link rel="stylesheet" type="text/css" href="mycss03.css"> ,引入css样式。
body{
margin: 0px;
}
div#container{
width: 100%;
height: 950px;
background-color: green;
}
div#heading{
width: 100%;
height: 10%;
background-color: red;
}
div#content_menu{
width: 30%;
height: 80%;
background-color: yellow;
float: left;
}
div#content_body{
width: 70%;
height: 80%;
background-color: firebrick;
float: left;
}
div#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
在这里设置各个部位的宽、高、背景颜色。
body{ margin: 0px; }的作用是去空边,使背景能充满全屏;
float: left 的作用是加浮动,形成从左到右的排列方式;
clear: both 作用是清除浮动。运行之后可以看到效果,如图:
table元素布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px">
<table width="100%" height="700px" style="background: green">
<tr>
<td colspan="2" width="100%" height="10%" style="background: yellow">头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background: fixed;">
<ol>
<li>苹果</li>
<li>香蕉</li>
</ol>
</td>
<td width="70%" height="80%" style="background: magenta;">底部</td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background: honeydew">底部</td>
</tr>
</table>
</body>
</html>
marginheight="0px" 去空边,填充全屏;
table width="100%" height="700px" style="background: green"> 设置table宽高及背景颜色;
<td colspan="2" width="100%" height="10%" style="background: yellow">头部</td> ,其中colspan="2"表示两个方格合并成一个,设置宽高及背景颜色;
第二个<tr></tr>为表格第二行,有两列;第三个<tr></tr>为表格第三行,同样合并两个方格,只有一列。
如此布局运行之后得出的结果为下图:![]()
本站文章为宝宝巴士 SD.Team原创,转载务必在明显处注明:(作者官方网站:宝宝巴士)
转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4754342.html
html5学习之路_003的更多相关文章
- HTML5学习之路
出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.
- html5学习之路_001
安装环境 安装intellij idea作为开发环境 打开环境 新建一个html文件,打开之后出现代码框架,再次基础上继续编码即可,例如: <!DOCTYPE html> <html ...
- html5学习之路_007
CSS概述 CSS指层叠样式表 CSS样式表极大地提高了工作效率 CSS基础语法 selector { property:value } 例:hi {color:red; font-size:14px ...
- html5学习之路_006
表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- html5学习之路_005
PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打 ...
- html5学习之路_004
HTML表单 表单用于获取不同类型的用户输入 常用表单标签 下面为一个简单的表单: <!DOCTYPE html> <html> <head lang="en& ...
- html5学习之路_002
html块 html块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> html内联元素 内联元素头通常不会以新行开始 如:<b> ...
- 8年,从2D到3D,我的学习之路
Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...
- springboot 学习之路 8 (整合websocket(1))
目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...
随机推荐
- 网络流--最大流--EK模板
#include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...
- postman(参数化)
一.参数化 1.新建csv文件 2.csv文件中输入变量名和参数 3.postman中新增接口,并设置变量 4.选择进入runner页面 方法一 方法二 5.导入参数化csv格式文件,点击run It ...
- <学习笔记之 JQuery>
1. mouseenter 当鼠标指针进入(穿过)元素时,触发事件 var is_enter_help = false; $("#help-div").mouseenter(f ...
- libevent(十)bufferevent 2
接上文libevent(九)bufferevent 上文主要讲了bufferevent如何监听读事件,那么bufferevent如何监听写事件呢? 对于一个fd,只要它的写缓冲区没有满,就会触发写事件 ...
- P2764 最小路径覆盖问题 网络流重温
P2764 最小路径覆盖问题 这个题目之前第一次做的时候感觉很难,现在好多了,主要是二分图定理不太记得了,二分图定理 知道这个之后就很好写了,首先我们对每一个点进行拆点,拆完点之后就是跑最大流,求出最 ...
- Linux编程实现递归查找文件
命令格式如下:SCRIPT_NAME SEARCH_ON_DIR SEARCH_FILENAME #!/bin/bash Find(){ files=`` for file i ...
- 【Hadoop离线基础总结】MapReduce案例之自定义groupingComparator
MapReduce案例之自定义groupingComparator 求取Top 1的数据 需求 求出每一个订单中成交金额最大的一笔交易 订单id 商品id 成交金额 Order_0000005 Pdt ...
- python语法学习第六天--字典
字典:可变容器类型,用键值对的形式采用花括号储存(键唯一) 语法:d={key1:value1,key2:value2} 访问字典中的值: 字典名[键名]#若字典中不存在则报错 更改字典: 添加值:字 ...
- [hdu4631 Sad Love Story]最近点对,枚举
题意:S是平面内点的集合,初始为空,每次向集合里面加入一个点P(x,y),询问S内最近点对的距离的平方和 思路:设当前集合的答案为D,则找到集合里面横坐标在(x-√D,x+√D)内的数,用它们来更新答 ...
- 手机app传统邀请码安装与免邀请码安装区别,如何选择呢?
App 邀请机制是每个产品几乎必做的功能点,它一般以两种形式存在:一是作为常置功能用于推荐,二是作为裂变活动用于邀请. 无论以哪种形式出现,都可以归为社交分享的一种表现方式.相较于营销推广,邀请好友机 ...