经过这一段时间的学习,咱们来总结一下吧,今天就设计一个基础的html5页面吧

我们需要做的是一个拥有导航栏,菜单栏,内容,以及底部说明的基本框架

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>漫步白月光-这是一个html5页面</title>
<style>
header,
nav,
article,
footer {
border: solid 1px rgb(131, 41, 6);
padding: 10px;
margin: 6px;
}
header {
width: 500px;
}
nav {
float: left;
width: 60px;
height: 100px;
}
article {
float: left;
width: 406px;
height: 100px;
}
footer {
clear: both;
width: 500px;
}
</style>
</head>

<body>
<header>导航</header>
<nav>菜单</nav>
<article>内容</article>
<footer>底部说明</footer>
</body>

</html>

大家自己尝试一下吧,注意像素的计算,padding,margin

CSS大家之前也有了解过,现在我们再对一段内容进行一些美化

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>漫步白月光-这是一个html5页面</title>
<style>
article header p {
font-size: 12px;
}
article header p {
font-size: 16px;
}
.p-date {
font-size: 10px;
}
</style>
</head>

<body>
<article>
<header>
<h1><a href="#" target="new">出师表</a></h1>
<p class="p-date">日期:2018年01月10日</p>
<p>
臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。<br/> 先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。
<br/> 后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。
<br/>
</p>
</header>
</article>
</body>

</html>

大家多多练习吧~