HTML&CSS案例—咖啡店（定位+布局+CSS3）
HTML&CSS案例—咖啡店
该案例是从最终效果到实现的过程
一，分析页面布局
首先页面的最左侧是一个广告，采用固定定位；然后最上面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样式
/*默认样式的清零*/
*{
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代码
*{
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;
}
最终效果
