电商网站基础布局——以小兔鲜为例

news2024/11/18 4:25:00

项目准备

/* base.css */
/* 內减模式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */

li {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

/* 左浮动 */
.fl {
  float: left;
}

/* 右浮动 */
.fr {
  float: right;
}

/* 清除浮动 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

快捷导航

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

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <meta
    name="description"
    content="页面具体描述信息"
  >
  <meta
    name="keywords"
    content="关键字"
  >
  <title>Document</title>
  <link
    rel="shortcut icon"
    href="favicon.ico"
    type="image/x-icon"
  >
  <link
    rel="stylesheet"
    href="./css/base.css"
  >
  <link
    rel="stylesheet"
    href="./css/common.css"
  >
  <link
    rel="stylesheet"
    href="./css/index.css"
  >
</head>

<body>
  <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
      <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="#"><span></span>请先登录</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

/* common.css */
/* 快捷导航 */
.wrapper {
  width: 1240px;
  margin: 0 auto;
}

.shortcut {
  height: 52px;
  background-color: #333;
}

.shortcut .wrapper {
  height: 52px;
}

.shortcut .wrapper ul {
  float: right;
}

.shortcut .wrapper li {
  float: left;
  line-height: 52px;
}

.shortcut .wrapper a {
  padding: 0 16px;
  border-right: 1px solid #666;
  font-size: 14px;
  color: #dcdcdc;
}

.shortcut .wrapper a span {
  /* span 为行内 不能设置宽高 */
  display: inline-block;
  width: 11px;
  height: 16px;
  /* 精灵图设置 URL position */
  background-image: url(../images/sprites.png);
  background-position: -160px -70px;
  /* 图片和文字居中对齐 */
  vertical-align: middle;
  margin-right: 8px;
}

.shortcut .wrapper li:last-child a {
  border: 0;
}

在这里插入图片描述

头部

  <!-- 头部 -->
  <div class="header wrapper">
    <div class="logo">
      <h1><a href="#">小兔鲜儿</a></h1>
    </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>
        <li><a href="#">孕婴</a></li>
        <li><a href="#">服装</a></li>
      </ul>
    </div>
    <div class="search">
      <input
        type="text"
        placeholder="搜一搜"
      >
      <span></span>
    </div>
    <div class="car">
      <span>2</span>
    </div>
  </div>

/* 头部 */
.header {
  margin: 30px auto;
  height: 70px;
}

.logo {
  float: left;
  width: 207px;
  height: 70px;
}

.logo h1 {
  width: 207px;
  height: 70px;
}

.logo h1 a {
  display: block;
  width: 207px;
  height: 70px;
  background-image: url(../images/logo.png);
  background-size: contain;
  font-size: 0;
}

.nav {
  float: left;
  margin-left: 40px;
  height: 70px;
}

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

.nav ul li a {
  padding-bottom: 7px;
}

.nav ul li a:hover {
  color: #27ba9b;
  border-bottom: 3px solid #27ba9b;
}

.search {
  position: relative;
  float: left;
  margin-top: 24px;
  margin-left: 34px;
  width: 172px;
  height: 30px;
  border-bottom: 2px solid #f2f2f2;
}

.search input {
  padding-left: 30px;
  width: 172px;
  height: 28px;
}

.search input::placeholder {
  font-size: 14px;
  color: #dcdcdc;
}

.search span {
  position: absolute;
  left: 2px;
  top: 0;
  width: 18px;
  height: 18px;
  display: inline-block;
  background-image: url(../images/sprites.png);
  background-position: -79px -69px;
}

.car {
  position: relative;
  float: left;
  margin-left: 15px;
  margin-top: 28px;
  width: 23px;
  height: 23px;
  background-image: url(../images/sprites.png);
  background-position: -119px -69px;
}

.car span {
  /* 子绝父相的子元素 本身就具备行内块元素的特点 */
  position: absolute;
  right: -13px;
  top: -6px;
  width: 20px;
  height: 15px;
  background-color: #e26237;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  font-size: 13px;
  line-height: 15px;
}

在这里插入图片描述

版权区域（底部）

  <!-- 版权区域 -->
  <div class="footer">
    <div class="wrapper">
      <div class="top">
        <ul>
          <li>
            <span>价格亲民</span>
          </li>
          <li>
            <span>物流快捷</span>
          </li>
          <li>
            <span>品质新鲜</span>
          </li>
        </ul>
      </div>
      <div class="bottom">
        <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>
  </div>

/* 版权区域 */
.footer {
  height: 343px;
  background-color: #333;
}

.footer .wrapper {
  width: 1393px;
}

.footer .top {
  padding-top: 59px;
  padding-left: 135px;
  height: 173px;
  border-bottom: 3px solid #434343;
}

.footer .top li {
  position: relative;
  float: left;
  margin-right: 300px;
  width: 195px;
  height: 58px;
}

.footer .top li:last-child {
  margin-right: 0;
}

.footer .top li::before {
  /* 如果含行内块和行内文字无法通过vertical-align或行高对齐，可采用定位来实现 */
  position: absolute;
  left: 0;
  top: -5px;
  content: '';
  width: 58px;
  height: 58px;
  background-image: url(../images/sprites.png);
  /* vertical-align: middle; */
}

.footer .top li span {
  margin-left: 77px;
  font-size: 28px;
  color: #fff3;
}

.footer .top li:nth-child(2)::before {
  background-position: -130px 0;
}

.footer .top li:nth-child(3)::before {
  background-position: -64px 0;
}

.footer .bottom {
  padding-top: 40px;
  font-size: 14px;
  color: #999;
  text-align: center;
}

.footer .bottom a {
  font-size: 14px;
  color: #999;
}

.footer .bottom p {
  margin-bottom: 20px;
}

在这里插入图片描述

banner 侧导航 轮播图

  <!-- banner 侧导航 轮播图区域 -->
  <div class="banner">
    <div class="wrapper">
      <ul>
        <li><a href="#"><img
              src="./uploads/banner_1.png"
              alt=""
            ></a></li>
      </ul>
      <!-- 侧导航 -->
      <div class="aside">
        <ul>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
        </ul>
      </div>
      <!-- 轮播图中的箭头 -->
      <a
        href="#"
        class="next"
      ></a>
      <a
        href="#"
        class="prev"
      ></a>
      <!-- 轮播图中的圆点 -->
      <ol>
        <li></li>
        <li></li>
        <li class="current"></li>
        <li></li>
      </ol>
    </div>
  </div>

/* index.css */
/* banner */
.banner {
  height: 500px;
  background-color: #f5f5f5;
}

.banner .wrapper {
  position: relative;
  height: 500px;
  background-color: pink;
}

/* banner 侧导航 */
.banner .aside {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 500px;
  background: rgba(0, 0, 0.1);
}

.banner .aside li {
  height: 50px;
  line-height: 50px;
}

.banner .aside a {
  position: relative;
  padding-left: 36px;
  padding-right: 19px;
  display: block;
  height: 50px;
  color: #fff;
}

.banner .aside a span {
  margin-left: 15px;
  font-size: 14px;
}

.banner .aside a:hover {
  background-color: #27ba9b;
}

.banner .aside a::after {
  position: absolute;
  right: 19px;
  top: 19px;
  content: "";
  width: 6px;
  height: 11px;
  background-image: url(../images/sprites.png);
  background-position: -80px -110px;
}

/* 轮播图中的箭头 */
.next,
.prev {
  position: absolute;
  top: 228px;
  width: 45px;
  height: 45px;
  background-color: rgba(0, 0, 0, .2);
  background-image: url(../images/sprites.png);
  border-radius: 50%;
}

.prev {
  left: 260px;
  background-position: 14px -60px;
}

.next {
  right: 10px;
  background-position: -20px -60px;
}

/* 轮播图中的圆点 */
.banner ol {
  position: absolute;
  left: 680px;
  bottom: 30px;
  height: 10px;
}

.banner ol li {
  float: left;
  width: 10px;
  height: 10px;
  margin-right: 24px;
  background-color: rgba(255, 255, 255, .4);
  border-radius: 50%;
  cursor: pointer;
}

.banner .current {
  background-color: #fff;
}

在这里插入图片描述

主体-新鲜好物

  <!--  新鲜好物-->
  <div class="goods wrapper">
    <div class="hd">
      <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
      <a href="#">查看全部</a>
    </div>
    <div class="bd clearfix">
      <ul>
        <li>
          <a href="#">
            <img
              src="./uploads/new_goods_2.jpg"
              alt=""
            >
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="#">
            <img
              src="./uploads/new_goods_4.jpg"
              alt=""
            >
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="#">
            <img
              src="./uploads/new_goods_1.jpg"
              alt=""
            >
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
        <li>
          <a href="#">
            <img
              src="./uploads/new_goods_3.jpg"
              alt=""
            >
            <h3>睿米无线吸尘器F8</h3>
            <div>￥<span>899</span></div>
            <b>新品</b>
          </a>
        </li>
      </ul>
    </div>
  </div>

/* 新鲜好物 */
.goods .hd {
  height: 114px;
  line-height: 114px;
}

.goods .hd h2 {
  float: left;
  font-size: 29px;
  font-weight: 400;
  height: 114px;
}

.goods .hd h2 span {
  font-size: 16px;
  margin-left: 34px;
  color: #999;
}

.goods .hd a {
  float: right;
  color: #999;
}

.goods .hd a::after,
.shengxian .hd .more::after {
  content: "";
  display: inline-block;
  margin-left: 13px;
  background-image: url(../images/sprites.png);
  background-position: 0 -110px;
  width: 7px;
  height: 13px;
  vertical-align: middle;
}

.goods .bd li {
  position: relative;
  float: left;
  margin-right: 8px;
  width: 304px;
  height: 405px;
  background-color: #f0f9f4;
  text-align: center;
}

.goods .bd li:last-child {
  margin-right: 0;
}

.goods .bd li img {
  width: 304px;
}

.goods .bd li h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 400;
}

.goods .bd li div {
  color: #9a2e1f;
  font-size: 17px;
}

.goods .bd li div span {
  font-size: 23px;
}

.goods .bd li b {
  position: absolute;
  left: 17px;
  top: 18px;
  width: 29px;
  height: 51px;
  color: #27ba90;
  border-radius: 4px;
  border: 1px solid #27ba90;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

编码安全风险是什么，如何进行有效的防护

编码安全风险是什么，如何进行有效的防护

2011年6月28日晚20时左右&#xff0c;新浪微博突然爆发XSS&#xff0c;大批用户中招&#xff0c;被XSS攻击的用户点击恶意链接后并自动关注一位名为HELLOSAMY的用户&#xff0c;之后开始自动转发微博和私信好友来继续传播恶意地址。不少认证用户中招&#xff0c;也导致该XSS被更…
阅读更多...
【深蓝学院】移动机器人运动规划--第4章 动力学约束下的运动规划--笔记

【深蓝学院】移动机器人运动规划--第4章 动力学约束下的运动规划--笔记

0. Outline 1. Introduction 什么是kinodynamic&#xff1f; 运动学&#xff08;Kinematics&#xff09;和动力学&#xff08;Dynamics&#xff09;都是力学的分支&#xff0c;涉及物体的运动&#xff0c;但它们研究的焦点不同。 运动学专注于描述物体的运动&#xff0c;而…
阅读更多...
反应式编程

反应式编程

反应式编程 前言1 反应式编程概览2 初识 Reactor2.1 绘制反应式流图2.2 添加 Reactor 依赖 3.使用常见的反应式操作3.1 创建反应式类型3.2 组合反应式类型3.3 转换和过滤反应式流3.4 在反应式类型上执行逻辑操作 总结 前言 你有过订阅报纸或者杂志的经历吗?互联网的确从传统的…
阅读更多...
第66讲管理员登录功能实现

第66讲管理员登录功能实现

项目样式初始化 放assets目录下&#xff1b; border.css charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-botto…
阅读更多...
WWW 万维网

WWW 万维网

万维网概述 万维网 WWW (World Wide Web) 并非某种特殊的计算机网络。 万维网是一个大规模的、联机式的信息储藏所。 万维网用链接的方法能非常方便地从互联网上的一个站点访问另一个站点&#xff0c;从而主动地按需获取丰富的信息。 这种访问方式称为“链接”。 万维网是分…
阅读更多...
线上编程答疑解惑回顾，初学编程中文编程在线屏幕共享演示

线上编程答疑解惑回顾，初学编程中文编程在线屏幕共享演示

线上编程答疑解惑回顾&#xff0c;初学编程中文编程在线屏幕共享演示 一、学编程过程中有不懂的怎么办&#xff1f; 编程入门视频教程链接 https://edu.csdn.net/course/detail/39036 编程工具及实例源码文件下载可以点击最下方官网卡片——软件下载——常用工具下载——编…
阅读更多...
Python入门知识点分享——（二十）继承和方法重写

Python入门知识点分享——（二十）继承和方法重写

今天是大年三十&#xff0c;祝大家龙年大吉&#xff0c;当然无论何时何地&#xff0c;我们都不要忘记继续学习。今天介绍的是继承和方法重写这两种面向对象编程特点。继承机制指的是&#xff0c;一个类&#xff08;我们称其为子类或派生类&#xff09;可以使用另一个类&#xf…
阅读更多...
无心剑中译佚名《春回大地》

无心剑中译佚名《春回大地》

The Coming of Spring 春回大地 I am coming, little maiden, With the pleasant sunshine laden, With the honey for the bee, With the blossom for the tree. 我来啦&#xff0c;小姑娘 满载着欣悦的阳光 蜂儿有蜜酿 树儿有花绽放 Every little stream is bright, All …
阅读更多...
【Leetcode】LCP 30. 魔塔游戏

【Leetcode】LCP 30. 魔塔游戏

文章目录 题目思路代码结果 题目 题目链接 小扣当前位于魔塔游戏第一层&#xff0c;共有 N 个房间&#xff0c;编号为 0 ~ N-1。每个房间的补血道具/怪物对于血量影响记于数组 nums&#xff0c;其中正数表示道具补血数值&#xff0c;即血量增加对应数值&#xff1b;负数表示怪…
阅读更多...
Apache Zeppelin 整合 Spark 和 Hudi

Apache Zeppelin 整合 Spark 和 Hudi

一 环境信息 1.1 组件版本 组件版本Spark3.2.3Hudi0.14.0Zeppelin0.11.0-SNAPSHOT 1.2 环境准备 Zeppelin 整合 Spark 参考&#xff1a;Apache Zeppelin 一文打尽Hudi0.14.0编译参考&#xff1a;Hudi0.14.0 最新编译 二 整合 Spark 和 Hudi 2.1 配置 %spark.confSPARK_H…
阅读更多...
moduleID的使用

moduleID的使用

整个平台上有很多相同的功能&#xff0c;但是需要不同的内容。例如各个模块自己的首页上有滚动新闻、有友好链接等等。为了公用这些功能&#xff0c;平台引入了moduleID的解决方案。 在前端的配置文件中&#xff0c;配置了模块号&#xff1a; 前端页面请求滚动新闻时&#xff0…
阅读更多...
Sam Altman计划筹集5至7万亿美元；OPPO发布AI时代新功能

Sam Altman计划筹集5至7万亿美元；OPPO发布AI时代新功能

&#x1f989; AI新闻 &#x1f680; Sam Altman计划筹集5至7万亿美元&#xff0c;建立全球芯片帝国 摘要&#xff1a;Sam Altman宣布计划筹集5至7万亿美元来建立全球芯片帝国&#xff0c;以满足日益增长的AI基础设施需求。他已在全球寻求资金&#xff0c;包括中东土豪。此外…
阅读更多...
Flume拦截器使用-实现分表、解决零点漂移等

Flume拦截器使用-实现分表、解决零点漂移等

1.场景分析 使用flume做数据传输时&#xff0c;可能遇到将一个数据流中的多张表分别保存到各自位置的问题&#xff0c;同时由于采集时间和数据实际发生时间存在差异&#xff0c;因此需要根据数据实际发生时间进行分区保存。 鉴于此&#xff0c;需要设计flume拦截器配置conf文件…
阅读更多...
Java 内存区域介绍

Java 内存区域介绍

&#xff08;1&#xff09;程序计数器 程序计数器主要有两个作用&#xff1a; 字节码解释器通过改变程序计数器来依次读取指令&#xff0c;从而实现代码的流程控制&#xff0c;如&#xff1a;顺序执行、选择、循环、异常处理。 在多线程的情况下&#xff0c;程序计数器用于记录…
阅读更多...
【开源】JAVA+Vue.js实现计算机机房作业管理系统

【开源】JAVA+Vue.js实现计算机机房作业管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 登录注册模块2.2 课程管理模块2.3 课时管理模块2.4 学生作业模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 课程表3.2.2 课时表3.2.3 学生作业表 四、系统展示五、核心代码5.1 查询课程数据5.2 新增课时5.3 提交作…
阅读更多...
360 安全浏览器 - 页面布局 - 常用网址

360 安全浏览器 - 页面布局 - 常用网址

360 安全浏览器 - 页面布局 - 常用网址 自定义样式 let myStyle {https://www.baidu.com/: {color: #001483,backgroundColor: #FFF,icon: https://www.baidu.com/favicon.ico},https://blog.csdn.net/jx520: {backgroundColor: #fc5531,icon: https://g.csdnimg.cn/static/l…
阅读更多...
离线数仓（一）【数仓概念、需求架构】

离线数仓（一）【数仓概念、需求架构】

前言 今天开始学习数仓的内容&#xff0c;之前花费一年半的时间已经学完了 Hadoop、Hive、Zookeeper、Spark、HBase、Flume、Sqoop、Kafka、Flink 等基础组件。把学过的内容用到实践这是最重要的&#xff0c;相信会有很大的收获。 1、数据仓库概念 1.1、概念 数据仓库&#x…
阅读更多...
【Linux】指令提权-sudo

【Linux】指令提权-sudo

Hello everybody&#xff0c;新年快乐&#xff01;哈哈&#xff01;今天打算给大家讲讲指令提权的相关知识&#xff0c;虽然内容不多&#xff0c;但有时却很有用。在我们学习过权限&#xff0c;vim后就可以学习指令提权啦&#xff0c;没看过的宝子们建议先去看一看我之前的文章…
阅读更多...
〖大前端 - ES6篇②〗- let和const

〖大前端 - ES6篇②〗- let和const

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;哈哥撩编程&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xff0c;目前在公司…
阅读更多...
缓存穿透、缓存击穿与缓存雪崩

缓存穿透、缓存击穿与缓存雪崩

缓存穿透、缓存击穿与缓存雪崩 1.本质区别 缓存穿透指的是数据库不存在数据&#xff0c;导致无法缓存&#xff0c;每次查询都查数据库&#xff0c;数据库压垮 缓存击穿指的是缓存键值对key过期了&#xff0c;key过期期间&#xff0c;大量请求访问&#xff0c;不经过缓存&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023