本文是一篇关于自学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
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
