1、先脑补一下自己想设计成什么样子
2、脑补一下会具体使用到哪些需要的控件
3、对控件进行样式的设置(color margin…)
4、将内容填入html文件中，并且引用css文件
尤其要注意控件的width and height 因为这些设置将会影响到网页的布局
可以使用容器nav 或者 section 来解决
测试css
body{
background: #CCCCCC;
margin: 0px auto;
max-width: 900px;
border: solid;
border-color: #ffffff;
color:black;
}
header{
background-color: #F47D31;
display: block;
color: #ffffff;
text-align: center;
}
h1{
font-size: 72px;
margin: 0px;
}
h2{
font-size: 18px;
margin: 0px;
text-align: center;
}
h3{
font-size: 18px;
margin: 0px;
text-align: center;
}
nav{
display: block;
width: 100%;
float: left;
text-align: center;
background-color: transparent;
padding-top: 20px;
padding-bottom: 20px;
}
nav a:link,nav,a:visited{
display: inline;
border-bottom: 3px solid transparent;
padding: 10px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
nav h3{
background-color: #CCCCCC;
}
#container{
background-color: #CCCCCC;
}
section{
display: block;
width: 60%;
float: left;
}
article{
background-color: #eeeeee;
display: block;
margin: 10px;
padding: 10px;
}
article header{
padding: 5px;
}
article footer{
padding: 5px;
}
article h1{
font-size: 18px;
}
aside{
display: 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;
}
footer h2{
font-size: 14px;
color:white;
}
测试html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>maoshao</title>
<link rel="stylesheet" href="htmltest.css">
</head>
<body>
<script>window.alert("Welcome")</script>
<header>websize design by 612</header>
<div id="container">
<nav>
<a href="https://me.csdn.net/weixin_43635647">My Bolg</a>
<a href="#">测试</a>
<a href="#">测试</a>
<a href="#">测试</a>
</nav>
<aside>
<h3>这是侧边栏</h3>
<p>one</p>
<p>two</p>
<p>three</p>
</aside>
<section>
<article>
<header>文章标题</header>
<h1>测试内容</h1>
<h1>测试内容</h1>
<h1>测试内容</h1>
<h1>测试内容</h1>
<h1>测试内容</h1>
<h1>测试内容</h1>
<footer>测试页脚</footer>
</article>
<article>
<header>测试文章2</header>
<h1>测试内容</h1>
<h1>测试内容</h1>
<h1>测试内容</h1>
<h1>测试内容</h1>
<h1>测试内容</h1>
<h1>测试内容</h1>
<footer>测试页脚</footer>
</article>
</section>
<aside>
<h3>这是侧边栏2</h3>
<p>one</p>
<p>two</p>
<p>three</p>
</aside>
<footer>
<h2>612</h2>
</footer>
</div>
</body>
</html>
效果
