自学web前端练手——咖啡店主页（html+css3+js）_h5咖啡馆和宣传主页的代码-CSDN博客

本文是一篇关于自学web前端的实践案例，作者通过参照页面和星巴克官网，创建了一个包含js图片轮播、nav导航栏、广告栏、aside和content区域的咖啡店主页。在aside部分，尝试实现2d旋转但遇到问题。当鼠标悬停在导航链接上时，链接文字会变色。

有参照页面，图片百度搜的+星巴克官网存的，半自撸。
header部分用js实现图片来回切换。
nav导航栏是超链接。
最左侧单一的图片是广告栏。
主体部分由左侧aside和右侧content组成。
aside部分用了table和div，并实现了2d的旋转（可以用奇偶选择器实现，但我试了一下我的有错误，所以就放弃了_(:з」∠)_是我菜）
接下来都是很简单的html+css就不做说明了。

效果如下：
在这里插入图片描述

当鼠标悬停在超链接时，超链接字体会变色。

代码如下：

.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>咖啡店主页</title>
	<link rel="stylesheet" href="9.css">
</head>
<body>
	<div id="container">
		<div id="header">
			<img src="img/1.jpg" id="h-img">
			<button id="b-right"><img src="img/right.jpg" style="width:20px;height:20px;"></button>
			<button id="b-left"><img src="img/right.jpg" style="width:20px;height:20px;"></button>
			<div id="icon-list">
				<img src="img/11.png" style="width:20px;height:20px;">
				<img src="img/22.png" style="width:20px;height:20px;">
				<img src="img/33.png" style="width:20px;height:20px;">
				<img src="img/44.png" style="width:20px;height:20px;">
			</div>
		</div>
		<div id="nav">
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
			<a href="#">咖啡MENU</a>
		</div>
		<div id="main">
			<div id="aside">
				<h2>咖啡MENU</h2>
				<table>
					<tr>
						<td></td>
						<td>卡布奇诺</td>
						<td>焦糖玛奇朵</td>
						<td>香草风味拿铁</td>
						<td>摩卡</td>
					</tr>
					<tr>
						<td></td>
						<td>cappuccino</td>
						<td>Macchiato</td>
						<td>Latte</td>
						<td>Mocca</td>
					</tr>
					<tr>
						<td>大杯</td>
						<td>35</td>
						<td>35</td>
						<td>35</td>
						<td>30</td>
					</tr>
					<tr>
						<td>中杯</td>
						<td>30</td>
						<td>30</td>
						<td>30</td>
						<td>25</td>
					</tr>
					<tr>
						<td>小杯</td>
						<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/卡布奇诺.jpg"></div>
					<div class="pol rotate-right"><img src="img/焦糖玛奇朵.jpg"></div>
					<div class="pol rotate-left"><img src="img/香草风味拿铁.jpg"></div>
					<div class="pol rotate-right"><img src="img/摩卡.jpg"></div>
				</div>
			</div>
			<div id="content">
				<div class="subcon">
					<img src="img/卡布奇诺.jpg" style="width:170px;height:170px;">
					<div class="subtext">
						<h2>卡布奇诺（热/冷）</h2>
						<p>蒸煮牛奶与浓缩咖啡相融合，用丰厚绵密的奶泡覆顶，再撒上肉桂粉或可可粉。<br />
温馨提示：在奶泡消融前，请尽快享用。</p>
					</div>
				</div>
				<div class="subcon">
					<img src="img/焦糖玛奇朵.jpg" style="width:170px;height:170px;">
					<div class="subtext">
						<h2>焦糖玛奇朵（热/冷）</h2>
						<p>玛奇朵在意大利语中的意思是“印记”。从蒸煮牛奶和添加风味糖浆开始，再倒入醇厚的浓缩咖啡，留下属于玛奇朵的独有印记。</p>
					</div>
				</div>
				<div class="subcon">
					<img src="img/香草风味拿铁.jpg" style="width:170px;height:170px;">
					<div class="subtext">
						<h2>香草风味拿铁（热/冷）</h2>
						<p>清雅香甜的香草风味糖浆让浓缩咖啡变得浪漫起来，开启拿铁的香草浪漫之旅。</p>
					</div>
				</div>
				<div class="subcon">
					<img src="img/摩卡.jpg" style="width:170px;height:170px;">
					<div class="subtext">
						<h2>摩卡（热/冷)</h2>
						<p>摩卡最初是指一种带有巧克力风味的咖啡豆，现在，这份巧克力咖啡仍然带给你纯正的温暖。在浓缩咖啡中加入摩卡酱，与蒸煮牛奶一起交织出丝滑与醇厚。</p>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>欢迎光临天鹅座咖啡店</p>
		</div>
	</div>
	<div id="l-fix">
		<img src="img/拿铁.jpg" style="width:170px;height:170px;">
	</div>
	<script>
       		var image=document.getElementById('h-img');
       		var prev=document.getElementById('b-left');
       		var next=document.getElementById('b-right');
       		var nowIndex=1;
       		var count=4;//3张图片
       		next.onclick=function(){
            nowIndex=nowIndex+1>count?1:nowIndex+1;
            image.src="img/"+nowIndex+".jpg";
       		}
       		prev.onclick=function(){
            if (nowIndex-1<=0) {
                nowIndex=count;
            }
            else{
                nowIndex=nowIndex-1;
            }
            //nowIndex=nowIndex-1<0?count:nowIndex-1;
            image.src="img/"+nowIndex+".jpg";
       		}
    </script>
</body>
</html>

.css：

*{
	margin: 0;
	padding: 0;
}
body{
	font-size: 16px;
	color: #673929;
}
#container{
	width: 900px;
	margin: 0 auto;
}
#header{
	height: 220px;
	margin-bottom: 5px;
	position: relative;
}
#h-img{
	width:900px;
	height:220px;
}
#b-right{
	position: absolute;
	top:100px;
	right: 10px;
}
#b-left{
	position: absolute;
	top:100px;
	left: 10px;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
#icon-list{
	position: absolute;
	top: 170px;
	right: 30px;
	width: 130px;
	height: 30px;
	/*font-size: 0;*/
}
#nav{
	height: 30px;
	line-height: 30px;
	margin-bottom: 5px;
	background-color: #09c;
	font:18px/30px;
	color: white;
	letter-spacing: 2px;
	text-align: center;
}
#nav a{
	text-decoration: none;
}
a:link{
	color:#fff;
}
a:visited{
	color:#fff;
}
a:hover{
	color: yellow;
}
a:active{
	color: yellow;
}
#main{
	background-color: #000;
	/*height: 1000px;*/
}
#aside{
	float: left;
	width: 300px;
	/*height: 500px;*/
	background-color: #6cf;
	text-align: center;
	font-size: 14px;
}
#aside h2{
	margin: 15px;
}
#aside table{
	font-size: 12px;
	font-weight: bold;
}
#imglist{
	width: 130px;
	margin: 0 auto;
}
.pol{
	width: 85px;
	padding: 10px;
	background-color: #eee;
	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);
	-o-transform: rotate(7deg);
	transform: rotate(7deg);
}
.rotate-right{
	-webkit-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	transform: rotate(-7deg);
}
#content{
	float: right;
	width: 595px;
	margin-bottom: 5px;
	background-color: #cff;
	/*height: 1000px;*/
}
.subcon{
	width: 570px;
	margin: 10px auto;
	clear: both;
}
.subcon img{
	margin: 5px;
	padding: 5px;
	float: left;
	border: 1px dashed #000;
}
.subcon .subtext{
	width: 60%;
	float: left;
	margin: 5px;
}
.subcon h2{
	margin: 5px;
}
.subcon p{
	font-size: 16px/2em;
}
#footer{
	height: 60px;
	line-height: 60px;
	background-color: #6cf;
	clear: both;
	text-align: center;
}
#l-fix{
	position: fixed;
	top: 100px;
	left: 5px;
}