结合Bootstrap实现一点点奶茶加盟官网首页页面效果

最新推荐文章于 2024-01-10 22:14:58 发布

VIP文章酸橙派SVT

最新推荐文章于 2024-01-10 22:14:58 发布

阅读量1.4k

点赞数 2

分类专栏： Bootstrap 前端学习文章标签： bootstrap html

本文链接：https://blog.csdn.net/qq_43816826/article/details/120507532

版权

学完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="images/logo.png" >
				</div>
				<img src="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" >

最低0.47元/天解锁文章

酸橙派SVT

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
4
评论
结合Bootstrap实现一点点奶茶加盟官网首页页面效果

学完bootstrap3后，找了一个简单的网站进行实战练习，只实现了网站首页的效果。用上bootstrap基本的栅格布局，轮播图和几个常用的样式类，适合小白练手。整个完整首页的实现效果是这样的：这里粘贴两个关键文件的代码：（完整项目资源放github，文末有地址。）1、index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>一点点官网|一点点.
复制链接

扫一扫