HTML&CSS案例—咖啡店

最终页面效果


页面结构为：首先页面的最左侧是一个广告，采用固定定位；然后最上面header是一个头部，主要是一张图片；下面的nav是一个导航栏，包含五个链接；下面是主体部分，左侧的上面是一个表格，下面是四张图片，当鼠标放到图片上会有一个放大的效果，右侧有4个div是四种咖啡的详细介绍；最下面有一个脚本。具体代码如下；
HTML代码

"en">
"UTF-8">"stylesheet" href="咖啡店.css">

"container">
"ad">"images/Cappuccino.jpg" alt="">
"header">
"pic">"images/banner.jpg" alt="">
"nav">
"navc">
"#">
咖啡 MENU |
"#">
咖啡 COOK |
"#">
咖啡 STORY |
"#">
咖啡 NEWS |
"#">
咖啡 PARTY |
"content">
"left">
咖啡MENU
"table">
拿铁
卡布奇诺
摩卡
浓缩咖啡
Latte
Cappuccino
Mocha
Espresso
大杯
35
35
35
30
中杯
30
30
30
25
小杯
25
25
25
20
"img l">"images/Mocha.jpg" alt="">
"img r">"images/Latte.jpg" alt="">
"img l">"images/Espresso.jpg" alt="">
"img r">"images/Cappuccino.jpg" alt="">
"right">
"main">
"lpic">"images/Latte.jpg" alt="">
"rtext">
拿铁Caffè Latte
这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。
品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。
"main">
"lpic">"images/Mocha.jpg" alt="">
"rtext">
摩卡Caffè Mocha
这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。
寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。
"main">
"lpic">"images/Cappuccino.jpg" alt="">
"rtext">
卡布奇诺Cappuccino
这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。
"main">
"lpic">"images/Espresso.jpg" alt="">
"rtext">
浓缩咖啡Espresso
这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。
"footer">
web前端开发 @2020-07-17

CSS代码

*{margin: 0;padding: 0;
}
body{color: #673929;
}
.container{width: 1010px;margin: 0 auto;background-color: #aaa;
}
/* 设置左侧广告固定定位 */
.ad{width: 100px;height: 100px;position: fixed;top: 100px;left: 30px;
}
.header{width: 1000px;height: 250px;margin: 5px;background-color: #123;
}
/* 设置图片的大小 */
.pic img{width: 1000px;height: 250px;
}
.nav{width: 1000px;height: 30px;margin: 5px;background-color: #523;
}
.navc{width: 680px;height: 30px;background-color: #588;margin: 0 auto;
}
li{float: left;text-align: center;margin:0 10px;list-style: none;/* 去除列表项前面的点 */
}
a{text-decoration: none;/* 去除超链接的下划线 */color: #fff;line-height: 30px;
}
a:hover{color: #9ac;
}
.content{width: 1000px;height: 800px;margin: 5px;background-color: #fff;
}
.left{width: 320px;height: 800px;margin-right: 5px;	float: left;background-color: #aa4;
}
.left h2{display:line-block;margin: 15px auto;color: black;text-align: center;
}
td{text-align: center;
}
.img{width: 100px;height: 100px;border: 12px solid #fff;border-radius: 5px;margin: 8px auto;
}
/* 图片旋转 */
.l{transform: rotate(10deg);
}
.r{transform: rotate(-10deg);
}
.img img{width: 100px;height: 100px;
}
.img:hover{transform: rotate(10deg);transform: scale(1.2);
}
.right{width: 675px;height: 800px;float: left;background-color: #aaf;
}
.main{width: 650px;height: 180px;margin: 20px;background-color: #aff;
}
.lpic{width: 150px;height: 178px;border: 1px dashed #000;float: left;
}
.lpic img{width: 140px;height: 170px;margin: 5px;
}
.rtext{width: 450px;height: 180px;float: left;margin: 0 20px;
}
.rtext h2{margin: 15px;
}
.footer{width: 1000px;height: 60px;margin: 0 auto;background-color: #abf;text-align: center;line-height: 60px;
}