w3c网站为例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页</title>
<style>
*{margin: 0px; padding: 0px;}/*设置页面边界为0*/
.shang{width: 100%; height: 10%; position: fixed;}
.zhong{width: 100%; height: 80%; position: fixed; top: 10%;}
.xia{width: 100%; height: 10%; position: fixed; top: 90%;
background-color: darkblue;}
.shang1{width: 300px; height: 70px; position: relative; left: 10%;
background-image: url(img/w3c.png);float:left;}
.shang2{width: 40%; height: 100%;position: relative; left: 35%;}
.shang21{position: fixed; left: 500px; top: 5%;}
.shang22{position: fixed; left: 900px; top: 5%;}
.shang3{width: 10%; height: 10%; position: fixed; right: 10%; top: 5%;}
.zhong1{width: 100%; height: 8%; position: relative;}
.zhong11,.zhong12,.zhong13{width: 20%; height: 100%; position: relative; left: 10%;
float:left;}
.zhong11{background-color: fuchsia; font-size: 25px; text-align:center;
line-height: 50px; vertical-align: middle;}
.zhong12{font-size: 20px; text-align:center; line-height: 50px; vertical-align: middle;}
.zhong13{font-size: 20px; text-align:center; line-height: 50px; vertical-align: middle;}
.zhong11:hover{transition: 2s; background-color: darkblue; color: white;}
.zhong2{width: 100%; height: 52%; position: relative; background-color: salmon;}
</style>
</head>
<body>
<div class="shang">
<div class="shang1"></div>
<div class="shang2">
<form action="http://www.baidu.com" method="get">
<input class="shang21" type="text"style="width:400px;height:30px;"
placeholder="请输入"/>
<input class="shang22" type="submit" value="搜索" style="width:50px;height:33px;"/>
</form>
</div>
<div class="shang3">
<form action="http://www.baidu.com" method="get">
<input class="shang31" type="submit" value="登录" style="width:50px;height:33px;"/>
<input class="shang32" type="submit" value="注册" style="width:50px;height:33px;"/>
</form>
</div>
</div>
<div class="zhong">
<div class="zhong1">
<div class="zhong11">〓教程分类〓</div>
<div class="zhong12">〓百度〓</div>
<div class="zhong13">〓博客园〓</div>
</div>
<div class="zhong2"></div>
</div>
<div class="xia"></div>
</body>
</html>
<script>
</script>
扫一扫
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
