卡姿兰官网页面框架2022年5月

最新推荐文章于 2024-09-09 11:03:57 发布
最新推荐文章于 2024-09-09 11:03:57 发布
阅读量169 收藏
点赞数
文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A1609926242/article/details/124597931
版权

卡姿兰官网页面框架2022年5月

下面更新一下卡姿兰页面框架，有需要的可以直接拿走哦

先是效果图。

在这里插入图片描述
下面是代码区域 轮播图运用的是bootstrap框架轮播图
img图片官网自行抠图即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./js/bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <script src="./jquery-3.5.1.min.js"></script>
    <script src="./js/bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
    <title>卡姿兰</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        /* 导航栏 */
        .nav {
            width: 100%;
            height: 60px;
            background-color: #595353;
            margin-top: 0px;
        }

        .nav ul {

            list-style: none;
            margin: 0px;

            margin-left: 0px;


        }

        .nav li {

            display: inline;
            margin-left: 100px;


        }

        .nav a {

            line-height: 60px;

            color: #fff;

            text-decoration: none;

            padding: 20px 20px;


        }

        .nav a:hover {

            background-color: rgb(238, 86, 213);

        }

        /* 轮播图 */
        .demo {
            width: 100%;
            height: 700px;
            overflow: hidden
        }

        /* 产品精选 */
        .cp {
            margin-top: 40px;
            color: rgb(16, 78, 153);
            text-align: center;
        }
        /* 版权 */
        .bq{
            width: 100%;
            height: 310px;
            background-color: #595353;
            margin-top: 100px;
        }
        .xdh{
            margin-left: 150px;
            padding-top: 20px;
        }
        .xdh>ul{
            list-style: none;
       
        }
        .xdh ul li{
            display: inline;
            margin-left: 60px;
           

        }
        .xdh ul li a{
            color:grey;
        }
        .xdh ul li a:hover{
            color: white;
        }
 
      
        .db ul li{
            list-style-type:none;
            margin-left: 60px;
           

        }
        .db ul li a{
            color:grey;
        }
        .db ul li a:hover{
            color: white;
        }
    </style>
</head>

<body>
    <!-- logo部分 -->
    <div>
        <img src="./img/sy.jpg" alt="" style="width: 100%;">
    </div>

    <!-- 导航 -->
    <div class="nav">
        <ul>
            <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 id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="./img/佟丽娅中国红1900x700.png" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="./img/佟丽娅面部-1900x700.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="./img/微信图片_20200915115139.jpg" class="d-block w-100" alt="...">
            </div>
        </div>
    </div>

    <!-- 产品精选 -->
    <div class="cp">产品精选</div>
    <hr style="border: 0.1px solid black ;">
    <div style="display: flex; justify-content: center;">
        <div style="margin-left: 15px;">
            <div style="align-content: center; margin-left: 188px;">挚宠双芯唇膏</div>
            <img src="./img/584761.jpg" alt="" style="width: 450px;height: 550px;">
        </div>

        <div style="margin-left: 15px;">
            <div style="align-content: center; margin-left: 163px;">灵芝粉底液系列</div>
            <img src="./img/2.jpg" alt="" style="width: 450px;height: 550px;">
        </div>

        <div style="margin-left: 15px;">
            <div style="align-content: center; margin-left: 168px;">甜吻唇釉LuLu猪联名款</div>
            <img src="./img/3.jpg" alt="" style="width: 450px;height: 550px;">
        </div>
    </div>

<hr style="border: 0.1px solid black ;margin-top: 30px;">

<!-- 版权 -->
<div class="bq">
 <!-- 小导航 -->
    <div class="xdh">
        <ul>
            <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>
    <hr style="border: 0.1px solid grey;margin-left: 100px; width: 80%;">

    <div style="display: flex;justify-content: center;margin-left: -200px;" class="db">
        <div>
            <ul>
            <li><a href="">新品推荐</a></li>
            <li><a href="">LUlU猪联名</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>
            <ul>
                <li><a href="">新品推荐</a></li>
                <li><a href="">LUlU猪联名</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>
            <ul>
                <li><a href="">新品推荐</a></li>
                <li><a href="">LUlU猪联名</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>
            <ul>
                <li><a href="">新品推荐</a></li>
                <li><a href="">LUlU猪联名</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>
            <ul>
                <li><a href="">新品推荐</a></li>
                <li><a href="">LUlU猪联名</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>
</div>






</body>

</html>
憨批小白白
关注
专题资料（2021-2022年）产品管理作业卡姿兰.doc
10-08
专题资料
常用的几个框架官网【前端 / 自用】
weixin_49133874的博客
04-20 2598
做个记录 vxe-table 【表格库】 https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install Echarts 【可视化图表库】 https://echarts.apache.org/zh/index.html
Vue框架
热门推荐
m0_67402026的博客
03-06 1万+
目录 1. Vue 的基本认识 1.1. 官网 1.2. 介绍描述 1.3. Vue 的特点 1.4. 与其它前端 JS 框架的关联 1.5. Vue 扩展插件 2 Vue 的基本使用 2.1开发者工具调试Vue.js devtools_3.1.2_0 2.2 框架使用方式 2.3 框架使用 2.4 Vue数据单向传递 2.4.1 MVVM模型 2.4.2 Vue中的MVVM的划分 2.4.3 Vue中数据的单向传递 2.5 Vue数据双向绑定 3 常见指令 3.1 什么是指令
企业官网开源模版：专为中小企业设计的轻量级网址
chenchuang0128的博客
03-12 1484
FastIce-Tech 企业官网开源模版是一个专为中小企业设计的轻量级企业网址解决方案。它基于 Vue.js、ElementUI 和 Vue-Router 框架构建，旨在提供一个易于使用、界面美观且易于维护的企业官网。
如何高效制作官网
weixin_59013363的博客
06-20 956
俗话说得好 “磨刀不误砍柴工”，下面的文章将重点介绍为什么在官网的项目中选择了nuxt和tailwind css两个框架以及其优点。
（附源码）基于vue框架潮牌官网设计与实现 毕业设计010955
Weixin_CXSJ881的博客
01-28 765
本系统采用的数据库是Mysql，使用node.js的koa技术技术构建的一个管理系统，实现了本系统的全部功能。本次报告，首先分析了研究的背景、作用、意义，为研究工作的合理性打下了基础。针对潮牌官网的各项需求以及技术问题进行分析，证明了系统的必要性和技术可行性，然后对设计系统需要使用的技术软件以及设计思想做了基本的介绍，最后来实现潮牌官网和部署运行使用它。 在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
模仿卡姿兰微信小程序
06-18
在本项目中，“模仿卡姿兰微信小程序”是一个适合初学者的实践教程，旨在通过构建一个类似卡姿兰品牌的小程序来学习和掌握微信小程序的基本开发技能。微信小程序是一种轻量级的应用形态，用户无需下载安装即可使用，...
化妆品行业2021年5月数据跟踪：玉泽、薇诺娜618预售表现亮眼.pdf
07-16
化妆品行业作为日常消费和家庭与个人用品行业的重要组成部分，在过去的2021年5月，市场表现出了不同的特点。首先，淘系平台（主要指淘宝和天猫）在该月的化妆品成交额为162.82亿元，同比减少了21.16%，显示出一定的...
解数咨询： 小奥汀品牌调研报告-2021年4月.pdf
12-06
彩妆市场在中国经历了多年的发展，从早期国际品牌的引进，如美宝莲、欧莱雅，到21世纪初的老牌国货彩妆如卡姿兰、火烈鸟等的兴起，再到21世纪10年代末期，新锐国货彩妆品牌的快速崛起，如小奥汀、完美日记。...
XXXX湖南卡姿兰销售精英训练营课件-阿凡达【湖南】.ppt
03-02
XXXX湖南卡姿兰销售精英训练营课件-阿凡达【湖南】.ppt
dwz框架官网实例
05-13
dwz的官网实例，在eclipse中经过测试
网站常用框架
weixin_44737168的博客
08-18 657
网站框架通常分为两部分： 前端框架和后端框架。网站应用程序的前端是您可以看到并与之交互的部分。它涉及网站应用程序中的网页设计和交互工具。网站的前端几乎总是使用 HTML、CSS 和 JavaScript 语言进行设计。前端框架主要用于组织网站应用程序的开发、功能和交互性。另一方面，网站应用程序的后端由服务器、数据库以及与它们交互的代码组成。当您在浏览器上访问网站应用程序时，您无法看到网站应用程序的后端。网站后端的代码将动态数据传递到前端部分，以便您可以看到它。
适合做官网的php框架,分享九款构建响应式网站的最佳PHP框架
weixin_42116847的博客
03-11 916
原标题：分享九款构建响应式网站的最佳PHP框架目前，网上有大量的框架供大家选择，本文作者分享了9款各方面都兼具优势的PHP框架，主要用来构建响应式网站，开发人员可以根据自己的需求来选择下面的某一个框架。1.Symfony 2Symfony是一个开源的PHP框架，它在速度和灵活性方面都兼具优势。它提供了一套解决特定工程问题的概念和工具，帮助广大开发者减少重复性工作。抽象化意味着能用更简洁的东西表达复...
基于vue框架潮牌官网设计与实现毕业设计源码010955
m0_73244011的博客
09-05 909
用户：首页、公告消息、潮流资讯、订单列表、购物车、个人中心 管理员：首页、个人中心、公告栏、轮播图、用户管理、潮流资讯、资讯分类、商城中心、分类列表、订单列表
spring 框架官网下载地址
zhuchenchangk163的博客
03-15 2384
https://repo.spring.io/release/org/springframework/spring/
官网技术框架学习方法
qq_35068291的博客
05-04 240
官网是学习技术框架最好的地方，是自学的最佳方式 以学习Spring为例子，进入到官网，选： project—>(比如想学springboot) 点击springboot—>点击"Learn" —>选择一个版本 —>浏览器右上角选翻译成中文 —>大致看个几遍 —>切换到英文，再具体看 ...
大型网站技术框架
maqianghb的博客
06-24 3764
1 大型网站架构演化过程1.1 应用服务和数据服务分离应用服务和数据分离体现在三个模块：应用服务器、文件服务器和数据服务器。应用服务器需要处理大量业务逻辑，因此重点关注CPU使用；数据服务器需要快速磁盘检索和数据缓存能力，重点在更快的磁盘和更大的内存；文件服务器需要存储大量用户上传的文件，因此关注点在更大的硬盘上。1.2 缓存的使用根据二八定律，80%的业务访问集中在20%的数据上，那么这一部分热...
Spring官网下载dist.zip的几种方法
weixin_34090643的博客
07-15 263
Spring官网改版后，很多项目的完整zip包下载链接已经隐掉了，虽然Spring旨在引导大家用更“高大上”的maven方式来管理所依赖的jar包，但是完全没想到中国的国情，在伟大的墙内，直接通过maven下载墙外的东西，要么龟速，要么直接被和谐。 下面是从网上搜集的一些方法，可用于一次性下载Spring各项目的完整dist.zip 第一种 直接 http://repo.springsou...
spring官方网站（翻译），大力推广微服务？
ray
04-18 667
轮询大广告 spring框架5.0 springOne Platform 一站平台 在Cloud Foundry(VMvare推出的云平台)上，自动操纵spring cloud Pivotal(一家公司)web服务，毫不费力的将spring boot发布到云上 spring clound Edgware版本发布 spring是现代java的根...
HTML、CSS实现树状图
最新发布
p_s_p的博客
09-09 707
【代码】HTML、CSS实现树状图。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值