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

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。

相关文章

Android Mainline基础简介

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline？Android Mainline 的工作原理关键
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
mysql的基础语句和外键查询及其语句详解(推荐)

mysql的基础语句和外键查询及其语句详解(推荐)

《mysql的基础语句和外键查询及其语句详解(推荐)》：本文主要介绍mysql的基础语句和外键查询及其语句详解(推荐),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录一、mysql 基础语句1. 数据库操作 创建数据库2. 表操作 创建表3. CRUD 操作二、外键
阅读更多...
Python基础语法中defaultdict的使用小结

Python基础语法中defaultdict的使用小结

《Python基础语法中defaultdict的使用小结》Python的defaultdict是collections模块中提供的一种特殊的字典类型,它与普通的字典（dict）有着相似的功能,本文主要... 目录示例1示例2python的defaultdict是collections模块中提供的一种特殊的字
阅读更多...
Python基础文件操作方法超详细讲解(详解版)

Python基础文件操作方法超详细讲解(详解版)

《Python基础文件操作方法超详细讲解(详解版)》文件就是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位,文件的核心操作就是读和写,：本文主要介绍Python基础文件操作方法超详细讲解的相... 目录一、文件操作1. 文件打开与关闭1.1 打开文件1.2 关闭文件2. 访问模式及说明二、文件读写1.
阅读更多...
C#基础之委托详解(Delegate)

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》：本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托（Multicast Delegates）4. 委托的用途事件处理回调函数LINQ
阅读更多...
CSS3 最强二维布局系统之Grid 网格布局

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网
阅读更多...
0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型，3步搞定一个应
阅读更多...
nginx部署https网站的实现步骤(亲测)

nginx部署https网站的实现步骤(亲测)

《nginx部署https网站的实现步骤(亲测)》本文详细介绍了使用Nginx在保持与http服务兼容的情况下部署HTTPS,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值... 目录步骤 1：安装 Nginx步骤 2：获取 SSL 证书步骤 3：手动配置 Nginx步骤 4：测
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2