小兔鲜项目网页版

头部模块

在这里插入图片描述

 <!-- 头部模块 -->
  <header>
    <!-- 快捷菜单模块 -->
    <div class="xtx-shortcut">
      <!-- 版心的盒子 -->
      <nav class="container">
        <ul class="fr">
          <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>
      </nav>
    </div>

    <!-- 主导航模块 -->
    <div class="xtx-main-nav container">
      <!-- logo -->
      <h1 class="logo fl">
        <a href="#">小兔鲜儿</a>
      </h1>

      <!-- 导航 -->
      <nav class="fl">
        <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>
          <li><a href="#">孕婴</a></li>
          <li><a href="#">服装</a></li>
        </ul>
      </nav>

      <!-- 搜索 -->
      <div class="search fl">
        <input type="search" placeholder="搜一搜">
      </div>

      <!-- 购物车 -->
      <div class="cart fl">
        <span>2</span>
      </div>
    </div>
  </header>

/* 版心的公共类 */
.container {
  width: 1240px;
  margin: 0 auto;
}

/* 快捷菜单模块：xtx-shortcut */
.xtx-shortcut {
  /* 通栏的话，不用设置宽度 */
  height: 52px;
  background-color: #333333;
}

/* container的高度与父元素xtx-shortcut保持一致 */
.xtx-shortcut .container{
  height: 52px;
  /* background-color: skyblue; */
}

.xtx-shortcut ul li {
  float:left;
  line-height: 52px;
  color:#666666;
}

.xtx-shortcut ul a{
  margin: 0 16px;
  color:#dcdcdc;
  font-size: 14px;
}

.xtx-shortcut li:last-child a {
  margin-right: 0;
}

.xtx-shortcut li:last-child a::before {
  content:'';
  display:inline-block;
  width: 11px;
  height: 16px;
  margin-top: -3px;
  margin-right: 8px;
  /* background-color: red; */
  background: url('../images/sprites.png') -160px -70px;
  vertical-align: middle;
}

/* 主导航模块：xtx-main-nav */
.xtx-main-nav {
  height: 130px;
  padding-top: 30px;
  /* 自动内减 */
  box-sizing: border-box;
  /* background-color: pink; */
}

.xtx-main-nav .logo {
  width: 207px;
  height: 70px;
  margin-left: 25px;
  /* background-color: red; */
}

.xtx-main-nav .logo a{
  display: block;
  height: 70px;
  background: url('../images/logo.png');
  background-size: 100% 100%;
  font-size: 0;
}

.xtx-main-nav nav {
  margin-left: 40px;
}

.xtx-main-nav nav li {
  float:left;
  height: 70px;
  margin-right: 48px;
  line-height: 70px;
}

.xtx-main-nav nav a:hover {
  color:#27ba9b;
  border-bottom: 1px solid #27ba9b;
  padding-bottom: 7px;
}

.xtx-main-nav .search {
  position: relative;
  width: 172px;
  height: 30px;
  margin-top: 24px;
  margin-left: 34px;
  /* background-color: orange; */
}

.xtx-main-nav .search::before{
  content:'';
  position: absolute;
  top:5px;
  left: 2px;
  width: 18px;
  height: 18px;
  /* background-color: red; */
  background: url('../images/sprites.png') -80px -70px;
}

.xtx-main-nav .search input{
  width: 172px;
  height: 30px;
  border-bottom: 2px solid #e7e7e7;
  padding-left:31px;
}

.xtx-main-nav .cart{
  position: relative;
  width: 23px;
  height: 23px;
  margin-top: 28px;
  margin-left: 15px;
  /* background-color: skyblue; */
  background: url('../images/sprites.png') -120px -70px;
}

.xtx-main-nav .cart span {
  position: absolute;
  width: 20px;
  height: 15px;
  right:-12px;
  top: -5px;
  background-color: #e26237;
  border-radius: 8px;
  color:#ffffff;
  font-size: 13px;
  text-align: center;
  line-height: 15px;
}

/* 宣传服务 xtx-service*/
.xtx-service {
  height: 174px;
  background-color: #333333;
}

.xtx-service .container{
  width: 1393px;
  height: 173px;
  border-bottom: 1px solid #434343;
  /* background-color: pink; */
}

.xtx-service .container a {
  float:left;
  width: 33.33%;
  height: 173px;
  /* background-color: skyblue; */
  text-align: center;
  line-height: 173px;
  font-size: 28px;
  color:#ffffff;
}

.xtx-service .container a::before{
  content:'';
  display: inline-block;
  width: 58px;
  height: 58px;
  margin-right: 19px;
  /* background-color: red; */
  background:url('../images/sprites.png') 0 0;
  /* 设置垂直对齐方式 */
  vertical-align:middle;
}

.xtx-service .container a:nth-child(2)::before{
  background: url('../images/sprites.png') -130px 0;
}

.xtx-service .container a:nth-child(3)::before{
  background: url('../images/sprites.png') -65px 0;
}

网站入口部分

在这里插入图片描述

 <!-- 网站入口 -->
  <div class="xtx-entry">
    <div class="container">
      <!-- 轮播图 -->
      <ul class="banner">
        <li>
          <a href="#">
            <img src="./uploads/banner_1.png" alt="">
          </a>
        </li>
      </ul>

      <!-- 商品分类侧边栏 -->
      <aside class="category">
        <ul>
          <li><a href="#">生鲜 <span>水果</span> <span>蔬菜</span></a></li>
          <li><a href="#">美食 <span>面点</span> <span>干果</span></a></li>
          <li><a href="#">餐厨 <span>数码产品</span></a></li>
          <li><a href="#">电器 <span>床品</span> <span>四件套</span> <span>被枕</span></a></li>
          <li><a href="#">居家 <span>奶粉</span> <span>玩具</span> <span>辅食</span></a></li>
          <li><a href="#">洗护 <span>洗发</span> <span>洗护</span> <span>美妆</span></a></li>
          <li><a href="#">孕婴 <span>奶粉</span> <span>玩具</span></a></li>
          <li><a href="#">服饰 <span>女装</span> <span>男装</span></a></li>
          <li><a href="#">杂货 <span>户外</span> <span>图书</span></a></li>
          <li><a href="#">品牌 <span>品牌制造</span></a></li>
        </ul>
      </aside>

      <!-- 左右箭头 -->
      <a href="#" class="prev"></a>
      <a href="#" class="next"></a>

      <!-- 轮播图指示器 -->
      <ol class="indicator">
        <li></li>
        <li></li>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </div>

/* 网站入口：xtx-entry */
.xtx-entry{
  height: 500px;
  background-color: #f5f5f5;
}

.xtx-entry .container{
  position: relative;
  height: 500px;
  background-color: pink;
}

.xtx-entry .container .category{
  position: absolute;
  left: 0;
  top: 0;
  width: 251px;
  height: 500px;
  background-color: rgba(0, 0, 0, .8);
}

.xtx-entry .category a{
  color:#fff;
}

.xtx-entry .category li {
  position: relative;
  height: 50px;
  padding-left: 36px;
  line-height: 50px;
}

.xtx-entry .category li:hover{
  background-color: #27ba9b;
}

.xtx-entry .category span{
  font-size: 14px;
}

.xtx-entry .category span:first-child{
  margin-left: 15px;
}

.xtx-entry .category a::after {
  content:'';
  /* 定位 */
  position: absolute;
  top: 19px;
  right: 19px;
  width: 6px;
  height: 11px;
  background:url('../images/sprites.png') -80px -110px;
}

.xtx-entry .prev {
  position: absolute;
  top: 228px;
  left: 260px;
  width: 45px;
  height: 45px;
  /* background-color: rgba(0, 0, 0, .2); */
  border-radius: 50%;
  background: rgba(0, 0, 0, .2) url('../images/sprites.png') 13px -60px;

}

.xtx-entry .next {
  position: absolute;
  top: 228px;
  right: 10px;
  width: 45px;
  height: 45px;
  /* background-color: rgba(0, 0, 0, .2); */
  border-radius: 50%;
  background: rgba(0, 0, 0, .2) url('../images/sprites.png') -22px -60px;

}

.xtx-entry .indicator {
  position: absolute;
  left: 680px;
  bottom: 31px;
  width: 110px;
  height: 10px;
  /* background-color: red; */
}

.xtx-entry .indicator li {
  float:left;
  width: 10px;
  height: 10px;
  margin-right: 15px;
  background-color: rgba(255, 255, 255, .4);
  border-radius: 50%;
}

.xtx-entry .indicator li.active{
  background-color: #fff;
}

.xtx-entry .indicator li:last-child {
  margin-right:0px;
}

新鲜好物模块

在这里插入图片描述

<!-- 新鲜好物模块 -->
  <div class="xtx-new-goods container">
    <!-- 好物模块头部 -->
    <div class="goods-hd">
      <!-- 左侧的h2 -->
      <h2 class="fl">新鲜好物 <span>新鲜出炉 品质靠谱</span></h2>
      
      <!-- 右侧a标签 -->
      <a href="#" class="fr">查看全部</a>
    </div>

    <!-- 好物模块具体列表 -->
    <ul class="goods-list">
      <li>
        <a href="#">
          <img src="./uploads/new_goods_1.jpg" alt="">
          <h3>毫米无线吸尘器F8</h3>
          <p><span>￥</span> 899</p>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="./uploads/new_goods_2.jpg" alt="">
          <h3>智能环绕3D空调</h3>
          <p><span>￥</span>1299</p>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="./uploads/new_goods_3.jpg" alt="">
          <h3>广东软软糯米煲仔饭</h3>
          <p><span>￥</span>129</p>
        </a>
      </li>

      <li>
        <a href="#">
          <img src="./uploads/new_goods_4.jpg" alt="">
          <h3>罗西机械智能手表</h3>
          <p><span>￥</span>3399</p>
        </a>
      </li>
    </ul>
  </div>

/* 新鲜好物模块：xtx-new-goods */
.xtx-new-goods{
  height: 520px;
  /* background-color: red; */
}

.xtx-new-goods .goods-hd {
  height: 115px;
  /* background-color: skyblue; */
  line-height: 115px;
}

.xtx-new-goods .goods-hd h2{
  height: 115px;
  font-size: 29px;
  font-weight: 400;
}

.xtx-new-goods .goods-hd h2 span {
  font-size: 16px;
  color:#999;
}

.xtx-new-goods .goods-hd a {
  color:#999;
}

.xtx-new-goods .goods-hd a::after{
  content:'';
  display:inline-block;
  width: 7px;
  height: 13px;
  margin-left: 13px;
  /* background-color: white; */
  background: url('../images/sprites.png') 0 -110px;
  vertical-align: middle;
}

.xtx-new-goods .goods-list {
  height: 405px;
  /* background-color: orange; */
}

.xtx-new-goods .goods-list li {
  float:left;
  width: 304px;
  height: 405px;
  margin-right: 8px;
  background-color: #f0f9f4;
  line-height: 1;
  text-align: center;
}

.xtx-new-goods .goods-list li:last-child {
  margin-right: 0px;
}

.xtx-new-goods .goods-list li img{
  width: 100%;
}

.xtx-new-goods .goods-list li h3{
  height: 30px;
  margin-top: 22px;
  font-size: 20px;
  font-weight: 400;
  /* margin-bottom: 19px; */
}

.xtx-new-goods .goods-list li p{
  color:#9a2e1f;
  font-size: 23px;
}

.xtx-new-goods .goods-list li span{
  font-size: 17px;
}

底部模块

在这里插入图片描述

<!-- 底部模块 -->
  <footer>
    <!-- 宣传服务 -->
    <div class="xtx-service">
      <div class="container">
        <a href="#">价格亲民</a>
        <a href="#">物流快捷</a>
        <a href="#">品质新鲜</a>
      </div>
    </div>
    <!-- 版权信息 -->
    <div class="xtx-copyright">
      <div class="container">
        <p>
          <a href="#">关于我们</a> |
          <a href="#">帮助中心</a> |
          <a href="#">售后服务</a> |
          <a href="#">配送与验收</a> |
          <a href="#">商务合作</a> |
          <a href="#">搜索推荐</a> |
          <a href="#">友情链接</a>
        </p>
        <p>CopyRight @ 小兔鲜儿</p>
      </div>
    </div>
  </footer>

* 版权信息模块xtx-copyright */
.xtx-copyright {
  height: 168px;
  background-color: #333;
}

.xtx-copyright .container {
  height: 168px;
  padding-top: 41px;
  box-sizing: border-box;
  /* background-color: pink; */
  text-align: center;
  font-size: 14px;
  color:#999;
}

.xtx-copyright .container a{
  color:#999;
}

.xtx-copyright .container p:first-child {
  height: 35px;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/382210.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

前端JavaScript篇之对象继承的方式有哪些？

前端JavaScript篇之对象继承的方式有哪些？

目录 对象继承的方式有哪些&#xff1f;1. 原型链继承2. 借用构造函数3. 组合继承4. 原型式继承5. 寄生式组合继承 对象继承的方式有哪些&#xff1f; 1. 原型链继承 当使用原型链继承时&#xff0c;子类型的原型对象被设置为父类型的一个实例。这意味着子类型通过其原型可以…
阅读更多...
Python爬虫——请求库安装

Python爬虫——请求库安装

目录 1.打开Anaconda Prompt 创建环境2.安装resuests3.验证是否安装成功4.安装Selenium5.安装ChromeDriver5.1获取chrom的版本5.1.1点击浏览器右上三个点5.1.2点击设置5.1.3下拉菜单&#xff0c;点击最后关于Chrome&#xff0c;获得其版本 5.2 打开网址 [chromedriver](https:/…
阅读更多...
ADMap：Anti-disturbance framework for reconstructing online vectorized HD map

ADMap：Anti-disturbance framework for reconstructing online vectorized HD map

参考代码&#xff1a;ADMap 动机与出发点 局部地图构建算法在实际中会遇到部分车道线偏离的或是错误的情况&#xff0c;这往往是全局信息获取上存在欠缺&#xff0c;毕竟地图元素的回归很依赖于全局信息的获取。那么从特征提取、attention layer设计和loss构建上可以做一些工作…
阅读更多...
qt-C++笔记之判断一个QLabel上有没有load图片

qt-C++笔记之判断一个QLabel上有没有load图片

qt-C笔记之判断一个QLabel上有没有load图片 code review! 在Qt框架中&#xff0c;QLabel是用来显示文本或者图片的一个控件。如果你想判断一个QLabel控件上是否加载了图片&#xff0c;你可以检查它的pixmap属性。pixmap属性会返回一个QPixmap对象&#xff0c;如果没有图片被加…
阅读更多...
基于springboot广场舞团管理系统源码和论文

基于springboot广场舞团管理系统源码和论文

随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&#xf…
阅读更多...
Linux中常用的工具

Linux中常用的工具

软件安装 yum 软件包 在Linux中&#xff0c;软件包是一种预编译的程序集合&#xff0c;通常包含了用户需要的应用程序、库、文档和其他依赖项。 软件包管理工具是用于安装、更新和删除这些软件包的软件。常见的Linux软件包管理工具包括APT&#xff08;Advanced Packaging To…
阅读更多...
吉他学习：C大调第一把位音阶，四四拍曲目练习 小星星，练习的目的

吉他学习：C大调第一把位音阶，四四拍曲目练习 小星星，练习的目的

第十三课 C大调第一把位音阶https://m.lizhiweike.com/lecture2/29364198 第十四课 四四拍曲目练习 小星星https://m.lizhiweike.com/lecture2/29364131 C大调第一把位音阶非常重要，可以多练习&#x
阅读更多...
耳机壳UV树脂制作耳机壳的工艺流程是什么？

耳机壳UV树脂制作耳机壳的工艺流程是什么？

使用耳机壳UV树脂制作耳机壳的工艺流程如下&#xff1a; 获取耳模&#xff1a;首先&#xff0c;需要获取用户的耳模。这通常是通过使用一种柔软的材料注入到用户的耳朵中&#xff0c;然后取出并用来制作耳机的内芯。选择UV树脂&#xff1a;接下来&#xff0c;需要选择合适的UV…
阅读更多...
二十、K8S-1-权限管理RBAC详解

二十、K8S-1-权限管理RBAC详解

目录 k8s RBAC 权限管理详解 一、简介 二、用户分类 1、普通用户 2、ServiceAccount 三、k8s角色&角色绑定 1、授权介绍&#xff1a; 1.1 定义角色&#xff1a; 1.2 绑定角色&#xff1a; 1.3主体&#xff08;subject&#xff09; 2、角色&#xff08;Role和Cluster…
阅读更多...
【MySQL】MySQL表的增删改查（进阶）

【MySQL】MySQL表的增删改查（进阶）

MySQL表的增删改查&#xff08;进阶&#xff09; 1. 数据库约束1.1 约束类型1.2 NULL约束1.3 UNIQUE:唯一约束1.4 DEFAULT&#xff1a;默认值约束1.5 PRIMARY KEY&#xff1a;主键约束1.6 FOREIGN KEY&#xff1a;外键约束:1.7 CHECK约束&#xff08;了解&#xff09; 2. 表的设…
阅读更多...
emmet语法

emmet语法

一.html $排序 直接.dem或#two是默认div 内容可写{}里 二.css 直接写首字母 三.格式化 一次&#xff08;右键格式化&#xff09; 永久
阅读更多...
最佳视频转换器软件：2024年视频格式转换的选择

最佳视频转换器软件：2024年视频格式转换的选择

我们生活在一个充满数字视频的世界&#xff0c;但提供的内容远不止您最喜欢的流媒体服务目录。虽然我们深受喜爱的设备在播放各种自制和下载的视频文件方面变得越来越好&#xff0c;但在很多情况下您都需要从一种格式转换为另一种格式。 经过大量测试&#xff0c; 我们尝试过…
阅读更多...
《动手学深度学习(PyTorch版)》笔记8.4

《动手学深度学习(PyTorch版)》笔记8.4

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过&…
阅读更多...
JSP页面模型

JSP页面模型

1. JSP页面模型 JSP页面模型描述如何为所提供的协议通过请求对象创建响应对象。JSP容器将Web客户端发送的请求下发给JSP页面实现对象，并向Web客户端返回响应。JSP页面实现对象时一个servlet，运行时表示JSP页面，由JSP容器执行。 在JSP页面作者和JSP容器之间定义合同的方法 …
阅读更多...
Android:Cordova,JavaScript操作设备功能

Android:Cordova,JavaScript操作设备功能

Cordova学习 Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。 Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。 Cordova是PhoneGap贡献给Apache后的开源项目，是从…
阅读更多...
OpenCV-35 查找轮廓

OpenCV-35 查找轮廓

一、 什么是图像轮廓 图像轮廓是具有相同颜色或灰度的连续点的曲线&#xff0c;轮廓在形状分析和物体的检测识别中很有用。 用于图形分析物体的识别和检测 注意点&#xff1a; 为了检测的准确性&#xff0c;需要先对图像进行二值化或Canny操作。画轮廓时会修改输入的图像&a…
阅读更多...
C++ dfs 的状态表示（五十一）【第十一篇】

C++ dfs 的状态表示（五十一）【第十一篇】

今天我们接着学习dfs&#xff08;状态表示&#xff09;。 1.抽象形式的dfs 前面用到的 DFS 算法都是比较容易想象出搜索过程的&#xff0c;接下来我们看一些不那么容易想象搜索过程的 DFS 过程&#xff0c;这些问题我们称为抽象形式的 DFS。 来回顾一下上节课遇到的一个问题&a…
阅读更多...
Kubernetes实战(二十六)-K8S 部署Dashboard UI

Kubernetes实战(二十六)-K8S 部署Dashboard UI

Kubernetes Dashboard是Kubernetes集群的通用、基于Web的UI。它允许用户管理集群中运行的应用程序并对其进行故障排除&#xff0c;以及管理集群本身。 访问到DashBoard有两种方式&#xff1a; 通过KubernetesAPI访问&#xff1a;Dashboard是Kubernetes的内置的UI插件&#xff…
阅读更多...
JavaEE作业-实验二

JavaEE作业-实验二

目录 1 实验内容 2 实验要求 3 思路 4 核心代码 5 实验结果 1 实验内容 实现两个整数求和的WEB程序 2 实验要求 ①采用SpringMVC框架实现 ②数据传送到WEB界面采用JSON方式 3 思路 ①创建一个SpringMVC项目&#xff0c;配置好相关的依赖和配置文件。 ②创建一个Con…
阅读更多...
Python __pycache__文件

Python __pycache__文件

pycharm配置位置 几个基本概念 源代码&#xff08;source code&#xff09; 我们每天编写的Python、Java、C等代码通常指的就是源代码&#xff0c;源代码的特点是人类可读。但是CPU只能读懂二进制&#xff0c;看不懂我们写的源代码&#xff0c;因此还需要进行编译&#xff08…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站