您的位置:首页 - 教程 - web前端 - 正文
HTML初学简单页面结构
查看效果:
http://hovertree.com/texiao/css/26/

代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面结构练习_何问起</title>
<base target="_blank" />
<style>
body {
background: #CCC;
}
.index {
max-width: 90%;
background: #3F0;
margin: 0px auto;
}
.head {
width: 100%;
height: 60px;
}
.head a {
min-width: 12.5%;
height: auto;
background: #4A69A6;
color: #FFF;
font-size: large;
display: block;
text-align: center;
float: right;
margin-top: 2%;
}
.main {
width: 100%;
min-height: 600px;
background: #FFFFFF;
text-align:center;
}
.foot {
width: 100%;
background-color: cadetblue;
min-height: 60px;
text-align:center;font-family:Arial, Helvetica, sans-serif;
}.foot a{color:white;}
</style>
</head>

<body>
<div id="index">
<div class="index">
<div class="head">
<a href="http://hovertree.com/">进入官网</a>
</div>
<div class="main">
</div>
<div class="foot">&copy; <a href="http://hovertree.com/texiao/css/26/">版权所有</a></div>
</div>
</div>
</body>
</html>

评论: