【前端必备项目】品优购商城前端

技术栈

  • Html
  • css
  • JavaScript
  • jQuery

体验

pc端打开:https://yangyanyan.top/pygshopping/
源码(记得给我个star):https://gitee.com/yyy1203/pyg-shopping.git

效果

除了页面布局,还结合了后面的js和jq,为网页增加一些特效,此网站目前只是前端静态

首页

  • 轮播图
  • 电梯导航
  • 简单的seo优化
    【前端必备项目】品优购商城前端_第1张图片
    【前端必备项目】品优购商城前端_第2张图片
    【前端必备项目】品优购商城前端_第3张图片
    【前端必备项目】品优购商城前端_第4张图片

详情页

  • 商品图片放大镜
    【前端必备项目】品优购商城前端_第5张图片
    【前端必备项目】品优购商城前端_第6张图片
    【前端必备项目】品优购商城前端_第7张图片
    【前端必备项目】品优购商城前端_第8张图片

分类列表页

【前端必备项目】品优购商城前端_第9张图片

购物车

  • 商品数量增减
  • 删除商品
  • 合计商品价格
    【前端必备项目】品优购商城前端_第10张图片

【前端必备项目】品优购商城前端_第11张图片

登录

【前端必备项目】品优购商城前端_第12张图片

注册

【前端必备项目】品优购商城前端_第13张图片

提交订单页

【前端必备项目】品优购商城前端_第14张图片
整个网站基本就是这样,有空的话会写个商城后端,建议学完前端的同学都做一下这个项目,做完对html,css基础有所加深

部分源码展示

具体请看git仓库,注释较为详细

 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购title>
    
    
    <meta name="description" content="购物商城,网上购物">
    
    <meta name="keywords" content="网上购物,手机,电脑,服饰">
    
    <link rel="shortcut icon" href="./bitbug_favicon.ico" />
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.min.js">script>
    <script src="./js/animate.js">script>
    <script src="./js/index.js">script>


head>

<body>
    

    
    <div class="top-nav">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您! li>
                    <span class="isLogin">
                    <li><a href="./login.htm">请登录 a>li>
                    <li><a href="./register.html" class="color-red">免费注册a>li>
                    span>
                ul>
            div>
            <div class="fr">
                <ul>
                    <li><a href="">我的订单a>li>
                    <li>li>
                    <li><a href="">我的品优购a><i class="icon-down">i>li>
                    <li>li>
                    <li><a href="">品优购会员a>li>
                    <li>li>
                    <li><a href="">企业采购a>li>
                    <li>li>
                    <li><a href="">关注品优购a><i class="icon-down">i>li>
                    <li>li>
                    <li><a href="">客户服务a><i class="icon-down">i>li>
                    <li>li>
                    <li><a href="">网站导航a><i class="icon-down">i>li>
                ul>
            div>
        div>
    div>
    
    
    <div class="header w">
        <div class="logo">
            <a href="./index.html" title="品优购">a>
        div>
        
        <div class="search">
            <input type="text" placeholder="语言开发">
            <button>搜索button>
        div>
        
        <div class="shopbar">
            
            <i>i><a href="./cart.html">我的购物车a><em>em>
            <i class="eight">8i>
        div>
        
        <div class="hotwords">
            <ul>
                <li><a href="">优惠购首发a>li>
                <li><a href="">亿元优惠a>li>
                <li><a href="">9.9元团购a>li>
                <li><a href="">美满99减30a>li>
                <li><a href="">办公用品a>li>
                <li><a href="">电脑a>li>
                <li><a href="">通信a>li>
            ul>
        div>
    div>
    

你可能感兴趣的:(项目,前端,前端,css,javascript,html,jquery)