HTML&CSS案例—咖啡店
最终页面效果
页面结构为:首先页面的最左侧是一个广告,采用固定定位;然后最上面header是一个头部,主要是一张图片;下面的nav是一个导航栏,包含五个链接;下面是主体部分,左侧的上面是一个表格,下面是四张图片,当鼠标放到图片上会有一个放大的效果,右侧有4个div是四种咖啡的详细介绍;最下面有一个脚本。具体代码如下;
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>咖啡店</title>
<link rel="stylesheet" href="咖啡店.css">
</head>
<body>
<div class="container">
<!-- 广告 -->
<div class="ad">
<img src="images/Cappuccino.jpg" alt="">
</div>
<!-- 头部 -->
<div class="header">
<div class="pic">
<img src="images/banner.jpg" alt="">
</div>
</div>
<!-- 导航栏 -->
<div class="nav">
<div class="navc">
<ul>
<li><a href="#">
<h3>咖啡 MENU |</h3>
</a>
</li>
<li><a href="#">
<h3>咖啡 COOK |</h3>
</a>
</li>
<li><a href="#">
<h3>咖啡 STORY |</h3>
</a>
</li>
<li><a href="#">
<h3>咖啡 NEWS |</h3>
</a>
</li>
<li><a href="#">
<h3>咖啡 PARTY |</h3>
</a>
</li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content">
<div class="left">
<h2>咖啡MENU</h2>
<div class="table">
<table>
<tr>
<th></th>
<th>拿铁</th>
<th>卡布奇诺</th>
<th>摩卡</th>
<th>浓缩咖啡</th>
</tr>
<tr>
<th></th>
<th>Latte</th>
<th>Cappuccino</th>
<th>Mocha</th>
<th>Espresso</th>
</tr>
<tr>
<th>大杯</th>
<td>35</td>
<td>35</td>
<td>35</td>
<td>30</td>
</tr>
<tr>
<th>中杯</th>
<td>30</td>
<td>30</td>
<td>30</td>
<td >25</td>
</tr>
<tr>
<th>小杯</th>
<td>25</td>
<td>25</td>
<td>25</td>
<td>20</td>
</tr>
</table>
</div>
<div class="img l">
<img src="images/Mocha.jpg" alt="">
</div>
<div class="img r">
<img src="images/Latte.jpg" alt="">
</div>
<div class="img l">
<img src="images/Espresso.jpg"