一、HTML5

简单网页设计：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单网页测试</title><style>header {background-color: #05386b;display: block;color: #e61010;text-align: center;}</style><link rel="stylesheet" href="E:\CSS\html5.css"></head><body><header><h1>页 眉</h1><h2>欢迎来到  我的网页</h2></header><div id="container"><nav><a href="http://www.example.com">菜单一</a><a href="http://www.example.com">菜单二</a><a href="http://www.example.com">菜单三</a><a href="http://www.example.com">菜单四</a><a href="http://www.example.com">菜单五</a><a href="http://www.example.com">菜单六</a><a href="http://www.example.com">菜单七</a><a href="http://www.example.com">菜单八</a></nav><aside><h3>侧栏科目</h3><p>侧栏内容 JAVA语言</p><p>侧栏内容  HTML5设计</p><p>侧栏内容  虚拟化</p><p>侧栏内容  数据库基础</p><p>侧栏内容  C语言</p><p>侧栏内容 python</p></aside><section><article><header><h1>文章页眉Article Header</h1></header><p>关于如何使用典韦解控问题</p><p>如何安其拉大招被免疫</p><p>如何使沙漠荒漠化</p><p>怎么才能找到工作</p><p>找工作就来58同城</p><p>瘦不是问题</p><footer><h2>文章页脚Article Footer</h2></footer></article><article><header><h1>文章页眉Article Header</h1></header><p>欢 迎</p><p>内容</p><p>正文内容</p><footer><h2>文章页脚Article Footer</h2></footer></article></section><aside><h3>侧栏Aside 科目</h3><p>侧栏内容 Linux</p><p>侧栏内容  Windows</p><p>侧栏内容  易语言</p><p>侧栏内容 web</p><p>侧栏内容  前端</p><p>侧栏内容 后端</p></aside><footer><h2>页脚Footer</h2></footer></div></body>
</html>

CSS修饰

body {background-color:#CCCCCC;margin:0px auto;max-width:900px;border:solid;border-color:#FFFFFF;color:RGB(120,102,87);
}header {background-color:#0e81f3;display:block;color:#FFFFFF;text-align:center;
}h1 {front-size:72px;margin:0px;
}h2 {front-size:24px;margin:0px;text-align:center;
}h3 {front-size:18px;margin:0px;text-align:center;
}nav {display:block;wifth:100%float:left;text-align:center;background-color:white;padding-top:20px;padding-bottom:20px;
} nav a:link,nav a:visited {display:inline;border-bottom:3px solid #fff;padding:10px;text-decoretion:none;margin:5px;
}nav a:hover {color:white;background-color:#F47D31;
}nav h3 {margin 15px;
}#container{backgroumd-color:#CCC
}section{display:block;width:60%;float:left;
}article{background-color:#eee;display:block;margin:10px;padding:10px;
}article header{padding:5px;
}article footer{padding:5px;
}article h1{font-size:18px;
}aside{diaplay:block;width:20%;float:left;
}aside h3{margin:15px;
}aside p{margin:15px;font-weight:bold;
}footer{clear:both;display:block;background-color:#2289F0;color:#FFFFFF;text-align:center;padding:15px;
}/*links*/
a{color:#F47D31;
}a:hover{text-decoration:ungerline;
}

图片