＜HTML/CSS3 实践应用＞咖啡馆网站主页

于 2023-05-07 15:38:35 发布
阅读量300 收藏 4
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/X_YMY/article/details/121068080
版权

效果图
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Document</title>
	</head>
		<style type="text/css">
		*{
			margin: 0 px;
			padding: 0;
		}
		body{
			font-size: 16px;
			color: #673929;
		}
		#container{
			width: 900px;
			margin: 0 auto;
		}
		#header{
			height: 220px;
			margin-bottom: 5px;
			position: relative;
		}
		#icon-list{
			position: absolute;
			top:170px;
			right: 30px;
			width: 130px;
			height: 30px;
		}
		#nav{
			height: 30px;
			/* line-height: 30px; */
			margin-bottom: 5px;
			background-color: #09c;
			font:18px/30px;
			color: #fff;
			letter-spacing: 2px;
			text-align: center;
		}
		a:link{
			color:#FFFFFF;
			text-decoration: none;
		}
		a:visited{
			color: #FFFFFF;
			text-decoration: none;
		}
		a:hover{
			color: yellow;
			text-decoration: none;
		}
		a:active{
			color: yellow;
			text-decoration: ;	
		}
		#main{
			background-color: #000;
			/* height: 2050px; */
		}
		#aside{
			float: left;
			width: 300px;
			/* height: 500px; */
			background-color: #6cf;
			text-align: center;
			font-size: 14px;
			color: #000000;
		}
		#aside h2{
			margin: 20px;
		}
		#imglist{
			width: 130px;
			margin: 0 auto;
		}
		.pol{
			width: 85px;
			padding: 10px;
			background-color: #D8BFD8;
			border: 1px solid #bfbfbf;
			box-shadow: 2px 2px 4px #aaa;
			border-radius: 5px;
		}
		#imglist img{
			height: 95px;
			width: 85px;
			margin: 0 auto;
		}
		.rotate-left{
			-webkit-transform: rotate(-7deg);
			-ms-transform: rotate(-7deg);
			-moz-transform: rotate(-7deg);
			transform: rotate(-7deg);
		}
		.rotate-right{
			-webkit-transform: rotate(7deg);
			-ms-transform: rotate(7deg);
			-moz-transform: rotate(7deg);
			transform: rotate(7deg);
		}
		
		#content{
			float: right;
			width: 595px;
			margin-bottom: 5px;
			background-color: #cff;
		}
		.subcon{
			width: 570px;
			margin: 10px auto;
			clear: both;
		}
		.subcon img{
			margin: 5px;
			padding: 5px;
			float: left;
			border: 1px dashed #000000;
		}
		.subcon .subtext{
			width: 60%;
			float: left;
			margin: 5px;
		}
		.subcon h2{
			margin: 5px;
		}
		.subcon p{
			font: 16px/2em;
		}
		#footer {
			height: 60px;
			line-height: 60px;
			background-color: #FFFFFF;
			clear: both;
			text-align: center;
			margin: 0 auto;
		}
		#l-fix{
			position: fixed;
			top: 100px;
			left: 5px;
		}
		</style>
	<body>
		<div id="container">
			<div id="header">
				<p><img src="img/banner.jpg" alt=""></p>
				<div id="icon-list">
					<img src="img/1.bmp" />
					<img src="img/2.bmp" />
					<img src="img/3.bmp" />
					<img src="img/4.bmp" />
				</div>
			</div>
			<div id="nav">
				<a href="#">咖啡MENU</a>
				<a href="#">咖啡COOK</a>
				<a href="#">咖啡STORY</a>
				<a href="#">咖啡NEWS</a>
				<a href="#">咖啡PARTY</a>
			</div>
			<div id="main">
				<div id="aside">
					<h2>咖啡MENU</h2>
					<table >
						<tr>
							<th ><br /></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="pol rotate-left"><img src="img/Latte.jpg" /></div>
						<div class="pol rotate-right"><img src="img/Mocha.jpg" /></div>
						<div class="pol rotate-left"><img src="img/Cappuccino.jpg" /></div>
						<div class="pol rotate-right"><img src="img/Espresso.jpg" /></div>
					</div>
				</div>
				
				<div id="content">
					<div class="subcon">
						<img src="img/Cappuccino.jpg" alt="" />
						<div class="subtext">
							<h2>卡布奇诺Cappuccino</h2>
							<p>卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶相混合的意大利咖啡。此时咖啡的颜色，就像卡布奇诺教会的修士在深褐色的外衣上覆上一条头巾一样，咖啡因此得名</p>							
						</div>
					</div>
					<div class="subcon">
						<img src="img/Espresso.jpg" alt="">
						<div class="subtext">
							<h2>浓缩咖啡Espresso</h2>
							<p>意式浓缩咖啡（Espresso），是一种口感强烈的咖啡类型，方法是以92摄氏度的热水，借由高压冲过研磨成很细的咖啡粉末来冲出咖啡。它发明及发展于意大利，年代始于20世纪初，但直到1940年代中期以前，它是种单独透过蒸气压力制作出的饮品。在发明弹簧瓣杠杆(spring piston lever)咖啡机，并成功商业化，将浓缩咖啡转型成为今日所知的饮品。</p>
						</div>
					</div>
					<div class="subcon">
						<img src="img/Latte.jpg" alt="">
						<div class="subtext">
							<h2>拿铁Latte</h2>
							<p>拿铁咖啡是意大利浓缩咖啡与牛奶的经典混合，意大利人也很喜欢把拿铁作为早餐的饮料。意大利人早晨的厨房里，照得到阳光的炉子上通常会同时煮着咖啡和牛奶。喝拿铁的意大利人，与其说他们喜欢意大利浓缩咖啡，不如说他们喜欢牛奶，也只有Espresso才能给普普通通的牛奶带来让人难以忘怀的味道。</p>							
						</div>
					</div>
					<div class="subcon">
						<img src="img/Mocha.jpg" alt="" />
						<div class="subtext">
							<h2>摩卡Mocha</h2>
							<p>摩卡咖啡（Mocha Cafe）是由意大利浓缩咖啡、巧克力酱、鲜奶油和牛奶混合而成的一种古老的咖啡。其历史要追溯到咖啡的起源。它是由意大利浓缩咖啡、巧克力酱、鲜奶油和牛奶混合而成，摩卡得名于有名的摩卡港。十五世纪，整个中东非咖啡国家向外运输业不兴盛，也门摩卡是当时红海附近主要输出一个商港，当时咖啡主要是集中到摩卡港再向外输出的非洲咖啡，都被统称摩卡咖啡。</p>							
						</div>
					</div>
				</div>
			</div>
		</div>
			<div id="footer">
				<p><img src="img/banner.gif" alt=""></p>
			</div>
		
		<div id="l-fix">
			<img src="img/cooker.jpg" /></div>	
	</body>
</html>
Even今天学习了吗
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML&CSS案例---咖啡店
qq_45021462的博客
07-13 5493
HTML&CSS案例—咖啡店 最终页面效果 页面结构为：最上面header是一个头部，主要是一张图片；下面的nav是一个导航栏，包含五个链接；下面是主体部分，左侧的上面是一个表格，下面是四张图片，当鼠标放到图片上会有一个放大的效果，右侧有4个div是四种咖啡的详细介绍；最下面有一个脚本。具体代码如下； HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
咖啡店 HTML网站模板
12-13
咖啡店 HTML网站模板是一款适合咖啡馆企业销售展示网页模板下载。
咖啡屋HTML和CSS
Little_Uncle的博客
03-29 384
咖啡屋HTML和CSS Document zyh's coffee house Home Mune Music Jobs <div class="mainbar">
HTML&CSS案例—咖啡店（定位+布局+CSS3）
zjj8008120308的博客
09-12 6681
HTML&CSS案例—咖啡店该案例是从最终效果到实现的过程一，分析页面布局二，做整体布局1. 创建一个站点文件夹，再加上子文件夹2. 先初步输入代码，4部分4< div >,广告后面加三， 再前面的基础上将内容的结构再丰富一下，然后将对应的样式再设置一下（其实现在问题已经分解成了一个个小问题，我们在每个部分继续做下去就行了）四，最终效果及源码 该案例是从最终效果到实现的过程 一，分析页面布局 首先页面的最左侧是一个广告，采用固定定位；然后最上面header是一个头部，主要是一张图片；下面
咖啡馆CSS网页模板
11-24
咖啡馆CSS网页模板 紫色 餐饮 美食 咖啡馆 商业 设计 主页 HTML DIV+CSS 模板下载
html咖啡网站
11-30
一个女生做的网页，进入之后，让你感受到仿佛来到了一个咖啡故乡，呵呵，要结课了，老师让做一个静态网页，今天高兴拿出来和大家分享一下
Web应用设计实践（HTML/JavaScript/CSS）：班级网页-doc文档
最新发布
01-19
3） 熟练掌握 JavaScript、CSS。 （2）在完全实现基础设计能力层次后，追加以下要求： 1）能使用JavaScript、CSS制作页面特效； 2）能完全理解网页中使用的“特效”； 3）掌握常用的网站管理和维护方法； 4） 合理的...
使用HTML开发商业网站-CSS3核心基础课件.pptx
07-10
<head><title>使用 css 方式</title> <style> h1 {text-align:center; border-bottom:1px solid black;} </style> </head> <body> <h1>一级标题</h1> <p>…其他正文…</p> <h1>一级标题</h1> </body> </html> CSS的...
12个经典大气的HTML5/CSS3应用动画
08-23
今天我们就接着来分享第二波干货，也是基于HTML5和CSS3的动画应用，将涉及到HTML5表单、HTML5图片特效以及HTML5图表等应用领域，希望大家会喜欢。 1、HTML5/CSS3自定义下拉框 3D卡片折叠动画 之前我们分享过一款CSS3...
Web应用设计实践（HTML/JavaScript/CSS）：班级网页-代码
01-19
3） 熟练掌握 JavaScript、CSS。 （2）在完全实现基础设计能力层次后，追加以下要求： 1）能使用JavaScript、CSS制作页面特效； 2）能完全理解网页中使用的“特效”； 3）掌握常用的网站管理和维护方法； 4） 合理的...
Coffee:这是我咖啡馆网站HTML模板
03-06
Coffee:这是我咖啡馆网站HTML模板
咖啡厅唯美的html网页模板
12-09
很好很唯美的咖啡厅网页模板，html的，可以用，很不错的~~
html咖啡网页设计模板下载
07-21
html咖啡网页设计模板下载，网站采用html+css的设计模式，简洁大气
HTML5/CSS3图片过滤归类应用 三种过滤动画
04-16
解压密码：RJ4587 今天我们要来分享一款基于HTML5和CSS3的图片特效，它可以很方便地将各种图片进行归类和过滤，在归类过滤的过程中，图片有非常酷的动画效果，并且，结合CSS3的特性，这里一共提供了3种炫酷的图片...
编写咖啡店菜单 基础CSS
一七
03-22 959
可以使用 CSS 设置 HTML 元素的颜色、字体、大小等属性
CSS入门案例Demo【咖啡店菜单】
我这么骄傲的一个人。
01-04 1030
css入门demo代码：咖啡店菜单
简单的咖啡文化静态HTML网页设计作品 DIV布局咖啡馆文化网页模板代码 DW咖啡网站制作成品
weixin__BJ050106的博客
01-12 901
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，
Dreamweaver制作一个网页咖啡店banner/h5+css案例演示/
No1banana的博客
01-28 3125
一、分析结构 本案例实现比较简单，根据下载好的素材结合实际效果图，可以看出使用一个外面的<div>盒子设置好背景，再将素材放置到内部的<div>盒子之中 二、样式 1.外层的盒子设置宽度高度以及背景图像的图像样式，背景图像沿水平方向平铺 2.给里面的盒子设置宽度高度，背景图像设为不平铺，但内部盒子和外盒子的左边和上边留出一定空间 三、开始制作 打开Dreamweaver2021，新建一个HTML5格式文件，并添加title 开始搭建架构,并将素材引入到对应位置
咖啡店banner
weixiaosamoyed的博客
01-31 814
简易的图片重叠设计
帮我找出这段代码的错误并给出正确答案<html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <title>学生成绩管理系统</title> </head> <body> <h1>学生成绩管理系统</h1> <form action="./server/user_server.php" method="post"> <table> <tr> <td>用户名: </td> <td><input type="text" name="account"></td> </tr> <tr> <td>密码: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><button type="submit">登录</button></td> <td> <span> <?php echo isset($_GET['message']) ? $_GET['message'] : ""; ?> </span> </td> </tr> </table> </form> </body> </html>
06-07
<link rel="stylesheet" type="text/css" href="css/style.css" /> <title>学生成绩管理系统</title> </head> <body> <h1>学生成绩管理系统</h1> <form action="./server/user_server.php" method="post">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值