HTML&CSS案例---咖啡店

最新推荐文章于 2024-06-14 14:25:49 发布

易de

最新推荐文章于 2024-06-14 14:25:49 发布

阅读量5.5k

点赞数 13

分类专栏：前端 web前端开发

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/107318692

版权

本文介绍了一个HTML&CSS案例，展示了如何创建一个咖啡店主题的网页。页面结构包括固定定位的左侧广告、顶部的图片头部、导航栏、表格、具有放大效果的图片以及咖啡详情介绍。HTML用于构建页面结构，CSS则用于样式设计和交互效果实现。

摘要由CSDN通过智能技术生成

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"

最低0.47元/天解锁文章

易de

关注

13
点赞
踩
177

收藏

觉得还不错? 一键收藏
4
评论
HTML&CSS案例---咖啡店

HTML&CSS案例—咖啡店最终页面效果页面结构为：最上面header是一个头部，主要是一张图片；下面的nav是一个导航栏，包含五个链接；下面是主体部分，左侧的上面是一个表格，下面是四张图片，当鼠标放到图片上会有一个放大的效果，右侧有4个div是四种咖啡的详细介绍；最下面有一个脚本。具体代码如下；HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫

专栏目录