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）