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>
效果
