Web前端大作业—咖啡网页(html+css+javascript)

一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/240523

(title-N33JP-咖啡馆文化（5页）)]

截图演示

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

 









首页
新闻资讯
加盟发展
关于我们
会员中心






咖啡展示
COFFEE SHOW




浓醇香滑
饮之润滑可口
1拿铁咖啡
浓缩咖啡与牛奶的经典混合。
咖啡在底层


经典好味
入齿留芳
2美式咖啡
最普通的咖啡，属于黑咖啡的一种
口味比较淡，咖啡因含量较高


甘醇芳香
味道浓郁
3卡布奇诺
浓缩咖啡和蒸汽泡沫牛奶混合
深褐色的外衣上覆上一条头巾一样







白咖啡绝
源于华人的原创饮品
白咖啡最初由移居至马来西亚的海南人研制而成
，
已成为马来西亚人必不可少的日常饮品
。
海南先贤们发挥其聪明才智
，对西式咖啡进行了改良
，
采用特殊的咖啡豆烘焙
、咖啡冲调和搅拌手法
，
将其调制成最符合华人口味的咖啡
。 



经典
创新



白咖啡绝
浓醇香滑的经典好味
第一代传统白咖啡是由海南烘焙咖啡师首创的
,
融合了不同咖啡豆的优点
,
让每一杯白咖啡都能符合华人口味
。


查看更多





品牌介绍
Brand introduction




旧街场oldtown诞生于1999年的旧街场白咖啡公司（OLDTOWNWhiteCoffee），是首家推出三合一即溶白咖啡饮品的公司。






旧街场白咖啡的特色让这个品牌风靡马来西亚，拥有极高的品牌知名度。旧街场白咖啡以三种顶级咖啡豆Arabica、Robusta和Liberica，加上特级的脱脂奶精，混合出美味独特的白咖啡。



旧街场白咖啡在未来的增长推动力，有望来自于13亿庞大人口的中国市场。

CSS代码

.box03 .bx2 p {
    color: #5e5e5e;
    width: 25px;
    float: right;
    font-size: 14px;
    line-height: 15px;
    padding: 0px 18px;
    height: 50px;
}

.box03 .bx2 .padd0 {
    padding: 0px !important;
}

.marl60 {
    margin-left: 60px;
}

.mar0 {
    margin-right: 0px!important;
}

.box03 .bx3 {
    width: 25px;
    height: 80px;
    border: #e70012 1px solid;
    float: left;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    margin-left: 20px;
    margin-top: 260px;
}
/*-----box4开始-----*/
.box04 {
    width: 888px;
    height: 780px;
    margin-top: 88px;
    margin: 0 auto;
    border: #c6c4c5 2px solid;
    border-top: none;
    border-bottom: #c6c4c5 10px solid;
    margin-top: 80px;
}

.box04 h1 {
    font-size: 16px;
    font-weight: normal;
    text-align: center
}

.box04 h2 {
    font-size: 14px;
    font-weight: normal;
    text-align: center;
}

.box04-ner {
    height: 615px;
    width: 888px;
    margin-top: 40px;
}

.box04-ner ul {
    padding: 0px
}

.box04-ner ul li {
    width: 263px;
    height: 615px;
    float: left;
    margin-right: 49px;
    text-align: center;
}

.box04-ner ul li p {
    padding: 0px 10px;
    font-size: 14px;
}


.huiyuan-box02 .bx {
    width: 707px;
    margin-bottom: 20px;
    padding: 0px 15px;
    height: 99px;
    background: url(../images/24.jpg);
    line-height: 30px;
    text-align: center;
}

.huiyuan-box02 .gengd {
    width: 125px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border: #333 1px solid;
    margin: 0 auto;
}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app