结合Bootstrap实现一点点奶茶加盟官网首页页面效果
2024-05-11 04:38:49
学完bootstrap3后，找了一个简单的网站进行实战练习，只实现了网站首页的效果。用上bootstrap基本的栅格布局，轮播图和几个常用的样式类，适合小白练手。
整个完整首页的实现效果是这样的：
这里粘贴两个关键文件的代码：（完整项目资源放github，文末有地址。）
1、index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>一点点官网|一点点奶茶加盟</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><link rel="stylesheet" type="text/css" href="css/index.css"/><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){var store_imgs = ['1-1ZPQ13TY23-lp.png','1-1ZPQ13401Q2-lp.jpg','1-1ZPQ13505A9-lp.jpg','1-1ZPQ14501Q6-lp.png','1-1ZPQ224195H-lp.jpg'];var store_positions = ['台湾','上海','北京','','杭州'];for(var index=0;index < (store_imgs.length-1);index++){var li = document.createElement("li");var img = document.createElement("img");var h4 = document.createElement("h4");var ul = document.querySelector('#theStores ul');if(index==3){h4.innerText = "一点点奶茶加盟店风格";}img.src = "images/"+store_imgs[index];h4.innerText = store_positions[index]+"一点点奶茶加盟店"li.appendChild(img);li.appendChild(h4);ul.appendChild(li);}})</script></head><body><!-- 头部 --><header><div class="container-fluid" style="padding:6px 50px;border-bottom:1px solid #ccc;"><div class="pull-left" style="color:#333;font-size: 15px;">您好，欢迎光临一点点奶茶官方网站！</div><div class="pull-right"><a href="">网站地图</a>|<a href="">联系我们</a></div></div></header><!-- LOGO --><div style="margin-top: 15px;"><div class="container"><div class="col-md-3"><img src="data:images/logo.png" ></div><img src="data:images/phoneBg.jpg" class="pull-right"><span style="font-size: 15px;color:#333;display: inline-block;float: right;margin-right:-180px;margin-top:40px">在线咨询热线:</span></div></div><!-- 导航条 --><div class="nav" style="background-color: #00923F;"><ul class=" unstyled list-inline text-center"><li><a href="#">网站首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">产品展示</a></li><li><a href="#">加盟流程</a></li><li><a href="#">新闻中心</a></li><li><a href="#">门店展示</a></li><li><a href="#">联系我们</a></li></ul></div><!-- 轮播图 --><div class="carousel slide" data-ride="carousel" id="mycarousel" ><ul class="carousel-indicators"><li data-slide-to="0" data-target="#mycarousel" class="active"></li><li data-slide-to="1" data-target="#mycarousel"></li></ul><div class="carousel-inner " role="listbox" ><div class="item active" ><img src="data:images/lunbo1.jpg" ></div><div class="item" ><img src="data:images/lunbo2.jpg" alt=""></div></div><a class="center carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="sr-only">Previous</span></a><a class="center carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="sr-only">Next</span></a></div></div><!-- 分割（关于我们上面） --><div style="height: 100px;"><div style="width:100%;height: 50;background: url(images/searchBg.jpg);"></div></div><!-- 关于我们 --><div style="height:355px;background:#02783e;padding: 10px 10px ;"><div class="pull-left" style="width: 662px;padding-left: 63px;"><h3>关于我们----ABOUT US</h3><p style="font-size: 15px;line-height: 34px;"> 一点点奶茶 起初仅是台湾台南地区路边的饮料摊位，尚未有专属之品牌名称，后因营业状况蒸蒸曰上，遂转型为店铺式经营。1997年成立第一家模范店，至此方奠定一点点奶茶完整的店铺型态与作业模式。 1998年后逐渐开始设立分店，走向连锁加盟式的经营，至2019年止，全全国已有3000余家门市。 在台湾坊间流传许多一点点品牌名称由来的故事，例如因为创办人喜爱曰本漫画《Candy Candy》，因此取用其作者五十岚优美子之姓氏稍加修改作为品牌名称。 事实上这名称是无心插柳的结果：某曰创办人左思右想了几个名字，随口告诉母...<br><button class="btn btn-default" style="color:#02783e;width: 120px;height:30px;border-radius: 0px;">查看详情</button></p></div><div class="pull-right" ><img src="data:images/in-about1.jpg" style="width:600px;margin-right:30px" ></div></div><!-- 奶茶梦 --> <div class="center-block" style="height: 90px;margin-bottom: 60px;margin-top: 40px;"><img src="data:images/wanmei_top_3.gif" class="center-block"></div><!-- 加盟支持 --><div id="support" ><h2 >选择一点点奶茶加盟的6大独家支持</h2><p style="background:#ccc">6 CHOOSE TO A LITTLE TEE THE EXCLUSIVE SUPPORT</p><div style="background: url(images/zhi_qing_3.jpg) no-repeat;height:600px;margin-left: 65px;"><ul class="list-unstyled text-right pull-left" ><li><h3 style="color: #3C7B48;font-weight: bold;">品牌优势支持</h3><p>您可以使用一点点的知识产权，包括微标、名称、商标等进行合法经营活动，这是我们对加盟商和消费者的保证和承诺。</p></li><li><h3 style="color: #3C7B48;font-weight: bold;">资源优势支持</h3><p>全球领先的管理智能化资源总部为加盟商提供高端的专业机器和优质的奶茶原物料。</p></li><li style="margin-top: -50px;"><h3 style="color: #3C7B48;font-weight: bold;">广告宣传支持</h3><p>一点点奶茶店铺开业期间总部帮助加盟商宣传各大主流新闻媒体、互联网、线下杂志等全面覆盖。</p></li></ul><ul class="list-unstyled text-left pull-right" style="margin-right: 155px;;" ><li><h3 style="color: #3C7B48;font-weight: bold;">品牌优势支持</h3><p>您可以使用一点点的知识产权，包括微标、名称、商标等进行合法经营活动，这是我们对加盟商和消费者的保证和承诺。</p></li><li><h3 style="color: #3C7B48;font-weight: bold;">资源优势支持</h3><p>全球领先的管理智能化资源总部为加盟商提供高端的专业机器和优质的奶茶原物料。</p></li><li style="margin-top: -50px;"><h3 style="color: #3C7B48;font-weight: bold;">广告宣传支持</h3><p>一点点奶茶店铺开业期间总部帮助加盟商宣传各大主流新闻媒体、互联网、线下杂志等全面覆盖。</p></li></ul></div></div><!-- 一点点优势 --><div class="center-block" style="height: 90px;margin-bottom: 50px;"><img src="data:images/tit_01.png" class="center-block"></div><!-- 各类优势 --><div class="container" id="advantages"><div class="row"><div class="col-md-3 text-center"><img src="data:images/advtage_01.png" ><br><br><p class="text-center">台湾一点点奶茶选用精品奶源，最大程度的保留原奶茶的营养，芳香独特。</p></div><div class="col-md-3 text-center"><img src="data:images/advtage_02.png" ><br><br><p class="text-center">一点点奶茶独特考究手工制作方法，一点点奶茶采用上等好茶和鲜香牛奶，现做现卖，新鲜美味。</p></div><div class="col-md-3 text-center"><img src="data:images/advtage_03.png" ><br><br><p class="text-center">一点点奶茶无任何添加，无奶精，无果粉，无色素无添加剂，绿色健康。</p></div><div class="col-md-3 text-center"><img src="data:images/advtage_04.png" ><br><br><p class="text-center">一点点奶茶加盟店产品多样，茶饮，果汁，冰沙等样样俱全。公司还会不断更新产品，满足市场需求。</p></div></div></div><!-- 投资咨询 --><div style="margin: 30px 0px;background: #027348;"><img src="data:images/ydd_32.jpg" class="center-block"></div><!-- 产品展示 --><div id="product"><div style="margin: 30px 0px 40px;"><img src="data:images/tit_02.png" class="center-block"></div><div><table style="margin:0 auto;"><tr><td><img src="data:images/pro_01.jpg" alt=""></td><td ><img src="data:images/pro_02.jpg" alt=""></td><td><img src="data:images/pro_03.jpg" alt=""></td></tr><tr><td><img src="data:images/pro_04.jpg" alt=""></td><td ><img src="data:images/pro_05.jpg" alt=""></td><td><img src="data:images/pro_06.jpg" alt=""></td></tr></table></div></div><!-- 新闻中心 --><div id="showNew" style="margin: 60px 50px;"><div class="pull-left" style="width:60%"><div style="background: #eee;max-height: 40px;"><div style="float:left" class="new-center text-center ">新闻中心</div><div style="" class="new-more text-right">more++</div> </div><br><br><div style="margin-top:15px;"><div class="pull-left"><img src="data:images/1-210429162132429.jpg" style="height: 172px;width:294px;" ></div><div style="width:55%;margin-left: 30px;" class="pull-left" ><h4 style="color: #00923F;font-weight: bold;">对于新手来说，在一点点官网投资加盟更能减少</h4><p style="width:380px;color:#333;">一点点奶茶是奶茶市场的主要品牌，也是消费者喜爱的奶茶店。它在奶茶市场的销量非常好，适合在小本投资，可以让你轻松赚更多的钱。以下是一点点奶茶官网小编的介绍.....</p><button class="btn btn-default" style="background-color:#02783e;color:#fff;width: 120px;height:30px;border-radius: 0px;">查看详情</button></div><br><br> </div><br><br></div><!-- 常见问题解答 --><div class="pull-right" style="width:35%;"><div id="askAndAnswer" style="background: #eee;max-height: 40px;"><div style="" class="new-center text-center">常见问题解答</div><ul style="padding-top:10px;"><li>一点点奶茶官网加盟问答</li><li>一点点奶茶官网的店面风格，装修时怎么样的？A:一点点奶茶官网实行的是连锁管理，统一规划，加盟者……</li><li>一点点奶茶官网加盟问答</li><li>一点点奶茶官网的店面风格，装修时怎么样的？A:一点点奶茶官网实行的是连锁管理，统一规划，加盟者……</li></ul></div><br><br></div></div><div class="clearfix"></div><!-- 新闻下面的问题 --><div style="margin: 20px 80px;"><div class="row news-list"><div class="col-md-4"><ul class="list-unstyled"><li><a href="#" title="对于新手来说，在一点点官网投资加盟更能减少...."> >对于新手来说，在一点点官网投资加盟更能减少....</a></li><li><a href="#" title="对于新手来说，在一点点官网投资加盟更能减少...."> >对于新手来说，在一点点官网投资加盟更能减少....</a></li><li><a href="#" title="对于新手来说，在一点点官网投资加盟更能减少...."> >对于新手来说，在一点点官网投资加盟更能减少....</a></li></ul></div><div class="col-md-4" style="margin-left: -35px;"><ul class="list-unstyled"><li><a href="#" title="对于新手来说，在一点点官网投资加盟更能减少...."> >对于新手来说，在一点点官网投资加盟更能减少....</a></li><li><a href="#" title="对于新手来说，在一点点官网投资加盟更能减少...."> >对于新手来说，在一点点官网投资加盟更能减少....</a></li><li><a href="#" title="对于新手来说，在一点点官网投资加盟更能减少...."> >对于新手来说，在一点点官网投资加盟更能减少....</a></li></ul></div></div></div><!-- 门店展示 --><div style="margin: 40px 0px 40px;"><img src="data:images/tit_03.png" class="center-block"></div><!-- 各地分店图片展示 --><div id="stores" style="padding:20px 0px"><div class="container-fluid"><div class="row"><div class="col-md-1" ><img style="margin-left:30px" class="pull-left" style="" src="data:images/mfrl.gif" alt=""></div><div class="col-md-10" id="theStores"><ul class="list-unstyled list-inline center-block"></ul> </div><div class="col-md-1"><img class="pull-right" style="margin-right:30px" src="data:images/mfrr.gif" alt=""></div></div></div></div> <!-- 页脚 --><footer style=""><div class="call pull-left"><img src="data:images/botmPhone.jpg" style="display:inline-block;float:left;"><div style="float:left;margin-left:10px"><span style="font-size:15px;color:#027348">点击留言：</span><br><span style="font-size:17px;color:#333;font-weight: bold;">一点点奶茶加盟申请表</span></div></div><!-- 导航条 --><div id="footer-nav" class="pull-right"><ul class="unstyled list-inline"><li><a href="#">网站首页 </a></li><span>/</span><li><a href="#">关于我们</a></li><span>/</span><li><a href="#">产品展示 </a></li><span>/</span><li><a href="#">加盟流程 </a></li><span>/</span><li><a href="#">新闻中心 </a></li><span>/</span><li><a href="#">门店展示 </a></li><span>/</span><li><a href="#">联系我们</a></li></ul><div class="copyright"><p>Copyright ® 2002-2021 一点点官网 版权所有</p><p>一点点奶茶加盟官网，欢迎前来咨询 !</p></div></div></footer></body>
</html>2、index.css
@charset "utf-8";*{color:#fff;font-family: '微软雅黑';font-size: 14px;
}
a,a:hover,a:active{color:#fff;text-decoration: none;}/* 头部 */
header .pull-right a{color:#333;margin:0px 10px;font-size: 15px;
}/* 导航条 */
.nav{height: 50px;background: #02783e;
}
.nav ul li{width:13%;height: 50px;line-height: 50px;
}
.nav ul li a{font-size: 17px;}
.nav ul li:hover{background:rgb(235,195,8);
}/* 产品支持 */
#support{margin-left: 40px;
}
#support h2{color:#333;font-weight: bold;
}#support p{color:#333;font-size: 17px;height: 36px;line-height: 36px;
}
#support div ul{width:340px;margin-top: 80px;margin-left: -20px;}
#support div ul li{height: 150px;
}
#support div ul li p{font-size: 15px;font-weight: light;line-height: 25px;
}/* 各类优势 */
#advantages .row .col-md-3 p{width:230px;height:95px;color: #027348;font-size:20px;margin-left: 5px;font-weight: bold;line-height: 25px;
}/* 产品展示 */
#product div table tr td img{margin-right: 20px;;
}/* 新闻中心 */
#showNew .new-center{color:#333;width:150px;height:39px;border-top:5px solid #00923F;font-size: 18px;font-weight: bold;line-height: 38px;background:#fff;
}
#showNew .new-more{padding-right: 8px;width:570px;background: #eee;float:left;line-height: 40px;color:#333;font-size: 17px;
}/* 新闻下面的问题 */
.news-list div ul{list-style-image: url(../images/dot.jpg)
}.news-list div ul li{height: 40px;line-height: 40px;float: left;width:330px;border-bottom: 1px dashed #ccc;
}
.news-list ul li a{color:#333;
}/* 常见问题解答 */
#askAndAnswer ul li:nth-child(odd){color:#02783E;font-weight: bold;list-style-image: url(../images/ask.jpg);
}
#askAndAnswer ul li:nth-child(even){color: #333;list-style-image: url(../images/answer.jpg);
}
#askAndAnswer ul li{vertical-align: center;line-height: 22px;margin-top: 10px;
}#stores ul li{padding:5px;height:250px;width:284px;border:3px solid #027348;
}/* 门店展示 */
#stores div .row .col-md-1 img{display: inline-block;margin-top:100px;
}
#stores ul li img{margin-left: auto 0px;height:190px;width:268px;
}
#stores ul li h4{color:#333;font-weight: bold;line-height: 20px;text-align: center;
}/* 页脚 */
footer{margin-top: 130px;height:500px;width: 100%;background:url(../images/pageBg.jpg);background-position:-300px 10px;background-repeat:no-repeat;
}
.call{left: 50px;margin-top: 120px;margin-left:125px;}
#footer-nav>ul{height: 50px;width:720px;top:30px;background:#fff;padding-left:30px;margin-top: 150px;margin-right: 130px;
}
#footer-nav>ul li{}#footer-nav ul li a{display: inline-block;width:75px;font-size: 15px;height:50px;text-align: center;line-height: 50px;color:#02783E;font-weight: bold;
}#footer-nav ul span{color:#02783E;
}
.copyright p{line-height: 30px;font-size: 16px;margin-top: 40px;
}
项目完整资源在github：https://github.com/ly-datas/FEProjects/tree/master
以上的网页用的都是很基础的知识，Bootstrap的响应式效果也没有做得很细致完整。本人还比较小白，如有大佬发现了某些地方不合理的or有错误的，欢迎评论批评指正，共同进步。小白继续去学习了~~~
结合Bootstrap实现一点点奶茶加盟官网首页页面效果相关推荐
- 【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局 需要素材点击图片联系我或私信.评论 效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
- HTML学生个人网站作业设计：HTML做一个公司官网首页页面（纯html代码）
- 院线售票系统 背景：有一套连锁影院系统，包括官网、视频站、论坛、在线售票等等子系统，现要求你来实现其中的官网首页的电影信息展示和检索功能
设计一(8分):请为该功能设计一张电影信息表,字段大概包括电影名称.内部编号.主演.导演.票价.上映时间.简介.点赞数.众评等字段,除此之外字段可以根据你的设计自由添加(但不能少于以上内容).使用my ...
- 实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距 图片原 ...
- HTML/CSS——PC端QQ飞车官网首页
原作品效果: 仿制品效果: 代码: HTML <!DOCTYPE html> <html lang="en"> <head><meta c ...
- 超好看的自适应蜘蛛池官网首页源码
介绍: 一款自适应的官网首页程序,请自行修改为您需要的内容 网盘下载地址: http://kekewl.org/fVPKO0gfW8i0 图片:
- HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
- HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食 ...
- html实训QQ音乐官网首页制作
QQ音乐官网首页 html <!DOCTYPE html> <html lang="en"> <head><link rel=" ...
最新文章
- GitHub 博客-- Jekyll--代码高亮，Liquid 转义字符
- 未老先呆，这锅熬夜真的要背：生物钟影响阿尔茨海默症的机制被发现
- Centos下GCC引用mysql头文件和库文件
- hashmap的各种问题及答案
- BUAA 更大公约数
- 湖南大学计算机学院张柏杨,缪力-湖大信息科学与工程学院
- Spring MVC拦截器示例
- Linux怎么查看保存的密码,在Linux中查看已保存的WiFi密码
- 画图控件_用CAD画图，还不会用属性块？你不加班谁加班
- python 服务器_NeurDICOM——DICOMweb服务器端Python实现范例
- 记一些印象深刻的 Bug
- 思科路由器Ez×××解决地址重叠测试
- java protobuffer 网络_C#与Java通过protobuf进行网络通信过程中遇到的问题
- RHEL5中实现各种服务的准备条件：
- 网站速度这样优化，让你的网站飞起来
- js实现-别踩白块儿-类
- 肤色冷暖色测试软件_认识你自己|肤色冷暖测试
- 逐步分析类的拆分之案例——五彩斑斓的小球碰撞
- python对异常捕获的操作
- js 获取计算机mac地址,JS获取计算机mac地址以及IP的实现方法