實驗二 CSS+DIV頁面佈局
一、實驗目的
1．理解網頁內容和表現的分離；
2．熟悉CSS的基本語法和格式；
3．瞭解頁面常用佈局結構；
4. 學會用CSS+DIV佈局製作一個部落格頁面。
二、實驗環境
計算機、Windows作業系統
三、程式分析說明及結果
1．在網頁中應用CSS
網頁中應用CSS有4種方法，分別是：內聯CSS樣式、嵌入CSS樣式、連結外部CSS樣式表和匯入外部CSS樣式表。
（1）內聯CSS樣式
新建HTML文件，在body標記中輸入下面的程式碼
<p style=”font-size:72;font-style:bold;color:red;>這是一段紅色粗體文字</p>
<p>這段文字沒有應用樣式</p>
瀏覽結果。
（2）嵌入式CSS樣式
在上題基礎上，在head標記中輸入下面的程式碼
<style type=”text/css”>
h1{color:#ff0000;font-family:黑體}
.mystyle{color:#0000ff; font- family:黑體;font-size:64}
p.first{ color:#000000; font- family:宋體;font-size:12}
p.second{ color:#00ff00; font- family:宋體;font-size:32}
在body標記中繼續輸入下面程式碼
<h1>網頁設計製作</h1>
<p class=”first”>網頁設計製作</p>
<p class=”second”>網頁設計製作</p>
<p class=”mystyle”>網頁設計製作</p>
<div class=”mystyle”>網頁設計製作</div>
瀏覽效果。
（3）外部樣式表
新建文字檔案，輸入下面的程式碼
h1{color:#ff0000;font-family:黑體}
p.first{ color:#000000;font-family:宋體;font-size:12}
p.second{ color:#00ff00;font-family:宋體;font-size:32}
p. mystyle { color:#0000ff;font-family:宋體;font-size:64}
將檔案儲存為mystyle.css
新建HTML文件，在head標記中輸入下面的程式碼
<link rel=”stylesheet” type=”text/css” href=” mystyle.css”>
在body標記中輸入下面的程式碼
<h1>網頁設計製作</h1>
<p class=”first”>網頁設計製作</p>
<p class=”second”>網頁設計製作</p>
<p class=” mystyle”>網頁設計製作</p>
<div class=” mystyle”>網頁設計製作</div>
瀏覽效果。
（4）匯入外部CSS樣式
新建HTML文件，在head標記中輸入下面的程式碼
<style type=”text/css”>
@import url(“mystyle.css”);
</style>
Body標記中的內容與（3）相同，瀏覽效果。
2．結合HTML5的語義化標籤，使用DIV+CSS網頁佈局技術設計一個個人部落格頁面。要求：（1）header標籤定義頁面頭部區；nav標籤定義導航區；div標籤定義中部的內容區塊，其中左邊用section標籤巢狀兩篇article文章區，每篇文章區應含有頭部的標題區、段落內容和頁尾；右邊用aside設計側欄；底部用footer標籤定義版權資訊。如下圖所示。
（2）編寫外部CSS檔案，為主檔案中用到的各個標籤屬性進行樣式設定，如背景色，字型，字號大小，對齊方式等。
（3）用無序表實現水平導航選單，關鍵點：消除無序列表前的專案符號，將預設的垂直排列轉換為水平排列。
（4）設定導航選單的超連結樣式，關鍵點：連結目標為#，設定滑鼠懸停在導航欄中的熱字上時背景色的變化。
四、程式設計說明、原始碼及執行結果
二、
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<link rel="stylesheet" type="text/css" href="某某的部落格.css">
</head>
<body background="貓.jpg" style="background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<div id="wrap">
<header>某某的部落格</header>
<nav class="top_menu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#" style="text-decoration: none">博文</a></li>
<li><a href="#" style="text-decoration: none">相簿</a></li>
<li><a href="#" style="text-decoration: none">個人檔案</a></li>
</ul>
</nav>
<main>
<div class="section">
<div class="article">
<a1>HTML5</a1><a2>HTML5是下一代HTML的標準，目前處於發展階段。經過了Web2.0的時代，基於網際網路的應用已經越來越豐富，同時也對網際網路應用提出了更高的要求。</a2>
<a3>編輯於2018.9</a3>
</div>
<div class="article1">
<a1>CSS3</a1>
<a2>對於前端設計師來說，雖然CSS3不是全新的技術,但它卻重啟了一扇奇思妙想的視窗。</a2>
<a3>編輯於2018.9</a3>
</div>
</div>
<div class="aside">
<h2>簡介</h2>
<span>HTML5和CSS3</span>正在掀起一場變革,他不是在替代Flash,而是正在發展成為開放的Web平臺，
不但在移動領域建工卓著,而且對傳統的應用程式發起挑戰。
</div>
</main>
<footer>版權所有2018</footer>
</div>
</body>
</html>
四、實驗總結
1、認證理解網頁內容和表現的分離；
2、必須熟悉CSS的基本語法和格式；
3、還要了解頁面常用佈局結構；
4、學會用CSS+DIV佈局製作一個部落格頁面。
完整報告請私信