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

2024-02-11 01:36
文章标签 基础 网站 布局 电商 小兔 鲜为例

本文主要是介绍电商网站基础布局——以小兔鲜为例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

项目准备

/* 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"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="description"content="页面具体描述信息"><metaname="keywords"content="关键字"><title>Document</title><linkrel="shortcut icon"href="favicon.ico"type="image/x-icon"><linkrel="stylesheet"href="./css/base.css"><linkrel="stylesheet"href="./css/common.css"><linkrel="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"><inputtype="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="#"><imgsrc="./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><!-- 轮播图中的箭头 --><ahref="#"class="next"></a><ahref="#"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="#"><imgsrc="./uploads/new_goods_2.jpg"alt=""><h3>睿米无线吸尘器F8</h3><div>￥<span>899</span></div><b>新品</b></a></li><li><a href="#"><imgsrc="./uploads/new_goods_4.jpg"alt=""><h3>睿米无线吸尘器F8</h3><div>￥<span>899</span></div><b>新品</b></a></li><li><a href="#"><imgsrc="./uploads/new_goods_1.jpg"alt=""><h3>睿米无线吸尘器F8</h3><div>￥<span>899</span></div><b>新品</b></a></li><li><a href="#"><imgsrc="./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.chinasem.cn/article/698510。

相关文章

从基础到进阶详解Pandas时间数据处理指南

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据
阅读更多...
安装centos8设置基础软件仓库时出错的解决方案

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》：本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas
阅读更多...
Linux基础命令@grep、wc、管道符的使用详解

Linux基础命令@grep、wc、管道符的使用详解

《Linux基础命令@grep、wc、管道符的使用详解》：本文主要介绍Linux基础命令@grep、wc、管道符的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录grep概念语法作用演示一演示二演示三，带选项 -nwc概念语法作用wc，不带选项-c，统计字节数-
阅读更多...
如何关闭Mac的Safari通知? 3招教你关闭Safari浏览器网站通知的技巧

如何关闭Mac的Safari通知? 3招教你关闭Safari浏览器网站通知的技巧

《如何关闭Mac的Safari通知?3招教你关闭Safari浏览器网站通知的技巧》当我们在使用Mac电脑专注做一件事情的时候，总是会被一些消息推送通知所打扰，这时候，我们就希望关闭这些烦人的Mac通... Safari 浏览器的「通知」功能本意是为了方便用户及时获取最新资讯，但很容易被一些网站滥用，导致我们
阅读更多...
python操作redis基础

python操作redis基础

《python操作redis基础》Redis(RemoteDictionaryServer)是一个开源的、基于内存的键值对（Key-Value）存储系统,它通常用作数据库、缓存和消息代理,这篇文章... 目录1. Redis 简介2. 前提条件3. 安装 python Redis 客户端库4. 连接到 Re
阅读更多...
Web技术与Nginx网站环境部署教程

Web技术与Nginx网站环境部署教程

《Web技术与Nginx网站环境部署教程》：本文主要介绍Web技术与Nginx网站环境部署教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Web基础1.域名系统DNS2.Hosts文件3.DNS4.域名注册二.网页与html1.网页概述2.HTML概述3.
阅读更多...
SpringBoot基础框架详解

SpringBoot基础框架详解

《SpringBoot基础框架详解》SpringBoot开发目的是为了简化Spring应用的创建、运行、调试和部署等,使用SpringBoot可以不用或者只需要很少的Spring配置就可以让企业项目快... 目录SpringBoot基础 – 框架介绍1.SpringBoot介绍1.1 概述1.2 核心功能2
阅读更多...
CSS3 布局样式及其应用举例

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能，无论是Flexbox的一维布局还是Grid的二维布局，它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局，本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2
阅读更多...
Spring Boot集成SLF4j从基础到高级实践(最新推荐)

Spring Boot集成SLF4j从基础到高级实践(最新推荐)

《SpringBoot集成SLF4j从基础到高级实践(最新推荐)》SLF4j(SimpleLoggingFacadeforJava)是一个日志门面（Facade）,不是具体的日志实现,这篇文章主要介... 目录一、日志框架概述与SLF4j简介1.1 为什么需要日志框架1.2 主流日志框架对比1.3 SLF4
阅读更多...
Spring Boot集成Logback终极指南之从基础到高级配置实战指南

Spring Boot集成Logback终极指南之从基础到高级配置实战指南

《SpringBoot集成Logback终极指南之从基础到高级配置实战指南》Logback是一个可靠、通用且快速的Java日志框架,作为Log4j的继承者,由Log4j创始人设计,：本文主要介绍... 目录一、Logback简介与Spring Boot集成基础1.1 Logback是什么？1.2 Sprin
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2