Web前端—CSEO、Favicon、小兔鲜儿电商网站顶部设计

news2024/11/23 15:27:01

版本说明

当前版本号[20231108]。

版本修改说明
20231108初版

目录

文章目录

  • 版本说明
  • 目录
  • 电商平台网站顶部设计
    • 项目目录
    • 准备工作
    • SEO 三大标签
    • Favicon 图标
    • 布局网页
      • 版心
      • 快捷导航（shortcut）
      • 头部（header）
        • logo
        • 导航
        • 搜索
        • 购物车

电商平台网站顶部设计

所插入的图片及文字图标如下分布：

image-20231108085458882

项目目录

  • xtx-pc
  1. images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等等
  2. uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片
  3. iconfont 文件夹：字体图标素材
  4. css 文件夹：存放 CSS 文件（link 标签引入）
    • base.css：基础公共样式
    • commoner.css：各个网页相同模块的重复样式，例如：头部、底部
    • index.css：首页 CSS 样式
  6. index.html：首页 HTML 文件

image-20231108085707336

准备工作

引用所有我们需要的css进来。

<head>
		<meta charset="utf-8">
		<title>小兔鲜儿电商平台</title>
		<link rel="stylesheet" href="./css/base.css">
		<link rel="stylesheet" href="./css/commoner.css">
		<link rel="stylesheet" href="./css/index.css">
	</head>

SEO 三大标签

SEO：搜索引擎优化，提升网站百度搜索排名

提升SEO的常见方法：

  1. 竞价排名

  2. 将网页制作成html后缀

  3. 标签语义化（在合适的地方使用合适的标签）

  4. ……

    网页头部 SEO 标签：

    • title：网页标题标签

    • description：网页描述

    • keywords：网页关键词

示例SEO标签：

		<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
		<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
		<title>小兔鲜儿-新鲜、惠民、快捷！</title>

Favicon 图标

Favicon 图标：网页图标，出现在浏览器标题栏，增加网站辨识度。

图标：favicon.ico，一般存放到网站的根目录里面

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

image-20231108091237946

布局网页

版心

wrapper

版心宽度：1240px

/* 版心 */
.wrapper{
	margin: 0 auto;
	width: 1240px;
}

可见我们的版心配置正确：

image-20231108105444116

快捷导航（shortcut）

image-20231108114204690

结构：通栏 > 版心 > 导航 ul

布局：flex-end

1、我们需要的快捷导航的区域是集中在粉红色的部分右边。此时需要通过justify-content: flex-end;来实现的。

<body>
		<div class="shortcut">
			<div class="wrapper">1</div>
		</div>
	</body>

/* 快捷导航 */
.shortcut{
	height: 52px;
	background-color: #333;
}

.shortcut .wrapper{
	display: flex;
	justify-content: flex-end;
	height: 52px;
	background-color: pink;
}

image-20231108110248221

2、插入导航栏的文字，并放置于一行里，设置好内边距。

<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="#">请先登录</a></li>
				</ul>
			</div>
		</div>

.shortcut ul{
	display: flex;
	line-height: 52px;
}

.shortcut li a{
	padding: 0 15px;
}

image-20231108111000022

3、再加上右边距。

image-20231108111403520

4、把最右边的边去掉。

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

image-20231108111730242

5、进一步修改，把字体大小及样式改变了。

.shortcut li a{
	padding: 0 15px;
	border-right: 1px solid #999;
	font-size: 14px;
	color: #fff;
}

image-20231108111927418

6、加上手机的字体图标。

<li><a href="#"><span class="iconfont icon-mobile-phone"></span>请先登录</a></li>

image-20231108112300962

7、图标与旁边的文字增加边距和进行对齐。

.shortcut li .iconfont{
	margin-right: 4px;
	vertical-align: middle;
}

image-20231108112606926

8、把粉色背景注销掉，并把首个标签颜色变为绿色。

.shortcut li .login{
	color: #5e865e;
}

image-20231108112947810

头部（header）

image-20231108114143092

结构：.header > logo + 导航（nav）+ 搜索（search） + 购物车（car）

1、同时也需要对齐版心，在居中的位置。

<!-- 头部 -->
		<div class="header wrapper">1</div>

/* 头部 */
.header{
	height: 88px;
	background-color: pink;
}

image-20231108114744120

2、使用外边距，给上下都加上距离。

/* 头部 */
.header{
	margin-top: 22px;
	margin-bottom: 22px;
	height: 88px;
	background-color: pink;
}

image-20231108114931016

3、把头部分几个位置。

<!-- 头部 -->
		<div class="header wrapper">
			<!-- logo -->
			<div class="logo">logo</div>
			<!-- 导航 -->
			<div class="nav">导航</div>
			<!-- 搜索 -->
			<div class="search">搜索</div>
			<!-- 购物车 -->
			<div class="cart">购物车</div>
		</div>

/* 头部 */
.header{
	display: flex;
	margin-top: 22px;
	margin-bottom: 22px;
	height: 88px;
	background-color: pink;
}

image-20231108115228435

logo

1、为提升搜索排名，可以使用标签语义化：

<!-- logo -->
			<div class="logo">
				<h1><a href="#">小兔鲜儿</a></h1>
			</div>

/* logo */
.logo{
	margin-right: 40px;
	width: 200px;
	height: 88px;
	background-color: skyblue;
}

image-20231108120210849

2、加上logo背景图，

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

image-20231108120811398

导航

1、首先把导航的文字弄出来。

<!-- 导航 -->
			<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>

/* 导航 */
.nav ul{
	display: flex;
}

image-20231108122031509

2、把两端距离拉开。

/* 导航 */
.nav{
	margin-top: 33px;
	margin-right: 28px;	
}

image-20231108122156462

3、加上右边距。

.nav li{
	margin-right: 47px;
}

image-20231108122257553

4、加上鼠标浮在上面的前后背景色。

.nav li a{
	padding-bottom: 10px;
	background-color: skyblue;
}

.nav li a:hover{
	border-bottom: 2px solid #5eb69c;
	color: #5eb69c;
}

image-20231108123222885

5、再把背景颜色注销即可。

.nav li a{
	padding-bottom: 10px;
	/* background-color: skyblue; */
}

image-20231108123400876

搜索

1、画出下划线，做出搜索栏。

/* 搜索 */
.search{
	margin-top: 30px;
	margin-right: 45px;
	width: 170px;
	height: 34px;
	border-bottom: 2px solid #f4f4f4;
}

image-20231108185237496

2、插入字体图标。

<!-- 搜索 -->
			<div class="search">
				<span class="iconfont icon-search"></span>
				<input type="text" placeholder="搜一搜">
			</div>

/* 搜索 */
.search{
	display: flex;
	margin-top: 30px;
	margin-right: 45px;
	width: 170px;
	height: 34px;
	border-bottom: 2px solid #f4f4f4;
}

.search .iconfont{
	margin-right: 8px;
	font-size: 18px;
	color: #ccc;
}

/* 浏览器优先生效 input 标签的默认宽度
	所以flex : 1 不生效
	只要重置 input 默认宽度即可
	使用：width : 0*/
.search input{
	flex: 1;
	width: 0;
}

image-20231108190542544

3、改变字体大小和颜色。

.search input::placeholder{
	font-size: 16px;
	color: #ccc;
}

image-20231108190810988

4、把背景颜色注销掉。

image-20231108191009830

购物车

1、发现没有对齐，在太过于上的位置。

<!-- 购物车 -->
			<div class="cart">
				<span class="iconfont icon-cart-full"></span>
				<i>1</i>
			</div>

image-20231108191550218

2、改变字体图标的大小。

.cart .iconfont{
	font-size: 24px;
}

image-20231108191822879

3、子绝父相（对齐方式）

/* 购物车 */
.cart{
	position: relative;
	margin-top: 32px;
}

.cart .iconfont{
	font-size: 24px;
}

.cart i{
	position: absolute;
	top: 1px;
	right: 1px;
	padding: 0 6px;
	height: 15px;
	background-color: #e26237;
}

image-20231108192823064

4、修改好样式与字体大小。

border-radius: 8px;
	font-size: 14px;
	color: #fffefe;
	line-height: 15px;

image-20231108193200229

5、但我们发现，选择right，数字一多就会往左走。

image-20231108193621613

6、而如果选择left，向右走。

image-20231108193546203

7、用两张图来更清晰地看出两者的区别：

image-20231108193723324

image-20231108193811415

8、最后修改完成。

.cart i{
	position: absolute;
	top: 1px;
	/* right 定位右对齐，如果文字多
	 会向左撑开，可能盖住其他内容
	 left 定位左对齐 ，文字多了
	 会向右边撑开*/
	/* right: 1px; */
	left: 11px;
	padding: 0 6px;
	height: 15px;
	background-color: #e26237;
	border-radius: 8px;
	font-size: 14px;
	color: #fffefe;
	line-height: 15px;
}

image-20231108193845797

至此为止，我们的网站顶部已经编写完毕。

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

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

相关文章

【C语言基础】第02章_变量与进制

【C语言基础】第02章_变量与进制

讲师&#xff1a;康师傅 视频&#xff1a;https://www.bilibili.com/video/BV1Bh4y1q7Nt?p1&vd_source3eaa9d17f2454e1ae80abc50d16e66b5 文章目录 本章专题脉络1关键字(keyword)2标识符(Identifier)3变量(variable)3.1 为什么需要变量3.2 初识变量3.3 变量的声明与赋值步…
阅读更多...
从TCP到Socket，彻底理解网络编程是怎么回事

从TCP到Socket，彻底理解网络编程是怎么回事

进行程序开发的同学&#xff0c;无论Web前端开发、Web后端开发&#xff0c;还是搜索引擎和大数据&#xff0c;几乎所有的开发领域都会涉及到网络编程。比如我们进行Web服务端开发&#xff0c;除了Web协议本身依赖网络外&#xff0c;通常还需要连接数据库&#xff0c;而数据库连…
阅读更多...
网络原理---拿捏数据链路层：以太网

网络原理---拿捏数据链路层：以太网

文章目录 目的地址、源地址类型CRC帧尾&#xff1a;校验和 学习协议很大程度上就是学习协议的报文格式&#xff0c;下面就来介绍以太网的报文格式&#xff1a; 目的地址、源地址 这个地址是mac地址&#xff0c;是用6个字节表示的地址。它也是用来标识主机位置的&#xff0c;但…
阅读更多...
【ES专题】Logstash与FileBeat详解以及ELK整合详解

【ES专题】Logstash与FileBeat详解以及ELK整合详解

目录 前言阅读对象阅读导航前置知识笔记正文一、ELK架构1.1 经典的ELK1.2 整合消息队列Nginx架构 二、LogStash介绍2.1 Logstash核心概念2.1.1 Pipeline2.1.2 Event2.1.3 Codec (Code / Decode)2.1.4 Queue 2.2 Logstash数据传输原理2.3 Logstash的安装&#xff08;以windows为…
阅读更多...
【解决问题】---- 解决 avue-crud 表格勾选数据翻页后界面保持选中

【解决问题】---- 解决 avue-crud 表格勾选数据翻页后界面保持选中

1. 错误预览 第一页选择【7、8、9、10】 直接点击第三页未进行选择 直接点击第四页未进行选择 2. 问题总结 通过测试可以看到&#xff0c;页面的选择项会影响到其他页面的选择&#xff1b;点击保存&#xff0c;返回的数据却是真真选择的数据&#xff1b;数据在选择渲染…
阅读更多...
Leetcode—515.在每个树行中找最大值【中等】

Leetcode—515.在每个树行中找最大值【中等】

2023每日刷题&#xff08;二十三&#xff09; Leetcode—515.在每个树行中找最大值 DFS实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ /*** Note: The returned arra…
阅读更多...
rhcsa-用户和组管理

rhcsa-用户和组管理

一.用户和组的分类 1、在Linux中用户可以分为三类 第一种是超级用户一一用户名为root&#xff0c;它具有一切权限&#xff0c;只有进行系统维护(例如:建立用户等)或其他必要情形下才用超级用户登录&#xff0c;以避免系统出现安全问题 第二种是系统用户(伪用户)一一是…
阅读更多...
2—C++程序设计：C++简单程序设计

2—C++程序设计：C++简单程序设计

2—C程序设计&#xff1a;C简单程序设计 1&#xff0c;无符号数的32bits系统的运算二级目录三级目录 1&#xff0c;无符号数的32bits系统的运算 32位系统&#xff0c; 1&#xff0c;有符号数的范围是&#xff1a;0~4, 294, 967, 295&#xff1b; 2&#xff0c;无符号数的范围是…
阅读更多...
Java中对象转型

Java中对象转型

理解&#xff1a; 有一个对象 new ADHero(), 同时也有一个引用ad 对象是有类型的&#xff0c; 是ADHero 引用也是有类型的&#xff0c;是ADHero 一般来说引用类型和对象类型是一样的&#xff0c;当引用类型和对象类型不一致就要考虑类型转换 简单判断&#xff1a;把右边的当…
阅读更多...
osg 八叉树可视化

osg 八叉树可视化

目录 什么是八叉树 八叉树算法过程 八叉树的计算原理 八叉树c实现 使用osg可视化八叉树 什么是八叉树 在描述三维场景的过程中常常用到一种名为八叉树的数据结构。描述三维空间的八叉树和描述二维空间的四叉树有相似之处&#xff0c;二维空间中正方形可以被分为四个相同形…
阅读更多...
3.29每日一题（微分方程的几何应用题：重点考察）

3.29每日一题（微分方程的几何应用题：重点考察）

1、画图&#xff0c;把题目中的条件标出来 2、通过题目中的条件设出正确的微分方程&#xff08;解题的关键&#xff09; 注&#xff1a;用点斜式设方程的时候&#xff0c;注意Y - y y&#xff08;X - x&#xff09;中&#xff08;x&#xff0c;y&#xff09;为曲边上的动点&a…
阅读更多...
srs webrtc推拉流环境搭建

srs webrtc推拉流环境搭建

官方代码https://github.com/ossrs/srs 拉取代码&#xff1a; git clone https://github.com/ossrs/srs.gitcd ./configure make ./objs/srs -c conf/rtc.confconf/rtc.conf中&#xff0c;当推拉流浏览器在本地时&#xff0c;如果srs也在本地&#xff0c;那么可以使用官网默认…
阅读更多...
C++ STL - map 与 multimap用法和区别

C++ STL - map 与 multimap用法和区别

目录 一、概述 二、用法 2.1、插入 2.2、拷贝与赋值 2.3、查找 2.4、删除 2.5、完整代码 三、其他成员类型 一、概述 map 与 multimap是存储key-value&#xff08;键-值 对&#xff09;类型的容器。不同之处在于&#xff1a;map只允许key与 value一一对应&#xff1b;…
阅读更多...
在医疗影像领域，生成式模型可以做些什么？用什么平台快速实现？使用MONAI框架进行生成式模型开发

在医疗影像领域，生成式模型可以做些什么？用什么平台快速实现？使用MONAI框架进行生成式模型开发

生成模型具有巨大的潜力&#xff0c;不仅有助于通过合成数据集安全地共享医疗数据&#xff0c;还可以执行一系列逆向应用&#xff0c;如异常检测、图像到图像翻译、去噪和MRI重建。然而&#xff0c;由于这些模型的复杂性&#xff0c;它们的实现和再现性可能很困难。 对于我这种…
阅读更多...
图像分割项目中损失函数的选择

图像分割项目中损失函数的选择

文章目录 前言场景&#xff1a;实际项目中&#xff0c;通常会有一个常见的问题&#xff1a;样本不均衡一、focal loss思考 二、Dice loss三、二分类未完待续 前言 在图像分割领域&#xff0c;最基础、最常见的损失当然是交叉熵损失 —— Cross entropy。随着不断的研究&#x…
阅读更多...
一个java文件的JVM之旅

一个java文件的JVM之旅

准备 我是小C同学编写得一个java文件&#xff0c;如何实现我的功能呢&#xff1f;需要去JVM(Java Virtual Machine)这个地方旅行。 变身 我高高兴兴的来到JVM&#xff0c;想要开始JVM之旅&#xff0c;它确说&#xff1a;“现在的我还不能进去&#xff0c;需要做一次转换&#x…
阅读更多...
OceanBase 如何通过日志观测冻结转储流程？

OceanBase 如何通过日志观测冻结转储流程？

本文旨在通过日志解析 OceanBase 的冻结转储流程&#xff0c;以其冻结检查线程为切入点&#xff0c;以租户&#xff08;1002&#xff09;的线程名为例。 作者&#xff1a;陈慧明&#xff0c;爱可生测试工程师&#xff0c;主要参与 DMP 和 DBLE 自动化测试项目。 爱可生开源社区…
阅读更多...
2258. 逃离火灾 : 详解如何从「二分」到「分类讨论」(图解过程)

2258. 逃离火灾 : 详解如何从「二分」到「分类讨论」(图解过程)

题目描述 这是 LeetCode 上的 「2258. 逃离火灾」 &#xff0c;难度为 「困难」。 Tag : 「多源 BFS」、「二分」、「预处理」 给你一个下标从 0 开始大小为 m x n 的二维整数数组 grid&#xff0c;它表示一个网格图。 每个格子为下面 个值之一&#xff1a; 0 表示草地。 1 表…
阅读更多...
【狂神说Java】SpringSecurity+shiro

【狂神说Java】SpringSecurity+shiro

✅作者简介&#xff1a;CSDN内容合伙人、信息安全专业在校大学生&#x1f3c6; &#x1f525;系列专栏 &#xff1a;【狂神说Java】 &#x1f4c3;新人博主 &#xff1a;欢迎点赞收藏关注&#xff0c;会回访&#xff01; &#x1f4ac;舞台再大&#xff0c;你不上台&#xff0c…
阅读更多...
ShuffleNet系列 网络结构

ShuffleNet系列 网络结构

文章目录 ShuffleNet V1Channel Shuffle&#xff1a;通道打散SuffleNet UnitModel Architecture实验结果 ShuffleNet V2Guideline 1Guideline 2Guideline 3Guideline 4模型结构代码 论文&#xff1a;ShuffleNet: ShuffleNet: An Extremely Efficient Convolutional Neural Netw…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023