简单网页的模板,多多支持,感谢。知识整理
目录
一、HTML5
简单网页设计:
CSS修饰
一、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">菜单一</a>
<a href="http://www.example">菜单二</a>
<a href="http://www.example">菜单三</a>
<a href="http://www.example">菜单四</a>
<a href="http://www.example">菜单五</a>
<a href="http://www.example">菜单六</a>
<a href="http://www.example">菜单七</a>
<a href="http://www.example">菜单八</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;
}
图片
更多推荐
HTML5基础网页设计(加代码CSS)
发布评论