<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: aqua">
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: #9e5ea5" align="center">这是头部</td>
</tr>
<tr>
<td width="30" height="80%" style="background-color:blue" align="center">左菜单</td>
<td width="70" height="80%" style="background-color:blueviolet" align="center">右菜单</td>
</tr>
<tr>
<td colspan="2" width="100" height="10%" style="background-color:darkcyan">底部</td>
</tr>
</table>
</body>
</html>
按 Ctrl+C 复制代码按 Ctrl+C 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div控制</title>
<style>
div {
border: 1px solid red;
width: 400px;
height: 150px;
font-size: 35px;
}
.temple2 {
/*隐藏超出的区域*/
overflow: hidden;
}
.temple3 {
/*显示滚动条*/
overflow: scroll;
}
.temple4 {
/*自动设置是否显示滚动条*/
overflow: auto;
}
</style>
</head>
<body>
<div class="temple">
床前明月光，<br/>
肚子饿得慌。<br/>
举头望腊肉，<br/>
低头闻香肠。
</div>
<br/><br/><br/><br/><br/><br/>
<div class="temple2">
床前明月光，<br/>
肚子饿得慌。<br/>
举头望腊肉，<br/>
低头闻香肠。
</div>
<br/><br/><br/><br/><br/><br/>
<div class="temple3">
床前明月光，<br/>
肚子饿得慌。<br/>
举头望腊肉，<br/>
低头闻香肠。
</div>
<br/><br/><br/><br/><br/><br/>
<div class="temple4">
床前明月光，<br/>
肚子饿得慌。<br/>
举头望腊肉，<br/>
低头闻香肠。
</div>
</body>
</html>
按 Ctrl+C 复制代码按 Ctrl+C 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body {
margin: 0px;
}
#container {
width: 100%;
height: 950px;
background-color: #9e5ea5;
}
#heading {
width: 100%;
height: 10%;
background-color: #df89ff;
}
#content_menu {
width: 30%;
height: 80%;
background-color: #ff309e;
float: left;
}
#content_body {
width: 70%;
height: 80%;
background-color: #7fffd4;
float: left;
}
#footing {
width: 100%;
height: 10%;
background-color: cadetblue;
clear: both;
}
</style>
</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>
时间： 2024-10-23 04:34:25