项目一品优购

1. 品优购项目规划

1.1 网站制作流程

	![在这里插入图片描述](https://img-blog.csdnimg.cn/9022fbc2b77a4ee887e6f0d802ca0492.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd3lfNDM0MzE4NjM=,size_19,color_FFFFFF,t_70,g_se,x_16)

1.2 品优购项目整体介绍

	- 项目名称:品优购- 项目描述:品优购是一个电商网站,我们要完成PC端首页、列表页、注册页面的制作- 效果![在这里插入图片描述](https://img-blog.csdnimg.cn/effa239d67154eab9b9eead54e566c25.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd3lfNDM0MzE4NjM=,size_20,color_FFFFFF,t_70,g_se,x_16)![-](https://img-blog.csdnimg.cn/bf114bd2fb364413b8ef6074079f2d25.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd3lfNDM0MzE4NjM=,size_20,color_FFFFFF,t_70,g_se,x_16)

在这里插入图片描述

1.3 品优购项目的学习目的

- 电商类网站比较综合,里面需要大量的布局技术,包括布局方式、常见效果以及周边技术。
- 品优购项目能复习、总结、提高基础班所学布局技术
- 写完品优购项目,能对实际开发中制作PC端页面流程有一个整体的感知
- 为后期学习移动端项目做铺垫

1.4 开发工具以及技术栈

- 开发工具:VScode、 Photoshop(fw)、chrome浏览器、
- 技术栈:1、采用HTML5+CSS3手动布局,可以大量使用H5新增标签和样式2、采取结构与样式分离、模块化开发3、良好的代码规范

1.5 品优购项目搭建工作

  • 需要创建如下文件夹
    | 名称 | 说明 |
    |项目文件夹 |shopping|
    | 样式类图片文件夹 | images |
    | 样式文件夹 | css |
    | 产品类图片文件夹 | upload |
    | 字体类文件夹 | fonts|
    | 脚本文件夹 | js|

  • 模块化开发

有些样式和结构在很多页面都会出现,比如页面头部和底部,大部分页面都有。此时,可以把这些结构和样式单独作为一个模块,然后重复使用,把他们写进common.css,写好一个样式,其余页面用到这些相同的样式。
模块化开发具有重复使用,修改方便等优点。
common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。
在这里插入图片描述

1.6 网站favicon图标

favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上
目前主要的浏览器都支持favicon.ico图标

在这里插入图片描述

  • 1、制作favicon图标
    1、把品优购图标切成png图片
    2、把png图片转换为ico图标,这需要借助于第三方转换网站,例如比特虫:https://www.bitbug.net/

  • 2、favicon图标放到网站根目录下
    在这里插入图片描述

  • 3、HTML页面引入favicon图标

<link rel="shortcut icon" href="favicon.ico" />

在这里插入图片描述

1.7 网站TDK三大标签SEO优化

SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜搜引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO的目的是对网站就行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。
页面必须有三个标签来符合SEO优化
>

  • 1 title网站标题

title具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口对网页主题归属的最佳判断点。
建议:网站名(产品名)-网站的介绍(不超过30汉字)
例如:- 京东(JD.COM)- 综合网购首选-正品低价、品质保障、配送及时、轻松购物!

  • 2.description网站说明
    作为网站的总体业务和主题概括,多采用“我们是…"、“我们提供…”、“XXX网站作为…”、"电话:010…"之类语句。
<meta name="description"content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
  • 3.keywords关键字

keywords是页面关键字,是搜索引擎的关注点之一。最好限制6~8个关键词,关键词之间用英文逗号隔开,采用关键词1,关键词2的形式。

<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

2. 品优购首页制作

在这里插入图片描述

  • 2.1.常用模块类名命名
    在这里插入图片描述
  • 2.2. 快捷导航shortcut制作
    在这里插入图片描述
    在这里插入图片描述

首先定制版心的宽度,后面的很多盒子都要引用这个版心的宽度

.w {width: 1200px;margin: 0 auto;
}

制作大盒子,分成左右两个模块

<div class="shortcut"><div class="w"><div class="fl"></div><div class="fr"></div></div></div>
.w {width: 1200px;margin: 0 auto;
}
.fl {float: left;
}
.fr {float: right;
}
.shortcut {height: 31px;background-color: #f1f1f1;
}

快捷导航左侧搭建

在这里插入图片描述

  • 通栏的盒子命名为shortcut,是快捷导航的意思。注意这里的行高,可以继承给里面的子盒子
  • 里面包含版心的盒子
  • 版心盒子里面包含1号左侧盒子左浮动
  • 版心盒子里面包含2号右侧盒子右浮动
<div class="fl"><ul><li>品优购欢迎您!&nbsp;</li><li><a href="#">请登录</a> &nbsp;<a href="#" class="style_red">免费注册</a></li></ul></div>
/* 将所有li左浮动 */
.shortcut ul li {float: left;
}
.style_red {
/* 首页里有多个部分字体都是红色,直接命名一个类*/color: #c81623;
}

快捷导航右侧制作
在这里插入图片描述
因为每个盒子文字部分大小不一致,所以不能给li指定宽度,给‘ | ’设置padding值之类隔开距离,故‘ | ’也需要盒子装,用li标签制作
一共十三个li标签,偶数标签是‘ | ’

我的品优购后面倒三角的做法用到伪元素字体图标,注意路径变化
在这里插入图片描述
把icomoon.zip里的fonts文件夹放到根目录里,同时声明部分的路径需要变化
伪元素生效第一步:
在这里插入图片描述
然后在html和css里定义

<div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购 </li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div>
.shortcut .fr ul li:nth-child(even) {width: 1px;height: 13px;background-color: #666666;margin: 9px 15px 0;
}
.arrow-icon::after{/* 伪元素生效第二步 */content: '\e91e';font-family: 'icomoon';
}
  • 2.3. 头部模块制作

1、logo模块制作
在这里插入图片描述

1、header盒子必须有高度
2、1号盒子是logo标志定位
3、2号盒子是search搜索模块定位
4、3号盒子是hotwords热词模块定位
5、4号盒子是shopcar购物车模块
- count统计部分用绝对定位做
- count统计部分不要给宽度,因为可能买的件数比较多,让件数撑开就好了,给一个高度
- 一定注意左下角不是圆角,其余三个是圆角,写法:border-radius:7px 7px 7px 0;

  • 首先给header盒子高度,宽度继承版心的宽度,将背景暂且设为pink色
<header class="header w"></header>
.header {height: 106px;background-color: pink;
}
  • 1号logo盒子制作,需要符合LOGO SEO优化规范
    1、logo里面放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。
    2、h1里面再放一个链接,可以返回首页的,把logo的背景图片给链接即可
    3、为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但文字不要显示出来
    1)text-indent 移到盒子外面(text-indent:-9999px),然后overflow:hidden,淘宝的做法
    2)直接给font-size: 0;就看不到文字了,京东的做法
    4、最后给链接一个
    title
    属性,这样鼠标放到logo上就可以看到提示文字了

首先一个logo盒子,指定大小为logo图片大小,width: 171px;height: 61px;,按照子绝父(header)相的做法,定好位置,然后logo里放h1标签,h1标签里放链接和title属性,放文字”品优购商城",给a设置css属性,先转为块元素,然后设置与盒子大小一样的高宽,并且将链接里的文字隐藏,有两种方法。

<header class="header w"><!-- logo模块制作 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div></header>
.header {position: relative;height: 106px;background-color: pink;
}
.header .logo {position: absolute;width: 171px;height: 61px;margin-top: 27px;background: url(../images/logo.png) no-repeat;
}
.logo a {display: block;width: 171px;height: 61px;/* font-size: 0;京东的做法*/text-indent: -9999px;overflow: hidden;/* 淘宝的做法 */
}

2、搜索模块制作

在这里插入图片描述

  • 测量搜索模块高度和宽度和边框颜色大小,然后子绝父相的方式定好位置,
  • 搜索模块的高度

在这里插入图片描述

  • 去掉表单默认有边框和点击时的蓝色外边框

在这里插入图片描述

  • 搜索框的高度
    /* 注意:最后设定宽度时,因为使用的是C3盒子模型,所以宽度就不用减去padding-left的大小了 */
    但是搜索按钮宽度就不一样了,一共82px,但是要减去2px边框。
    在这里插入图片描述
    在这里插入图片描述
  • 注意:搜索框和搜索按钮最后设定完准确宽度后,因为他们都是块级元素,中间有缝隙,所以搜索按钮会掉下来,需要给两个块级元素加浮动
    在这里插入图片描述
<!-- 搜索模块制作 --><div class="search"><input type="search" name="" id=""  placeholder="语言开发"><button>搜索</button></div>
/* search模块制作 */
.search {position: absolute;top: 25px;left: 346px;width: 538px;height: 36px;border: 2px solid #b1191a;
}
.search input {float: left;width: 454px;height: 32px;padding-left: 10px;
}
.search button {float: left;/* 测量的是82,但是有边框宽度2,所以要减去边框宽度 */width: 80px;height: 32px;background-color: #b1191a;font-size: 16px;color: #ffffff;
}

3、hotwords模块制作

此模块较简单,不用指定盒子高宽,直接用a标签放七个文字链接,然后子绝父相定好位置,并且给a标签margin左右值即可

<!-- hotwords模块制作 --><div class="hotwords"><a href="" class="style_red">优惠购首发</a><a href="">亿元优惠</a><a href="">9.9元团购</a><a href="">美满99减30 </a><a href="">办公用品</a><a href="">电脑 </a><a href="">通信</a></div>
/* hotwords模块制作  */
.hotwords {position: absolute;top: 68px;left: 346px;
}
.hotwords a {margin: 0 10px;
}

4、shopcar模块制作

注意绝对定位是测量到上侧和右侧的绝对距离

在这里插入图片描述

左侧小图标采用字符图标的before来制作,右侧小图标采用字符图标的after来制作

在这里插入图片描述

右上角的8,用li标签来做,不能给宽度,只需要给个高度,定位采用子绝父绝来做,注意此盒子会继承父盒子的行高,所以需要给盒子指定行高为它的高度值,为了撑大盒子可以使用padding设定左右值。
在这里插入图片描述

<div class="shopcar">我的购物车<li class="count">8</li></div>
.count {position: absolute;height: 15px;top: -5px;right: 19px;line-height: 15px;color: #fff;background-color: #e60012;/* 为了撑大盒子 */padding: 0 5px;border-radius: 7px 7px 7px 0;
}

3. 品优购列表页制作

  1. 品优购注册页制作

  2. 域名注册与网站上传

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php网站源码 一品资源网,一品资源网自用官网模板源码下载站(带手机模板)...

★模板介绍★ 一品资源网自用官网模板源码下载站(带手机模板) 添加和原站下载内容页面的一样的动态会员升级提示滚动(php页面我做了注释&#xff0c;如果需要升级成功的会员显示&#xff0c;只需改动一下调用条件即可) 界面设计大气&#xff0c;带手机站同步PC站数据&#xff0…

解决 git 文件夹不显示绿色图标和红色图标的问题

问题描述&#xff1a;安装好git后&#xff0c;被管理的文件没有绿色图标和红色图标。 解决&#xff1a; 1. 修改注册表&#xff1a; Win r 打开运行窗口&#xff0c;输入 regedit.exe&#xff0c;如下图所示&#xff1a; 2.找路径&#xff1a; 依次找到如下路径&#xff1…

【已解决】【亲测有效】git绿色、红色图标不显示的问题

git绿色、红色图标不显示的问题 在使用git的过程中发现&#xff0c;项目文件上没有绿色图标&#xff0c;即使修改文件也没有红色图标显示&#xff0c;绿色图标是指提交成功的&#xff0c;红色图标是指修改后还未提交的&#xff1b;虽然文件没有图标显示&#xff0c;但是可以正…

GIT没有关联小图标(红色、绿色图标)解决方案

1、按WinR键打开运行对话框&#xff0c;输入 regedit.exe &#xff0c;准备修改注册表&#xff1b; 2、在HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\Explorer文件夹下新建一个“字符串值”文件&#xff1a;名称为 “Max Cached Icons” (最大缓存图标) &…

使用Icon图标的几种方式

一.CSS Sprite 这也就是我们平时所说的雪碧图&#xff08;也叫精灵图&#xff09;&#xff0c;主要通过background-position属性来控制图片显示的位置&#xff0c;不过要注意的是图片是以左上角为坐标原点&#xff0c;坐标的变动应在第四象限内&#xff0c;及x的取值为0到正无…

桌面图标出现蓝色问号

问题&#xff1a; 因为之前用了代码库&#xff0c;所以装了Git&#xff0c;但是今天不小心手残右键时点错了&#xff0c;导致桌面图标出现了很多蓝色的问号&#xff0c;如下图&#xff0c;我只知道是Git搞得鬼&#xff0c;但却不知道该怎么处理&#xff0c;后来搜索了一番&…

修改任务栏程序图标

某些exe程序&#xff0c;在电脑运行时&#xff0c;会显示自己的图标&#xff0c;但是有时不太方便让其显示&#xff08;至于原因 你懂得&#xff09; 以微信为例&#xff0c;教你替换这种程序的图标 首先 我们要准备一个可操作exe文件的工具eXeScope&#xff0c;eXeScope工具…

git文件上绿色红色图标不显示的问题

由于项目使用的是git&#xff0c; 我在windows上安装了Git-2.22.0-64-bit.exe &#xff0c;安装完之后就可以使用git命令了。 这种不是很方便&#xff0c;于是就在eclipse上安装了git插件&#xff0c;用eclipse来操作git。 后来发现拉下来的项目代码没有红色绿色的图标。 于…

git文件标识添加绿色和红色图标

1.Win r 打开运行窗口&#xff0c;输入 regedit.exe 修改注册表&#xff0c;如下图所示&#xff1a; 2、按照文件的层次关系依次找到 HKEY_LOCAL_MACHINE\Software\Microsoft\windows\CurrentVersion\Explorer 3、然后修改键名 Max Cached Icons (最大缓存图标) 的值为 2000…

git显示不出绿色的小图标的解决方法

大家好&#xff0c;我是曜耀。今天我来为大家讲解一下&#xff0c;电脑安装git显示不了绿色的小图标的问题。 对于刚刚安装了git的我们&#xff0c;有一部分会遇到在操作过程&#xff0c;win会显示不出&#xff0c;git该用的图标&#xff0c;对此我们会很烦恼&#xff0c;我也是…

【更改应用图标】

1. 准备工作 应用图标是区分应用的重要方式。它还会出现在多个位置&#xff0c;包括主屏幕、“所有应用”屏幕和“设置”应用。 应用图标也可能会被称为“启动器图标”。启动器图标&#xff0c;是指当您点击 Android 设备的主屏幕按钮以查看和整理应用、添加微件和快捷方式等…

关于桌面文件,软件图标,带蓝底白问号的解决方法

出于工作需要换上了之前使用的电脑&#xff0c;但是那些软件安装路径涵盖范围我自己都分不清了&#xff0c;乱七八糟的文件夹和软件安装的路径都成一坨一坨的了&#xff0c;虽然不知道当年的我是怎么想的&#xff0c;但是现在的我强迫症犯了&#xff0c;把还记得的软件都搬家了…

【Git】git 文件夹不显示红色图标和绿色图标的问题

在使用git提交代码时&#xff0c;发现项目文件夹上没有红色图标和绿色图标。 红色图标表示修改后未提交的文件夹&#xff0c;绿色图标表示已提交的文件夹。 若使用过程中提交的文件过多的时候&#xff0c;文件夹不显示红色或绿色图标&#xff0c;导致不知道修改了哪些文件&am…

git 文件夹不显示红色图标和绿色图标的问题

在使用git提交代码时&#xff0c;发现项目文件夹上没有红色图标和绿色图标。 红色图标表示修改后未提交的文件夹&#xff0c;绿色图标表示已提交的文件夹。 若使用过程中提交的文件过多的时候&#xff0c;不知道修改了哪些文件&#xff0c;容易出现错误。 解决方法&#xff1…

git绿色、红色图标不显示的问题

git绿色、红色图标不显示的问题 在使用git的过程中发现&#xff0c;项目文件上没有绿色图标&#xff0c;即使修改文件也没有红色图标显示 绿色图标是指提交成功的&#xff0c;红色图标是指修改后还未提交的 没有图标显示&#xff0c;但是可以正常上传下载&#xff0c;在文件…

手把手带你把小爱同学装进你的台灯

手把手带你把小爱同学装进你的台灯 一、硬件1.硬件准备2.pcb板 二、软件1.配置好Arduino开发环境2.获取秘钥2.代码烧录 三、实物演示 一、硬件 1.硬件准备 1.8266开发板1 2.台灯1 3.mos管开关模块1 4. AMS117 3.3V稳压模块 5. 各种阻值的贴片电容 esp8266开发板 mos管模块 …

物联那点事儿之小爱同学网络控制电脑开机(arduino+点灯科技篇)

前言 上一个帖子写的是自制网络温湿度计&#xff0c;里面对需要用到的app和编译软件写的都很清楚&#xff0c;这个帖子呢就写一下小爱同学网络控制电脑开机的小项目&#xff0c;首先要声明一点&#xff0c;一定要弄明白ardunio编程、esp8266模块&#xff08;esp01/nodemcu&…

【AI公司酷05期】美宅科技:独创人工智能室内设计引擎,帮你3秒搞定装修方案,要用AI赋能家居新零售

作者&#xff5c;震霆 出品&#xff5c;遇见人工智能 公众号 GOwithAI 【AI公司酷05期】美宅科技——家居新零售领导者&#xff0c;全球独创人工智能室内设计引擎--图灵猫&#xff0c;受邀参加2017年1月11美国硅谷全球人工智能前沿峰会&#xff0c;被誉为室内设计AlphaGo 生活…

图谱实战 | 图谱问答在小米小爱中的实践探索

转载公众号 | DataFunTalk 分享嘉宾&#xff1a;代文博士 小米 高级算法工程师 编辑整理&#xff1a;何雨婷 湖北工业大学 出品平台&#xff1a;DataFunTalk 导读&#xff1a;今天的介绍会围绕以下三点展开&#xff1a; 小爱同学应用场景信息抽取图谱问答 01 小爱同学应用场景介…

基于ESP8266+点灯科技+小爱同学控制开门解决方案!

前言 每次下班回到家就已经很累了&#xff0c;到门口还要到处翻找钥匙&#xff0c;然后开门&#xff0c;是不是觉得很烦&#xff0c;那我们有没有不用通过钥匙开门且成本低的方案了&#xff1f;下面我会教大家基于ESP8266点灯科技小爱同学来控制开门的方法 一、准备工作 1、…