学习网页编程(一)
给定一个网页,首先要分析网页的布局,一般情况下一个网页可以概括的分为四部分:
1. header(标题栏),
2. nav(导航栏),
3. content(内容),
4. footer(页脚)
给定一个网页的结构图如下:
以上结构用html实现如下:
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
具体的样式用CSS实现,这样会使得html代码简洁清晰。
CSS实现代码
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
}
#header
{
width: 96%;
height: 40px;
background: #efdfed;
font-weight: bold;
font-size: 16px;
padding: 15px 0 0 50px;
margin: 0px 2px;
color: Red;
}
#nav
{
width: 96%;
height: 30px;
background: #efdfed;
font-weight: bold;
font-size: 16px;
padding: 12px 0 0 50px;
margin: 5px 2px;
color: Red;
}
#content
{
width: 96%;
height: 42%;
background: #efdfed;
font-size: 16px;
font-weight: bold;
padding: 17% 0 0 50px;
margin: 5px 2px;
color: Red;
}
#footer
{
width: 96%;
height: 30px;
background: #efdfed;
font-weight: bold;
font-size: 16px;
padding: 15px 0 0 50px;
margin: 5px 2px;
color: Red;
}
</style>
最后实现的效果图如下
作者:绿茶叶
出处:http://www.cnblogs.com/greenteaone/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。