HTML&amp;CSS案例—咖啡店（定位+布局+CSS3）

案例是從最終效果到實現的過程

一，分析頁面布局

首先頁面的最左側是一個廣告，采用固定定位；然后最上面header是一個頭部，主要是一張圖片；下面的nav是一個導航欄，包含五個鏈接；下面是主體部分，左側的上面是一個表格，下面是四張圖片，當鼠標放到圖片上會有一個放大的效果，右側有4個div是四種咖啡的詳細介紹；最下面有一個腳本。

四個部分：header， nav， main， footer，
再加上一個廣告部分，五個部分

二，做整體布局

1. 創建一個站點文件夾，再加上子文件夾

2. 先初步輸入代碼，4部分4< div >,廣告后面加

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
	<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>

<body>
    <div id="container">
		<div id="header"></div>
		<div id="nav"></div>
		<div id="main">
			<div id="aside"></div>
			<div id="content"></div>
		</div>
		<div id="footer"></div>
	</div>
</body>

</html>
```
再初步定義一下css樣式
```style.css
/*默認樣式的清零*/ 
*{
	margin: 0px;
	padding: 0;
}

body {  
	font-size:16px; 
	color: #673929;
}

#container {
	margin:0 auto; /*水平居中*/
	width:900px; 	
}

#header { 
	height:220px;/*必須添加，否則header下面有10px而不是5px空白*/
	margin-bottom:5px;
	/*position:relative; 父層定位*/
}

#nav{ 
	height:30px;	
	margin:5px;
	background-color:#09c; 		
	font: 18px/30px 微軟雅黑;
	color: #fff;
	letter-spacing: 2px;
    text-align: center;
}

#main{ 
	background:red; 
	height: 2050px;/**/
}

#aside { 
	float:left; 
	width:300px; 
	height: 500px;
	background-color:#6cf;
	text-align: center;
	font-size: 14px;
}

#content{ 
	float:right; 
	width:595px; 
	height: 2050px;
	margin-bottom:5px;
	background-color:#cff;
}

#footer { 
	height:60px; 
	line-height: 60px;
	background-color:#6cf;
	clear:both; /*新加代碼*/
	margin-top: 5px;
	text-align: center;
}

初步效果圖

三，再前面的基礎上將內容的結構再豐富一下，然后將對應的樣式再設置一下（其實現在問題已經分解成了一個個小問題，我們在每個部分繼續做下去就行了）

eg：header部分

四，最終效果及源碼

所用工具為DW

HTML代碼

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>icafe咖啡館</title>	
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>



<div id="container">
 
  <div id="header">
  	<p>	<img src="images/banner.jpg"></p>
  	<div id="icon-list">
  	   <img src="images/1.bmp">
  	   <img src="images/2.bmp">
  	   <img src="images/3.bmp">
  	   <img src="images/4.bmp">
    </div>
  </div>
  
  <div id="nav">
  	    <p>
			<a href="#">咖啡MENU</a>|
			<a href="cook.html">咖啡COOK</a>|
			<a href="#">咖啡STORY</a>|
			<a href="#">咖啡NEWS</a>|
			<a href="#">咖啡PARTY</a>
		</p>
  </div>

  <div id="main"> 
	  <div id="aside">
	  	<h2>咖啡MENU</h2>
		<table >
		  <tr>
		  	<th ></th>
		    <th >拿鐵<br />Latte</th>
		    <th >卡布奇諾<br />Cappuccino</th>
		    <th >摩卡<br />Mocha</th>
		    <th >濃縮咖啡<br />Espresso</th>
		  </tr>
		  <tr>
		    <th scope="row"  >大杯</th>
		    <td>35</td>
		    <td>35</td>
		    <td>35</td>
		    <td>30</td>
		  </tr>
		  <tr>
		    <th scope="row"  >中杯</th>
		    <td>30</td>
		    <td>30</td>
		    <td>30</td>
		    <td >25</td>
		  </tr>
		  <tr>
		    <th scope="row"  >小杯</th>
		    <td>25</td>
		    <td>25</td>
		    <td>25</td>
		    <td>20</td>
		  </tr>
		</table>
		<div id="imglist">
			<div class="polaroid rotate_left">
				<img src="images/Mocha.jpg"  />	
			</div>

			<div class="polaroid rotate_right">
				<img src="images/Latte.jpg"  />	
			</div>
			<div class="polaroid rotate_left">
				<img src="images/Espresso.jpg"  />	
			</div>

			<div class="polaroid rotate_right">
				<img src="images/Cappuccino.jpg"  />	
			</div>
		</div>
	  </div>

	  <div id="content">
	    <div class="subcont">		  	
			<img src="images/Latte.jpg" alt="">
			<div class="subtext">
				<h2>拿鐵Caffè Latte</h2>
				<p>這是一種傳統的經典飲料——濃縮咖啡調入熱牛奶，其上覆蓋一層輕盈的奶沫。<br>品嘗此款咖啡時，您可以選擇特別加入某種口味（如香草，焦糖或杏仁口味）的糖漿。</p>
			</div>
		</div>	
		<div class="subcont">
			<img src="images/Cappuccino.jpg" alt="">
			<div class="subtext">
				<h2>卡布奇諾Cappuccino</h2>
				<p>這款咖啡沿襲傳統技法，由我們技藝嫻熟的咖啡吧員將手工制作的熱奶與細膩奶泡輕柔地澆在濃縮咖啡之上制作而成。</p>
			</div>
		</div>
		<div class="subcont">	
			<img src="images/Mocha.jpg" alt="">
			<div class="subtext">
				<h2>摩卡Caffè Mocha</h2>
				<p>這款咖啡由醇香的摩卡醬，濃縮咖啡和蒸奶相融相合，上面覆以攪打奶油。<br>寒冷的日子里，憂傷的時光中,任何人都無法抵抗她的誘惑。</p>
			</div>
		</div>
		<div class="subcont">
			<img src="images/Espresso.jpg" alt="">	
			<div class="subtext">			
				<h2>濃縮咖啡Espresso</h2>
				<p>這是咖啡的精粹，以最濃縮的方式顯現。濃縮咖啡帶點焦糖味道，濃厚馥郁。</p>
			</div>
		</div>
	  </div>
  </div>

  <div id="footer">
  	<p>蕪湖~~</p>
  </div>
</div>

<div id="l-fix">
  	<p>	<img src="images/Latte.jpg"></p>	
</div>

</body>
</html>
```
CSS代碼
```style.css
*{
	margin: 0;
	padding: 0;
}
body { 
	font-family:"微軟雅黑"; 
	font-size:16px; 
	color: #673929;
}
#container {
	margin:0 auto; 
	width:900px; 	
}
#header { 
	height:220px;/*必須添加，否則header下面有10px而不是5px空白*/
	margin-bottom:5px;
	position:relative; /*父層定位*/
}

#icon-list{
	position:absolute;/*子層定位*/
	top:170px;
	right: 30px;
	width: 130px;
	height: 30px;	
	font-size: 0px;
	/*background: white;*/
}
#icon-list img{
	margin-left:5px;
}
#nav{ 
	height:30px;	
	margin-bottom:5px;
	background:#09c; 		
	font: 18px/30px 微軟雅黑;
	color: #fff;
	letter-spacing: 2px;
    text-align: center;
}
a:link{
	color: #fff;
	text-decoration: none;
}
a:visited{
	color: #fff;
	text-decoration: none;
}
a:hover{
	color: yellow;
	text-decoration: none;
}
a:active{
	color: #fff;
	text-decoration: none;
}
#main{ 
	background:red; 
	/*margin-bottom:5px;已經坍縮為0,放在子容器內設置*/
}
#aside { 
	float:left; 
	width:300px; 
	background:#6cf;
	text-align: center;
	font-size: 14px;
	color: #000;
}
#aside h2{
	margin: 20px;
}
#imglist{
	width: 130px;
	margin: 0 auto; 		
}
.polaroid
{
	width:85px;		
	padding: 10px;
	background-color: #eee;
	border:1px solid #BFBFBF;
	box-shadow:2px 2px 4px #aaa;
	border-radius: 5px;
}

.rotate_left
{
	-ms-transform:rotate(7deg); /* IE 9 */
	-moz-transform:rotate(7deg); /* Firefox */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
	-o-transform:rotate(7deg); /* Opera */
	transform:rotate(7deg);
}

.rotate_right
{
	-ms-transform:rotate(-8deg); /* IE 9 */
	-moz-transform:rotate(-8deg); /* Firefox */
	-webkit-transform:rotate(-8deg); /* Safari and Chrome */
	-o-transform:rotate(-8deg); /* Opera */
	transform:rotate(-8deg);
}
#imglist img{
	height: 95px;
	width: 85px;
	margin: 0 auto;
	font-size: 0;
}
#imglist img:hover{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}
#content{ 
	float:right; 
	width:595px; 
	margin-bottom:5px;
	background:#cff;
}
.subcont{
	width: 570px;
	margin: 10px auto;	
	clear: both;
}
.subcont img{
	margin: 5px;
	padding: 5px;
	float: left;
	border: 1px dashed #000;
}
.subcont .subtext{
	width: 60%;
	float: left;
	margin: 5px;
}
.subcont h2{
	margin: 5px;
}
.subcont p{	
	font:16px/2em 微軟雅黑;
}
#footer { 
	height:60px; 
	line-height: 60px;
	background:#6cf;
	clear:both; /*新加代碼*/
	margin-top: 5px;
	text-align: center;
}

#l-fix{
	position: fixed;
	top:100px;
	left:5px;
}
#l-fix img{
    height: 100px;
	width: 100px;
}

最終效果

天一個小案例，今天的案例是雙開門。首先看一下效果預覽，有一張大的背景圖，當鼠標經過這張大的背景圖的時候會把左右兩輛車向旁邊展開，最后展示出來的是汽車內部的內飾儀表盤的狀態。應用到的技術是html加CS就能完成，就是這樣一個預覽的效果，統稱為雙開門案例。接下來去錄制一下講解視頻。

·回到vscode編輯器，這個案例需要有一個容器container，容器里面有兩個元素，一個是左邊的盒子，一個是右邊的盒子，left和right。

·然后到title下面這一行來個style，寫一些ACC的樣式。寫之前先把內外編劇清空，margining，pedaling。

·再接著給container容器去設置一下寬高，寬度為1336個像素，高度為600像素，這個寬高取決于圖片素材的原始尺寸。

·來到Vasco的右下角可以看到整張圖片的寬高是1366和600的，高度跟圖片寬高保持一致可以防止圖片形變好。

·容器設置好之后可以給它一個邊框線輔助，目前應該能夠預想到默認是在瀏覽器視口左上角的，這個盒子在瀏覽器視口的左上角。假如想觀察起來更方便可以給它加上外邊距margin上下各有100像素的距離，左右是auto，這樣盒子在水平方向就集中了，在垂直方向距離上方有100像素，看起來更方便觀察。

·這一波操作做好之后可以給它加上一個背景圖片background UIO屬性引進來，引到的素材是BG點jpg。這張圖片是剛才汽車內飾的儀表盤界面，瑪莎拉蒂。

·整完之后再去設置一下container中的left和container中的right，這兩盒子的寬高分別是副容器的一半，高度是完整高度，寬度是它的一半，高度是完整高度就是600像素。

·剛剛設置好之后，它也有對應的背影圖片給它引進來，這張背影圖片叫做FM。

可以看到兩張圖片都成功引入了，這個元素材其實是有兩輛車的，可以打開元素材看一看，有左右兩輛車，左邊這輛是深藍色，右邊這輛是白色，這兩輛車剛好是車頭相對。

假如想要讓這個汽車能夠形成一個雙開門的效果，需要讓這個盒子首先布局在整個附容器的一行上展示。目前為什么它會掉下去？因為left和right這兩個都是div元素，div元素獨占一行，所以是上下排列，可以使用浮動讓它們在一行上展示reload left，這樣兩個盒子就在同一行展示。

現在還要再微調一下右邊盒子中的圖片，目前這個還是一個深藍色的車，車頭朝右，想把它改成白色的車頭朝左的狀態。運用到的技術其實就是background positior，讓它的圖片邊緣跟容器的右側都貼齊，然后去看一下，它就變成了一個車頭找左的容器。

假如感受不到這種邊界感，可以加個邊框線看一看，這樣就能感受到。當然這一家可能會有一些附帶的效果，因為容器放不下可能也會掉下來，所以為了不至于太難受，可以給它加上一個sign包的box，加上這屬性之后，哪怕寬度放不下也會自動分配。

加了邊框線之后就能感受到了左右兩個盒子，這一塊是右盒子，那一塊是左盒子。通過背影圖片基本的布局已經調好了，再接下來需要給它做一個雙開門的效果。

它的案例實現的邏輯就是鼠標經過container，讓left的格子向左邊移，讓right的盒子向右邊，移動的距離多少自己去決定，一般都是移動自身寬度的100/100。有一個很好用的屬性叫做transform，transform里有個屬性值叫做translate，可以通過這個來實現百分比的操作。

接下來去實現一下，content容器選中always效果，加上讓left盒子向左移動，就給它一個transform，as light，加上軸方向，x軸往左移動就給它一個復數，因為負數線代表是x軸方向的負方向。

·然后讓里面right是向右移動，所以負號可以去了，就正的往右去移動。這時候去看應該會有一個展開的效果，但是比較生硬，可以給它加上一些過渡，讓它看起來更柔和一些。跟上過渡屬性transcation，過渡時間可以1秒鐘、2秒鐘自己去決定，加了過渡時間之后就沒那么出霧了。

·目前還面臨的一個問題就是有多余顯示的部分也幾度移開了，還有一些破綻的。這個情況是由overflow hiding來做的，一出隱藏，給container加一個overflow hiding，又可以讓內容超出的部分自動被解裁掉。始終寬高要盒子中才能夠有效渲染，超過盒子就不會被渲染出來。這樣就實現了雙開門的案例。

·最后把剛才調試的邊框線取了，所有的邊框線都是為了輔助調試用，調試完之后就把邊框線刪了。

這個案例就分享到這里。

TML是超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

.HTML指的是超文本標記語言

.HTML不是編程語言，而是一種標記語言

.標記語言是一套標記標簽

.HTML使用標記標簽來描述網頁

.HTML文檔包含了HTML標簽和文本內容

.HTML文檔也叫做web頁面

HTML實例：

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
    <title> HTML教程實例</title>
  </head>
<body>
  <h1>我的第一個標題</h1>
<p>我的第一個段落</p>
  </body>
  </html>

注意：對于中文網頁需要使用<meta charset="udf-8">聲明編碼，否則出現亂碼。有些瀏覽器(如 360 瀏覽器)會設置 GBK 為默認編碼，則你需要設置為 <meta charset="gbk">。

實例解析：

<!DOCTYPE html>聲明為HTML5文檔

<html>元素是HTML頁面的根元素

<head>元素包含了文檔的元數據

<title>元素描述了文檔的標題

<body>元素包含了可見的頁面內容

<h1>元素定義一個大標題

<p>元素定義一個段落

在線咨詢

上一篇：PHP筆記(二) HTML表單
下一篇：一個純CSS3實現的圓形面包屑導航

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML&amp;amp;CSS案例—咖啡店（定位+布局+CSS3）