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

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

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念

AI基础 L9 Local Search II 局部搜索

Local Beam search 对于当前的所有k个状态,生成它们的所有可能后继状态。 检查生成的后继状态中是否有任何状态是解决方案。 如果所有后继状态都不是解决方案,则从所有后继状态中选择k个最佳状态。 当达到预设的迭代次数或满足某个终止条件时,算法停止。 — Choose k successors randomly, biased towards good ones — Close

音视频入门基础:WAV专题(10)——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道,通过FFprobe命令可以打印WAV音频文件每个packet(也称为数据包或多媒体包)的信息,这些信息包含该packet的pts、dts: 打印出来的“pts”实际是AVPacket结构体中的成员变量pts,是以AVStream->time_base为单位的显

速盾高防cdn是怎么解决网站攻击的?

速盾高防CDN是一种基于云计算技术的网络安全解决方案,可以有效地保护网站免受各种网络攻击的威胁。它通过在全球多个节点部署服务器,将网站内容缓存到这些服务器上,并通过智能路由技术将用户的请求引导到最近的服务器上,以提供更快的访问速度和更好的网络性能。 速盾高防CDN主要采用以下几种方式来解决网站攻击: 分布式拒绝服务攻击(DDoS)防护:DDoS攻击是一种常见的网络攻击手段,攻击者通过向目标网

C 语言基础之数组

文章目录 什么是数组数组变量的声明多维数组 什么是数组 数组,顾名思义,就是一组数。 假如班上有 30 个同学,让你编程统计每个人的分数,求最高分、最低分、平均分等。如果不知道数组,你只能这样写代码: int ZhangSan_score = 95;int LiSi_score = 90;......int LiuDong_score = 100;int Zhou

c++基础版

c++基础版 Windows环境搭建第一个C++程序c++程序运行原理注释常亮字面常亮符号常亮 变量数据类型整型实型常量类型确定char类型字符串布尔类型 控制台输入随机数产生枚举定义数组数组便利 指针基础野指针空指针指针运算动态内存分配 结构体结构体默认值结构体数组结构体指针结构体指针数组函数无返回值函数和void类型地址传递函数传递数组 引用函数引用传参返回指针的正确写法函数返回数组

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数,argv是

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局,其中 label 控件位于 image 控件下方,你可以使用 lv_obj_set_flex_flow 来设置布局为垂直,并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例: 创建父容器:首先创建一个容器对象,该对象将作为布局的基础。设置容器为垂直布局:使用 lv_obj_set_flex_flow 设置容器