<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.22</title>
<style>
</style>
</head>
<body>
<header>
<h1>头部</h1>
</header>
<nav>
<ul>
<li id="home"><a href="#">主页</a></li>
<li id="about"><a href="#">关于</a></li>
<li id="contact"><a href="#">联系我们</a></li>
</ul>
</nav>
<section>
<h2>我的文章</h2>
<article>
<p>这是第一篇文章</p>
<p>这是第二篇文章</p>
<p>这是第三篇文章</p>
<p>这是第四篇文章</p>
</article>
</section>
<aside>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
</ul>
</aside>
<footer>
<ul>
<li><a href="#">版权信息</a></li>
<li><a href="#">站点地图</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.22</title>
<style>
body,ul,li,h1,h2{
margin:0;
padding:0;
}
li{
list-style-type:none;
}
a{
text-decoration:none;
color:#fff;
}
body{
margin: 0 auto;
width:900px;
background-color: #fff;
}
header{
background:#ccc;
padding:20px;
}
nav{
float:left;
width: 900px;
height: 50px;
background-color:#999;
line-height:50px;
}
section{
float:left;
width: 660px;
height:260px;
background-color:#ccc;
}
article{
float:left;
width: 240px;
margin:0 0 0 30px;
padding:30px 0;
}
aside{
float:right;
width: 240px;
height: 260px;
background-color: #aaa;
}
</style>
</head>
<body>
<header>
<h1>头部</h1>
</header>
<nav>
<ul>
<li id="home"><a href="#">主页</a></li>
<li id="about"><a href="#">关于</a></li>
<li id="contact"><a href="#">联系我们</a></li>
</ul>
</nav>
<section>
<h2>我的文章</h2>
<article>
<p>这是第一篇文章</p>
<p>这是第二篇文章</p>
<p>这是第三篇文章</p>
<p>这是第四篇文章</p>
</article>
</section>
<aside>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
</ul>
</aside>
<footer>
<ul>
<li><a href="#">版权信息</a></li>
<li><a href="#">站点地图</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.22</title>
<style>
body,ul,li,h1,h2{
margin:0;
padding:0;
}
li{
list-style-type:none;
}
a{
text-decoration:none;
color:#fff;
}
body{
margin: 0 auto;
width:900px;
background-color: #fff;
}
header{
background:#ccc;
padding:20px;
}
nav{
float:left;
width: 900px;
height: 50px;
background-color:#999;
line-height:50px;
}
section{
float:left;
width: 660px;
height:260px;
background-color:#ccc;
}
article{
float:left;
width: 240px;
margin:0 0 0 30px;
padding:30px 0;
}
aside{
float:right;
width: 240px;
height: 260px;
background-color: #aaa;
}
aside a{
display:block;
height: 30px;
line-height:30px;
margin-left:50px;
padding:20px;
}
footer{
clear:both;
background:#999;
text-align:center;
padding:20px;
height:1%;
}
footer ul li{
display:inline;
margin:0 15px;
}
</style>
</head>
<body>
<header>
<h1>头部</h1>
</header>
<nav>
<ul>
<li id="home"><a href="#">主页</a></li>
<li id="about"><a href="#">关于</a></li>
<li id="contact"><a href="#">联系我们</a></li>
</ul>
</nav>
<section>
<h2>我的文章</h2>
<article>
<p>这是第一篇文章</p>
<p>这是第二篇文章</p>
<p>这是第三篇文章</p>
<p>这是第四篇文章</p>
</article>
</section>
<aside>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
</ul>
</aside>
<footer>
<ul>
<li><a href="#">版权信息</a></li>
<li><a href="#">站点地图</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</footer>
</body>
</html>
<!DOCTYPE html> <!-- 声明文档类型和版本 -->
<html lang="en"> <!-- 定义HTML文档的语言为英文 -->
<head>
<meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8 -->
<title>6.22</title> <!-- 设置网页标题 -->
<style>
/* 重置元素的默认边距和内边距 */
body,ul,li,h1,h2{
margin:0;
padding:0;
}
/* 去掉列表项前的标记 */
li{
list-style-type:none;
}
/* 设置超链接的样式:无下划线,字体颜色为白色 */
a{
text-decoration:none;
color:#fff;
}
/* 设置body的样式:居中显示,宽度900px,背景色为白色 */
body{
margin: 0 auto;
width:900px;
background-color: #fff;
}
/* 设置header的样式:背景色为灰色,内边距20px */
header{
background:#ccc;
padding:20px;
}
/* 设置导航栏的样式 */
nav{
float:left; /* 浮动在左侧 */
width: 900px; /* 宽度900px */
height: 50px; /* 高度50px */
background-color:#999; /* 背景色为深灰色 */
line-height:50px; /* 行高50px,使文本垂直居中 */
}
/* 设置section的样式 */
section{
float:left; /* 浮动在左侧 */
width: 660px; /* 宽度660px */
height:260px; /* 高度260px */
background-color:#ccc; /* 背景色为灰色 */
}
/* 设置article的样式 */
article{
float:left; /* 浮动在左侧 */
width: 240px; /* 宽度240px */
margin:0 0 0 30px; /* 外边距设置 */
padding:30px 0; /* 内边距设置 */
}
/* 设置aside的样式 */
aside{
float:right; /* 浮动在右侧 */
width: 240px; /* 宽度240px */
height: 260px; /* 高度260px */
background-color: #aaa; /* 背景色为深灰色 */
}
/* 设置aside中的超链接样式 */
aside a{
display:block; /* 以块级元素显示 */
height: 30px; /* 高度30px */
line-height:30px; /* 行高30px,使文本垂直居中 */
margin-left:50px; /* 外边距设置 */
padding:20px; /* 内边距设置 */
}
/* 设置footer的样式 */
footer{
clear:both; /* 清除浮动 */
background:#999; /* 背景色为深灰色 */
text-align:center; /* 文本居中 */
padding:20px; /* 内边距设置 */
height:1%; /* 为了解决IE6下的浮动问题 */
}
/* 设置footer中的列表项样式 */
footer ul li{
display:inline; /* 以行内元素显示 */
margin:0 15px; /* 外边距设置 */
}
</style>
</head>
<body>
<!-- 头部区域 -->
<header>
<h1>头部</h1> <!-- 头部标题 -->
</header>
<!-- 导航栏区域 -->
<nav>
<ul> <!-- 导航链接列表 -->
<li id="home"><a href="#">主页</a></li> <!-- 主页链接 -->
<li id="about"><a href="#">关于</a></li> <!-- 关于链接 -->
<li id="contact"><a href="#">联系我们</a></li> <!-- 联系我们链接 -->
</ul>
</nav>
<!-- 主要内容区域 -->
<section>
<h2>我的文章</h2> <!-- 文章标题 -->