自学web前端练手——咖啡店主页（html+css3+js）

有参照页面，图片百度搜的+星巴克官网存的，半自撸。
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;
}

自学web前端练手——咖啡店主页（html+css3+js）相关推荐

自学web前端练手——js的考试倒计时
考试倒计时,并附带15分钟和5分钟的图片更换.(没调整统一的图片大小) 起初文本一直出不来,搞了半小时(一条一条的检查排查错误),最后把setInterval从函数体中弄出来就好了,吐了_(:з」∠) ...
自学web前端练手——静态婚纱店官网
自撸,有参照页面,图片百度搜的. 对比昨晚的静态博客页面,今天的加入了超链接以及好几个盒子,外加稍微美化了下页面. 效果如下: 当鼠标悬停在上方导航栏和点击了解详情超链接时,设置了悬停时文本字样会变大 ...
Web前端开发入门教程，HTML5+CSS3+JS教程，达到web前端工程师的水平
Web前端开发是一个非常热门的职业,随着互联网的发展,越来越多的企业需要拥有自己的网站和应用程序.本文将介绍Web前端开发的入门教程,包括HTML5.CSS3和JS教程,帮助读者达到Web前端工程师的 ...
web前端练手小项目——仿照小米商城
大部分是静态页面,使用的js知识只有一点点实现的效果: 实现的html代码: <!DOCTYPE html> <html lang="en"> <h ...
web前端练手小项目——使用js实现2048小游戏
实现的效果图: 计分规则:每合并一次增加两个分游戏涉及到的文件: 实现的html代码: <!DOCTYPE html> <html lang="en">& ...
怎样在线把别人web前端代码抓下_自学web前端8个月，我是怎样拿下7K薪资的？
自学web前端8个月,我是怎样拿下7K薪资的?自学两个字,说起来很轻松,但真正做起来那真是绝非易事,说实话,在我收到HR发来的offer那一刻,眼泪差点掉下来,这个过程中吃的这些苦,真的只有自己才能知 ...
如果是自学WEB前端的话，该如何才能找到一份7K实习生工作呢？
下面说一下我的感受吧自学web前端8个月,我是怎样拿下7K薪资的?自学两个字,说起来很轻松,但真正做起来那真是绝非易事,说实话,在我收到HR发来的offer那一刻,眼泪差点掉下来,这个过程中吃的这些 ...
自学Web前端开发学习讲解 – 入门篇
很多人都对web前端感兴趣,这一期主要聊关于如何入门学习Web前端开发的过程分享,此篇适合想入门初学者,大佬就不用看了.主要内容是以本人这一路自学web前端的一些经验和建议,学习哪些知识,以及如何正确 ...
我自学web前端的心得
我作为一个喜欢自己干,在课堂上又没有认真听web前端课程(之前没有学过前端)的人,再加上j2ee又会牵涉到web前端的相关知识,所以不得不花时间来补课了(还挺后悔的),但有句老话说得好,万事开头难,并 ...

自学web前端练手——咖啡店主页（html+css3+js）

自学web前端练手——咖啡店主页（html+css3+js）相关推荐

最新文章

热门文章