製作一個靜態網頁
一般pc網頁有四個部分，header,banner,content,footer
一、HTML5
框架結構：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="header">
<div id="logo">
<a href="#">
<img src="img/logo.jpg">
</a>
</div>
<div id="nav">
<ul>
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a></li>
<li><a href="#">菜單4</a></li>
<li><a href="#">菜單5</a></li>
<li><a href="#">菜單6</a></li>
<li><a href="#">菜單7</a></li>
</ul>
</div>
</div>
<div id="banner">
<a href="#"><img src="img/banner.jpg"/></a>
</div>
<div id="content">
<div id="leftArticle">
<a href="#"><img src="img/article.jpg" alt=""/></a>
<h1>文章標題======</h1>
<p>重慶宏碁雙智有限公司</p>
<p>重慶宏碁雙智有限公司</p>
<p>重慶宏碁雙智有限公司</p>
</div>
<div id="rightInfo">
<dl>
<dt>標題1：佛絕對不是軍艦的</dt>
<dd>十大的方法往往我大師傅似的</dd>
<dd>十大的方法往往我大師傅似的</dd>
<dd>十大的方法往往我大師傅似的</dd>
</dl>
</div>
</div>
<div id="footer">
<p>
<a href="#">關於acer | </a>
<a href="#">廣告服務 | </a>
<a href="#">聯繫我們 | </a>
<a href="#">版權聲明 | </a>
<a href="#">合作對象</a>
</p>
<p>
<a>京ICP備2222222號</a>
ALL rights(c) 2008-2010 Reserved.
</p>
</div>
</body>
</html>
效果圖：
二、 CSS3:
代碼：
<style type="text/css">
/*1.爲什麼要寫這個？
* 不同瀏覽器缺省的margin和padding，都設成0，避免兼容性問題
*2.不要寫成*，它會輪詢所有的元素，效率低下
* * {
margin: 0;
padding: 0;
* }
*/
body,div,p,ul,li,dl,dt,dd,h1,a{
margin: 0;
padding: 0;
}
body {
font-family: 微軟雅黑,verdana,geneva,sans-serif;
}
html,body {
background: #2E2E2E;
}
#header,#banner,#content,#footer {
background: #900;
width: 1176px;
margin: 0 auto;
}
#header {
overflow: hidden;
}
/*1.浮動會讓子元素脫離文檔流，當所有元素都脫離時，而與此同時父元素沒有設定高度，造成父元素高度變爲0
*2.overflow：hidden；會消除所有的子元素的浮動，然後進行自適應高度計算，因爲父元素沒有設定高度，所以不會裁剪。
*/
/*#header {
width: 1500px;
background: #00FF00;
}*/
/*它會告訴你現在的header的高度是0
*/
body {
padding-top: 45px;
}
img {
border: none;
}
/*通常來說，img元素是內聯元素，爲了能爲img元素設定寬和高
* 我們會用display: block;來修飾img
* 如果，img元素被包裹在一個a標籤內部，那麼這個a標籤也需要用display: block;來修飾
*/
#logo {
width: 222px;
height: 84px;
float: left;
background: #111111;
}
#logo a {
display: block;
width: 222px;
height: 84px;
}
#log a img {
display: block;
}
#nav {
width: 954px;
height: 84px;
float: left;
background: #111111;
}
#nav li {
float: left;
list-style: none;
}
#nav li a {
display: block;
padding: 0 20px;
height: 84px;
line-height: 84px;
text-align: center;
float: left;
font-size: 23px;
color: #EEEEEE;
text-decoration: none;
}
#nav li a:hover {
color: #111111;
font-size: 24px;
background: #EEEEEE;
}
#nav li.navActive {
background: linear-gradient(to bottom,#EEEEEE,#555555);/*從上到下是漸變的*/
*background: #999999;
}
/*對IE6而言，第一行，linearxxx不支持，所以顯示不出來。
* 第二行，認識*,所以background設定爲#999999
* 第二行覆蓋第一行
* 對chrome火狐而言，第一行，支持
* 第二行，不認識*
* 第一行生效
*/
#banner {
margin: 10px auto;
height: 580px;
}
#banner a,#banner a img {
display: block;
width: 1176px;
height: 580px;
}
#content {
overflow: hidden;
background: #EAEAEA;
font-size: 12px;
line-height: 24px;
}
#leftArticle {
float: left;
margin: 10px;
display: inline;
/*IE6 double margin left的bug*/
width: 765px;
margin-right: 0;
font-size: 24px;
}
#leftArticle #artid,#leftArticle #artid img {
display: block;
width: 765px;
height: 467px;
}
#leftArticle h1 {
margin: 20px 0;
/*此處使用margin，不用padding，因爲如果使用padding，需要重新設定line-height做垂直居中用*/
}
#leftArticle h1 a {
color: #900;
text-decoration: none;
margin-left: 20px;
}
#leftArticle h1 a:hover {
text-decoration: underline;
}
h1 {
font-size: 100%;
}
#leftArticle p {
color: #333;
text-indent: 2em;/*一個em相當於14px*/
font-size: 14px;
margin-bottom: 30px;
}
#rightInfo {
float: left;
margin: 10px;
width: 381px;
height: 800px;
}
#rightInfo dl {
margin-bottom: 10px;
}
#rightInfo dl dt {
font-size: 15px;
font-weight: bold;
text-indent: 20px;
background: #900;
height: 32px;
line-height: 32px;
color: #FFF;
}
#rightInfo dl dd {
height: 24px;
line-height: 24px;
color: #333;
background: #FFF;
text-indent: 16px;
font-size: 13px;
}
#rightInfo dl dd:last-child {
margin-bottom: 20px;
}
#rightInfo dl dd a {
color: #333;
text-decoration: none;
}
#rightInfo dl dd a:hover {
color: #900;
text-decoration: underline;
}
#footer {
background: #393838;
margin-top: 10px;
padding-top: 18px;
height: 52px;
line-height: 18px;
color: #CCC;
text-align: center;
font-size: 12px;
margin-bottom: 40px;
}
#footer a {
color: #CCC;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
</style>
結果圖：
一般同樣的代碼在不同瀏覽器效果不同，主要是IE和其他瀏覽器的區別
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: #000;
margin: 20px;
}
#div1 {/*對其他瀏覽器*/
background: #F00!important;
background: #00F;/*for IE6 only*/
}
/*對於其他瀏覽器，加了important，優先級最高，所以，顯示爲紅色
* 對於IE6而言，IE6不認識important，所以背景爲藍色
*/
#div2 {
background: #F00;
*background: #00F;/*for IE6 only*/
}
</style>
</head>
<body>
<!--
作者：[email protected]
時間：2018-08-01
描述：CSS hack,利用同一種語法，在不同的瀏覽器上的效果不一樣，來達到適配性
-->
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
效果圖：
