html使用列表 以及div的布局和table的布局
来源：互联网 发布：微信群淘宝客机器人 编辑：程序博客网 时间：2024/04/30 10:46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background-color: darkgray;margin: 0px">
<!-- 无序列表 -->
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<!--无序列表实体圆-->
<ul type="disk">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<!--无序列表空心圆-->
<ul type = "circle">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<!--无序列表实体方块-->
<ul type = "square">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<hr/>
<!--------------------------------------------------------------------------------------------->
<!--有序列表-->
<ol>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol type ="a">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol type ="A">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol type = "i">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol type = "I">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol start="2">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<hr/>
<!--------------------------------------------------------------------------------------------->
<!--列表嵌套-->
<ul>
<li>
<ol>
<li>嵌套1</li>
<li>嵌套2</li>
</ol>
</li>
<li>喝喝</li>
</ul>
<!--------------------------------------------------------------------------------------------->
<!--html5布局方式-->
<!--div布局-->
<style type = "text/css">
div#divTop {
width: 100%;
height:10%;
background-color: aqua
}
div#divMenu{
width:30%;
height:80%;
float: left;
background-color: blue
}
div#divContent{
width:70%;
height:80%;
background-color: chartreuse;
float:left
}
div#divBottom{
width: 100%;
height: 10%;
background-color: greenyellow;
clear:both;
}
</style>
<div style = "width:100%;height: 950px;">
<div id = "divTop" >top</div>
<div id = "divMenu">menu</div>
<div id = "divContent">content</div>
<div id = "divBottom">bottom</div>
</div>
<!--table布局 应当通过td设置宽和高-->
<hr/>
<br/>
<table style="width: 100%;height: 950px">
<tr style = "background-color: aqua" >
<td colspan = "2" style ="width: 100%;height: 10%">top</td>
</tr>
<tr >
<td style="background-color:blue;width: 30%;height:80%">
menu
</td>
<td style = "background-color: chartreuse;width: 70%;height: 80%">
content
</td>
</tr>
<tr style = "background-color: greenyellow;">
<td colspan = "2" style = "width:100%;height: 10%" > bottom</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="background-color: darkgray;margin: 0px">
<!-- 无序列表 -->
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<!--无序列表实体圆-->
<ul type="disk">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<!--无序列表空心圆-->
<ul type = "circle">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<!--无序列表实体方块-->
<ul type = "square">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<hr/>
<!--------------------------------------------------------------------------------------------->
<!--有序列表-->
<ol>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol type ="a">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol type ="A">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol type = "i">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol type = "I">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<ol start="2">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ol>
<hr/>
<!--------------------------------------------------------------------------------------------->
<!--列表嵌套-->
<ul>
<li>
<ol>
<li>嵌套1</li>
<li>嵌套2</li>
</ol>
</li>
<li>喝喝</li>
</ul>
<!--------------------------------------------------------------------------------------------->
<!--html5布局方式-->
<!--div布局-->
<style type = "text/css">
div#divTop {
width: 100%;
height:10%;
background-color: aqua
}
div#divMenu{
width:30%;
height:80%;
float: left;
background-color: blue
}
div#divContent{
width:70%;
height:80%;
background-color: chartreuse;
float:left
}
div#divBottom{
width: 100%;
height: 10%;
background-color: greenyellow;
clear:both;
}
</style>
<div style = "width:100%;height: 950px;">
<div id = "divTop" >top</div>
<div id = "divMenu">menu</div>
<div id = "divContent">content</div>
<div id = "divBottom">bottom</div>
</div>
<!--table布局 应当通过td设置宽和高-->
<hr/>
<br/>
<table style="width: 100%;height: 950px">
<tr style = "background-color: aqua" >
<td colspan = "2" style ="width: 100%;height: 10%">top</td>
</tr>
<tr >
<td style="background-color:blue;width: 30%;height:80%">
menu
</td>
<td style = "background-color: chartreuse;width: 70%;height: 80%">
content
</td>
</tr>
<tr style = "background-color: greenyellow;">
<td colspan = "2" style = "width:100%;height: 10%" > bottom</td>
</tr>
</table>
</body>
</html>
0 0
- html使用列表 以及div的布局和table的布局
- HTML使用div和table进行布局
- HTML布局----div布局&&table
- div和table页面布局的区别
- table和div布局的比较
- div和table 用作布局的 区别
- <div>和<table>元素的布局
- 列表 块 div和table布局
- DIV+CSS布局和TABLE布局的优缺点讲解
- html布局方式：div和table
- HTML使用<span>和<div>布局中遇到的问题
- 关于html布局中css的写法，以及table的使用技巧
- DIV和table页面布局的区别和联系
- 【DIV+CSS入门教程】二、使用Table布局是不明智的
- DIV+CSS基础教程：使用Table布局是不明智的
- HTML，使用div+css实现自适应table布局
- div 模仿table的左右布局
- DIV+CSS布局和Table布局对比
- [无限互联]学员作品：旅游软件“在路上”IOS客户端
- SDUT 1068-Number Steps（数学：直线）
- poj2406--Power Strings（KMP求最小循环节）
- poj 3921 (控制费用的 最小割)
- Struts 2的工作流程
- html使用列表 以及div的布局和table的布局
- HDOJ题目1505 City Game（动态规划）
- Java 学习 第三章 Java核心-继承与多态
- ANDROID L——Material Design详解（视图和阴影）
- struts2的优点
- poj1961--Period（KMP求最小循环节）
- 一个人的旅行 hdu 2066
- 使用ASP.NET MVC 4 Bootstrap Layout Template(VS2012)
- bluetooth LE HOGP profile的代码大致实现流程（HOGP+GATT）
