【web】上机实验六

最新推荐文章于 2023-04-23 17:34:41 发布

shangguan_1234

最新推荐文章于 2023-04-23 17:34:41 发布

阅读量480

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/shangguan_1234/article/details/52863024

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现这个

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#frame {
position: relative;
width:400px;
height:300px;
margin: auto;
background-color:#FFF
}
#apDiv1 {
position: relative;
width:400px;
height:50px;
margin: auto;
background-color:#666
}
#apDiv2frame {
position: relative;
width:400px;
height:160px;
margin: auto;
}
#apDiv2left {
position: relative;
width:200px;
height:160px;
float:left;
background-color: #6cf
}
#apDiv2right {
position: relative;
width:200px;
height:160px;
float: right;
background-color: #0F0
}

#apDiv4 {
position: relative;
width:400px;
height:50px;
margin: auto;
background-color:#666
}
</style>
</head>

<body style="font:12px Arial, Helvetica, sans-serif; text-align:center;">
<div id="frame">

<div id="apDiv1">顶部（head）</div>
<div id="apDiv2frame">
<div id="apDiv2left">登录（login）</div>
<div id="apDiv2right">登录说明（login_right）</div>
</div>
<div id="apDiv4">底部（footer）</div>

</div>
</body>
</html>

还有这个

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#frame {
position: relative;
width:1000px;
height:96px;
margin: auto;
background-color:#FFF
}
#LOGO {
position: relative;
width:280px;
height:96px;
float:left;
background-color:#666
}
#menu {
position: relative;
width:580px;
height:39px;
float:right;
background-color: #666
}
#hello{
position: relative;
width:580px;
height:33px;
float:right;
background-color: #0f0
}
#nav {
position: relative;
width:1000px;
height:34px;
background-color: #6cf
}
</style>
</head>

<body style="font:12px Arial, Helvetica, sans-serif; text-align:center;">
<div id="frame">

<div id="frame">
<div id="LOGO">LOGO</div>
<div id="menu">顶部菜单</div>
<div id="hello">你好，贵美商城欢迎您！</div>
</div>
<div id="nav">导航条</div>

</div>
</body>
</html>