无序列表
标签:<ul、>、<li>
属性:disc、circle、square
有序列表
标签:<ol>、<li>
属性:A、a、l、start
嵌套列表
标签:<ul>、<ol>、<li>
自定义列表
标签:<dl>、<dt>、<dd>
html块元素
块元素在显示的时候会以新的一行开始
如:h1、p、ul
html内联元素
内联元素一般不会以新行开始
如:b、a、img
html <div>元素
div元素也被称为块元素,组合html元素的容器
html <span>元素
span元素是内联元素,可以作为文本的容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
body{
margin: 0px;
}
#background{
background-color: antiquewhite;
width: 100%;
height: 1000px;
}
#head{
background-color: coral;
width: 100%;
height: 20%;
}
#left{
background-color: aqua;
width: 30%;
height: 50%;
float: left;
}
#center{
background-color: bisque;
width: 40%;
height: 50%;
float: left;
}
#right{
background-color: cyan;
width: 30%;
height: 50%;
float: left;
}
#bottom{
background-color: brown;
width: 100%;
height: 20%;
clear: both;
}
#footer{background-color: grey;
width: 100%;
height: 10%;
clear: both;
}
</style>
</head>
<body>
<div id="background">
<div id="head">
<p>android开发教程之view组件添加边框示例</p>
</div>
<div id="left">
<table height="100%" width="100%" style="background-color: cornsilk">
<tr>
<td colspan="3" width="100%" height="20%" style="background-color: gold">这是头部</td>
</tr>
<tr>
<td width="30%" height="50%" style="background-color: yellow">
<ol type="a">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ol>
</td>
<td width="40%" height="50%" style="background-color: red">这是中间</td>
<td width="30%" height="50%" style="background-color: greenyellow">这是右边</td>
</tr>
<tr>
<td colspan="2" width="50%" height="20%" style="background-color: aquamarine">这是左边</td>
<td width="50%" height="20%">这是右边</td>
</tr>
<tr>
<td colspan="3" style="background-color: burlywood">这是下面</td>
</tr>
</table>
</div>
<div id="center">
<table height="100%" width="100%" style="background-color: cornsilk">
<tr>
<td colspan="3" width="100%" height="20%" style="background-color: gold">这是头部</td>
</tr>
<tr>
<td width="30%" height="50%" style="background-color: yellow">
<ol type="a">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ol>
</td>
<td width="40%" height="50%" style="background-color: red">这是中间</td>
<td width="30%" height="50%" style="background-color: greenyellow">这是右边</td>
</tr>
<tr>
<td colspan="2" width="50%" height="20%" style="background-color: aquamarine">这是左边</td>
<td width="50%" height="20%">这是右边</td>
</tr>
<tr>
<td colspan="3" style="background-color: burlywood">这是下面</td>
</tr>
</table>
</div>
<div id="right">
<table height="100%" width="100%" style="background-color: cornsilk">
<tr>
<td colspan="3" width="100%" height="20%" style="background-color: gold">这是头部</td>
</tr>
<tr>
<td width="30%" height="50%" style="background-color: yellow">
<ol type="a">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ol>
</td>
<td width="40%" height="50%" style="background-color: red">这是中间</td>
<td width="30%" height="50%" style="background-color: greenyellow">这是右边</td>
</tr>
<tr>
<td colspan="2" width="50%" height="20%" style="background-color: aquamarine">这是左边</td>
<td width="50%" height="20%">这是右边</td>
</tr>
<tr>
<td colspan="3" style="background-color: burlywood">这是下面</td>
</tr>
</table>
</div>
<div id="bottom">
<p>
需要注意的是我给TextureView的父容器RelativeLayout设置了Drawable,并设置了Padding。
</p>
</div>
<div id="footer">
<p>关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿</p>
</div>
</div>
</body>