Web期末大作业基础项目--花西子美妆网站

蛋蛋想吃冰淇凌

已于 2024-07-22 15:29:09 修改

阅读量771

点赞数 25

文章标签：课程设计 css3 bootstrap html5 前端 visual studio

于 2024-07-22 15:24:14 首次发布

本文链接：https://blog.csdn.net/qq_73278116/article/details/140608624

版权

前言

一、主要功能设计

二、主要功能截图

1.登录注册

2.首页

3.品牌介绍

4.产品系列

5.礼赠专区

6.会员权益、立即完善

三、主要源码展示

总结

前言：

在这个色彩斑斓、追求个性与美的时代，每一位女性都是独一无二的风景，她们以独特的魅力诠释着对生活的热爱与追求。正是这份对美的无限向往与探索，催生了花西子——一个致力于将东方美学与现代科技完美融合的美妆品牌，并以此精心打造了花西子美妆网站，展示美妆产品及品牌形象。

一、主要功能设计

主要技术：HTML5、CSS3、Bootstrap、JavaScript

主要模块（共七个页面）：首页、品牌介绍、产品系列、礼赠专区、会员权益、立即完善、登录注册

引入文件：（bootstrap官网）

 <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

  <!-- Bootstrap JS -->

  <script src="./bootstrap/js/jquery-3.7.1.min.js"></script>

  <script src="./bootstrap/js/bootstrap.min.js"></script>

  <script src="./bootstrap/js/bootstrap.bundle.min.js"></script>

二、主要功能截图

1.登录注册

JavaScript，引用bootstrap（模态对话框、表单、按钮），CSS进行修饰

2.首页

使用Bootstrap的导航栏、轮播图、栅格系统等，通过CSS3的过渡和动画效果致使鼠标悬停图片放大与切换图片；

使用sticky-top类使其导航栏固定在页面顶部,当用户向下滚动页面时，导航栏会保持在页面顶部显示；导航栏与底部都运用伪类当鼠标悬停在导航栏上时改变文字颜色，以提示用户该元素可以被点击；

修改地址栏图标技术；

页面右下角有个箭头，点击箭头跳回页面顶部（固定定位）。

3.品牌介绍

4.产品系列

使用CSS的伪类选择器、过渡等属性，结合HTML的结构布局，共同实现鼠标悬停图片放大、文字滑出的效果;

运用cursor: pointer; 属性当鼠标悬停时显示小手图标

弹性布局

5.礼赠专区

使用Bootstrap卡片、按钮，在此基础上运用CSS修饰

6.会员权益、立即完善

主体区域（包含图片、文字、按钮、表单），展示品牌会员权益、完善信息

使用Bootstrap，如按钮（点击按钮进入完善信息页面，另外一个按钮点击回到首页）等，在此基础上运用CSS修饰。

完善信息页面运用了表单。

三、主要源码展示

登录注册：

 <div class="container">
		<div class="modal-dialog" id="login_form">
			<div class="modal-content">
				<h2>花西子御花园</h2>
				<p>| 敬卿光临 |</p>
				<div class="modal-title">
					 <ul class="news-nav js-nav-title">
						<li class="on" data="login">登录</li>
						<li class="" data="register">注册</li>
					 </ul>
				</div>
                <!-- 登录 -->
				<div class="modal-body index-news-list" id="index-news-list-1">
					<form class="loginForm" id="loginForm" action="" method="post">
						  <div class="form-group">
							  <input class="form-control required" name="name" id="name" type="text" placeholder="手机号码">
						  </div>
						  <div class="form-group">
							  <input class="form-control required" name="password" id="password" type="password" placeholder="密码">
						  </div>
						  <div class="form-group">
							  <label for="remember">
								<input type="checkbox" name="remember" id="remember" value="0"/> 记住密码
							  </label>
						  </div>
						  </form>
						  <!-- 点击登录跳转到首页 -->
					 <div class="form-group">
							  <a href="./index.html"><button class="btn btn-primary" type="submit">登录</button></a>
						  </div>
				</div>
				<!-- 注册 -->
				<div class="modal-body index-news-list" id="index-news-list-2">
					<form class="loginForm" id="registerForm" action="" method="post">
						  <div class="form-group">
							  <input class="form-control required" name="name" id="name" type="text" placeholder="手机号码">
						  </div>
						  <div class="form-group">
							  <input class="form-control required" name="password" id="rePassword" type="password" placeholder="请输入密码">
						  </div>
						  <div class="form-group">
							  <input class="form-control required" name="rePassword" id="rePassword1" type="password" placeholder="请再次输入密码">
						  </div>
						  
                          <div class="form-group">
                            <label for="remember">
                              <input type="checkbox" name="remember" id="remember" value="0"/>已阅读并同意《花西子御花园用户协议》及《花西子御花园隐私条款》
                            </label>
                        </div>

						  <div class="form-group">
							  <button class="btn btn-primary" type="submit">立即注册</button>
						  </div>
					 </form>
				</div>
				
			</div>
		</div>
	</div>
	<script>
		$(document).ready(function () {
			$(".js-nav-title li").click(function(){
				$(this).attr("class","on");
				$(this).siblings().attr("class","");
				var index = $(".js-nav-title li").index(this);
				$(".index-news-list").css("display","none");
				$("#index-news-list-"+(index+1)).css("display","block");
			});
		});
	</script>

首页：

<!-- 导航栏 -->
  <nav class="navbar navbar-expand-sm justify-content-center  sticky-top">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="./index.html">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./brand.html">品牌介绍</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./product.html">产品系列</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./gift.html">礼赠专区</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./member.html">会员权益</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./login.html">登录注册</a>
      </li>
    </ul>
  </nav>

  <!-- 轮播 -->
  <div class="center_box">
    <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./images/rote10.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
          <img src="./images/rote8.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
          <img src="./images/rote2.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
          <img src="./images/rote7.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
          <img src="./images/rote9.jpg" class="d-block w-100" alt="">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <!-- 中间区域 -->
  <!-- 卡片 -->
  <div class="gift">
    <div class="title">
      <h1>礼赠专区</h1>
      <p>GIFT AREA</p>
    </div>
    <div class="card-gift">
      <div class="card-body">
        <img class="card-img-top" src="./images/gift.png" alt="">
        <h4 class="card-title">东方佳人妆盒</h4>
        <p class="card-text">花西子妆盒彩妆礼盒套装化妆品全套组合</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift1.png" alt="">
        <h4 class="card-title">[小黛纱]唇纱礼盒</h4>
        <p class="card-text">花西子小黛纱唇釉哑光丝绒不易掉色口红礼盒</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift2.png" alt="">
        <h4 class="card-title">花露养唇同心锁口红</h4>
        <p class="card-text">花西子同心锁口红哑光唇膏女不易掉色</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift3.png" alt="">
        <h4 class="card-title">花露玲珑陶瓷口红</h4>
        <p class="card-text">花西子陶瓷雕花口红唇釉女半哑光焦糖豆沙色正品润唇膏</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift4.png" alt="">
        <h4 class="card-title">花隐星穹口红</h4>
        <p class="card-text">花西子雕花口红唇釉女哑光豆沙色生日礼物</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift5.png" alt="">
        <h4 class="card-title">底妆如玉组合</h4>
        <p class="card-text">花西子底妆如玉三件套组合春夏防晒妆前粉饼定妆气垫</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
    </div>




    <!-- 固定定位，能跳回顶部的盒子.意思是固定定位盒子。 -->
    <div class="fixedBox">
      <a href="#">
        <!--    <a href="#">中href里应该写上要跳转的路径，如果写个  #  ，他就会跳到本页面的顶部 -->
        <img src="./images/indicate.png" alt="">
      </a>
    </div>
    <!-- 底部区域 -->
    <footer class="footer">
      <div class="nav-links">
        <a href="./index.html">首页</a>
        <a href="./brand.html">品牌介绍</a>
        <a href="./product.html">产品系列</a>
        <a href="./gift.html">礼赠专区</a>
        <a href="./member.html">会员权益</a>
        <a href="./login.html">登录注册</a>
      </div>
      <div class="contact-info">
        <p>联系方式:183-7842-8953</p>
        <p>客服邮箱:703554823@qq.com</p>
      </div>
      <div class="address">
        <p>公司地址:©2023 浙江集团有限公司 版权所有 浙ICP备2022031832号-1</p>
      </div>
    </footer>

品牌介绍：

<!-- 中间区域 -->
    <div class="container brand-intro">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8">
                <header>
                    <h2>FLORASIS的故事</h2>
                    <p>花西子于2017年出生于中国杭州的西湖畔。几千年来,西湖一直是诗人和画家所尊敬的强大缪斯女神,
                        至今仍是灵感来源。<br><br>
                        自构思以来，我们就开始探索传统美容仪式的智慧，同时尊重中国美学的哲学。通过将尖端技术与滋
                        养花香精的深入研究相结合，我们的产品将彩妆和护肤统一起来。科学与艺术的结合，我们的产品是
                        对内在健康、外在美和古老工艺的礼物和遗产。
                    </p>
                </header>
                <div class="brand-image">
                    <img src="./images/brand.png" alt="">
                </div>
                <section class="brand-description">
                    <h2>品牌愿景</h2>
                    <p>东方彩妆，以花养妆。扬东方之美，铸百年国妆。以东方文化为母体，以东方科技为根基.传承并弘扬东方文化之美、科技之美、艺术之美、
                        美妆之美，让东方之美走向世界.</p>
                </section>
                <div class="video">
               <video poster="./images/video.png" src="./video/brand.mp4" controls></video>
               </div> 
                <section class="brand-description">
                    <h2>我们的六大承诺</h2>
                   <div class="brand-content">
                    <div class="brand-item" >
                        <img class="promise-img" src="https://cdn.shopify.com/s/files/1/0528/2486/7015/files/story-promise-1.png?v=1676976038" alt="">
                        <p class="bold">颂扬传统</p>
                        <p>通过原创、创新和永恒的产品分享和庆祝中国传统文化。</p>
                    </div>
                    <div class="brand-item" >
                        <img class="promise-img" src="	https://cdn.shopify.com/s/files/1/0528/2486/7015/files/story-promise-2.png?v=1676976038" alt="">
                        <p class="bold">始终创新</p>
                        <p>通过我们的5个研发中心和170+项专利彻底改变化妆品科学的未来。</p>
                    </div>
                    <div class="brand-item">
                        <img class="promise-img" src="https://cdn.shopify.com/s/files/1/0528/2486/7015/files/story-promise-3.png?v=1676976038" alt="">
                        <p class="bold">用大自然滋养</p>
                        <p>从大自然中汲取精华，从继承的美容配方和药物中汲取灵感。</p>
                    </div>
                    <div class="brand-item">
                        <img class="promise-img" src="https://cdn.shopify.com/s/files/1/0528/2486/7015/files/story-promise-4.png?v=1676976038" alt="">
                        <p class="bold">拥护客户</p>
                        <p>通过积极倾听、渐进式迭代和与客户的持续对话来改进我们的产品。</p>
                    </div>
                    <div class="brand-item">
                        <img class="promise-img" src="https://cdn.shopify.com/s/files/1/0528/2486/7015/files/story-promise-5.png?v=1676976038" alt="">
                        <p class="bold">努力追求更好的客户</p>
                        <p>从产品到交付再到客户服务，我们努力在每个领域都做得更好。</p>
                    </div>
                    <div class="brand-item">
                        <img class="promise-img" src="https://cdn.shopify.com/s/files/1/0528/2486/7015/files/story-promise-6.png?v=1676976038" alt="">
                        <p class="bold">做好事,做更多事</p>
                        <p>履行我们的责任，帮助有需要的人。无论是保护文化遗产、提供救济还是更多。</p>
                    </div>
                   </div>
                </section>
            </div>
        </div>
    </div>

产品系列：

<div class="middle">
<div class="tnav">
  <h2>系列推荐</h2>
  <p>FECOMMEND SERIES</p>
</div>
 </div>
 <div class="product-container">  
  <div class="product">  
      <img src="./images/product1.jpg" alt="">  
      <div class="product-label">防晒系列</div>  
  </div>  
  <div class="product">  
    <img src="./images/product3.png" alt="">  
    <div class="product-label">眼妆/眉妆系列</div>  
</div>  
<div class="product">  
  <img src="./images/product2.png" alt="">  
  <div class="product-label">定妆系列</div>  
</div>  
<div class="product">  
  <img src="./images/product4.jpg" alt="">  
  <div class="product-label">底妆/颊妆系列</div>  
</div>  
<div class="product">  
  <img src="./images/product.png" alt="">  
  <div class="product-label">唇妆系列</div>  
</div>   
</div>  

<!-- 产品推荐 -->
<div class="recom">
<div class="img-hover-container">  
  <img src="./images/recom.png" alt="">  
  <img class="hover-img" src="./images/recomh.png" alt="">  
  <h4>瓷质唇膏</h4>
  <p>￥282</p>
</div>  
<div class="img-hover-container">  
  <img src="./images/recom1.png" alt="">  
  <img class="hover-img" src="./images/recomh1.png" alt="">  
  <h4>修正遮瑕膏</h4>
  <p>￥230</p>
</div> 
<div class="img-hover-container">  
  <img src="./images/recom2.png" alt="">  
  <img class="hover-img" src="./images/recomh2.png" alt="">  
  <h4>完美无暇的新鲜套装</h4>
  <p>￥229</p>
</div> 
<div class="img-hover-container">  
  <img src="./images/recom3.png" alt="">  
  <img class="hover-img" src="./images/recomh3.png" alt="">  
  <h4>仙女桃花压粉</h4>
  <p>￥199</p>
</div> 
</div>

礼赠专区：

 <div class="gift">
    <div class="title">
      <h1>礼赠专区</h1>
      <p>GIFT AREA</p>
    </div>
    <div class="card-gift">
      <div class="card-body">
        <img class="card-img-top" src="./images/gift.png" alt="">
        <h4 class="card-title">东方佳人妆盒</h4>
        <p class="card-text">花西子妆盒彩妆礼盒套装化妆品全套组合</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift1.png" alt="">
        <h4 class="card-title">[小黛纱]唇纱礼盒</h4>
        <p class="card-text">花西子小黛纱唇釉哑光丝绒不易掉色口红礼盒</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift2.png" alt="">
        <h4 class="card-title">花露养唇同心锁口红</h4>
        <p class="card-text">花西子同心锁口红哑光唇膏女不易掉色</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift3.png" alt="">
        <h4 class="card-title">花露玲珑陶瓷口红</h4>
        <p class="card-text">花西子陶瓷雕花口红唇釉女半哑光焦糖豆沙色正品润唇膏</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift4.png" alt="">
        <h4 class="card-title">花隐星穹口红</h4>
        <p class="card-text">花西子雕花口红唇釉女哑光豆沙色生日礼物</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
      <div class="card-body">
        <img class="card-img-top" src="./images/gift5.png" alt="">
        <h4 class="card-title">底妆如玉组合</h4>
        <p class="card-text">花西子底妆如玉三件套组合春夏防晒妆前粉饼定妆气垫</p>
        <a href="#" class="btn btn-primary">购买</a>
      </div>
    </div>

6.会员权益、立即完善：

 <div class="container">
    <div class="bind">
      <img src="./images/qr-code.png" alt="">
      <p>绑定花西子彩妆公众号</p>
    </div>
    <div class="benefit">
    <div class="benefit-header">
      <p>专属特权</p>
      <h4>同享专柜积分礼遇</h4>
    </div>
    <div class="benefit-item">
      <div class="benefit-text">
       <h2><img src="./icons/0-circle.svg"> 消费积分</h2>
        <p>购买正装即可入会享消费积分
          花西子中国大陆地区官网与专柜
          及花西子天猫官方旗舰店和花西子
          京东自营官方旗舰店同享积分</p>
      </div>
      <img class="benefit-image" src="./images/benifit.jpg" alt="">
    </div>
    <div class="benefit-item">
      <img class="benefit-image" src="./images/benifit1.png" alt="">
      <div class="benefit-text">
        <h2><img src="./icons/0-circle.svg"> 积分兑礼</h2>
        <p>会员尊贵礼遇 兑美妍臻礼
          前往<花西子>品牌公众号进行兑换</p>
      </div>
    </div>
    <div class="benefit-item">
      <div class="benefit-text">
        <h2><img src="./icons/0-circle.svg"> 生日特权</h2>
        <p>完善生日信息 生日宠爱为你开启
          会员生日月消费,首单享多倍会员积分
        </p>
      </div>
      <img class="benefit-image" src="./images/benifit2.png" alt="">
    </div>
    <!-- 按钮 -->
   <a href="./message.html"><button class="btn btn-default">立即完善</button></a> 
  </div>
  <div class="card custom-card"> 
    <div class="card-body">  
      <h1 class="card-title">会员权益</h1>  
      <p>本服务并非供18周岁以下未成年人使用,如果您未满18岁,请不要注册或授权: 您选择注册或授权即视为
        您已满18岁。</p>   
    <h3>·入会规则</h3>





<div class="container">
    <form>
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
      </div>
      <div class="form-group">
        <label for="birthday">生日</label>
        <input type="date" class="form-control" id="birthday">
      </div>
      <div class="form-group">
        <label>性别</label>
        <div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="gender" id="male" value="male">
            <label class="form-check-label" for="male">男</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="gender" id="female" value="female">
            <label class="form-check-label" for="female">女</label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="phone">手机号</label>
        <input type="tel" class="form-control" id="phone" placeholder="请输入您的手机号">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" placeholder="请输入您的密码">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="subscribe">
        <label class="form-check-label" for="subscribe">我同意花西子及所在花西子集团向我发送邮件、彩信或致电。</label>
      </div>
    </form>
    <a href="./member.html">  <button type="submit" class="btn btn-primary">提交</button></a>
  </div>

总结：

通过本次，我深入了解了HTML5、CSS3和Bootstrap在前端开发中的强大功能，并成功应用于花西子品牌网站的设计制作中。在实验过程中，我遇到了许多挑战和困难，如页面布局的调整、响应式设计的实现等。但通过不断尝试，我逐渐掌握了这些技术并成功解决了问题。同时也学会了如何利用Bootstrap快速搭建页面框架和组件。

总体而言，通过本次实验，我对前端网页设计和开发有了更深入的认识，并且对于如何设计和制作一个吸引人的美妆品牌网站有了更多的经验和思考。因此，在未来的学习和工作中，我将继续探索如何将这些技术应用于实际品牌网站建设中，并不断提升自己的设计能力和技术水平。

蛋蛋想吃冰淇凌

关注

25
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web期末大作业基础项目--花西子美妆网站

在这个色彩斑斓、追求个性与美的时代，每一位女性都是独一无二的风景，她们以独特的魅力诠释着对生活的热爱与追求。正是这份对美的无限向往与探索，催生了花西子——一个致力于将东方美学与现代科技完美融合的美妆品牌，并以此精心打造了花西子美妆网站，展示美妆产品及品牌形象。通过本次，我深入了解了HTML5、CSS3和Bootstrap在前端开发中的强大功能，并成功应用于花西子品牌网站的设计制作中。在实验过程中，我遇到了许多挑战和困难，如页面布局的调整、响应式设计的实现等。但通过。
复制链接

扫一扫