您的位置：首页 > 其它

列表 块 div和table布局

2016-02-04 23:09 363 查看

列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ul type="circle"><!无序列表   type默认是实心 circle是空心 square是方块>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<ol start="1" type="1"><!有序列表   start是开始的标号  type是可以是阿拉伯数字 英文 罗马数字>
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
</body>
</html>


块

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块</title>
<style type="text/css">
#id1{
color: blue;
}
/*只有ID=id2 中的a标签改变*/
#id2 a{
color: bisque;
}
</style>
</head>
<body>
<!块元素 每个元素都会换行： ul  h1  p>
<!内联元素 不会换行： b  a  img>
<div id="id1">
<h1>h1</h1>
<p>p1</p>
</div>
<div id="id2">
<b>b</b>
<a>a</a>
</div>
<span>与div相比是只能作为文字的容器</span>
</body>
</html>


div布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin: 0px;
}
#container{
width: 100%;
height: 1000px;
background-color: darkgrey;
}
#head{
width: 100%;
height: 10%;
background-color: aquamarine;
}
#container_menu{
width: 30%;
height: 80%;
background-color: #d26965;
float: left;
}
#container_body{
width: 70%;
height: 80%;
background-color: cornflowerblue;
float: left;
}
#foot{
width: 100%;
height: 10%;
background-color: darkmagenta;
clear: left;
}
</style>
</head>
<body>
<div id="container">
<div id="head">头</div>
<div id="container_menu">菜单</div>
<div id="container_body">内容</div>
<div id="foot">底部</div>
</div>
</body>
</html>


table布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>

</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="1000px" style="background-color: darkgray">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: darkmagenta">头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: aqua">菜单</td>
<td width="70%" height="80%" style="background-color: coral">内容</td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: darkolivegreen">底部</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航