首页 > 其他分享 >vue学习第12~13天 品优购项目(纯页面)

vue学习第12~13天 品优购项目(纯页面)

时间:2023-06-20 12:44:47浏览次数:43  
标签:13 12 favicon 项目 网站 搜索引擎 vue 页面 品优购

目标:

  1)项目规划

  2)首页制作

  3)列表页制作

  4)注册页制作

  5)域名注册与网站上传

 

                  项目规划

1、网站制作流程(八步)

  

 

2、项目整体介绍

  项目名称:品优购

  项目描述:品优购是一个电商网站。要完成PC端首页、列表页、注册页面的制作

 

3、项目学习目的

  1)电商类网站比较綜合 ,里面需要大量的布局技术,包括布局方式、常见效果以及周边技术。

  2)品优购项目能复习、总结、提高基础班所学布局技术。

  3)写完品优购项目,能对实际开发中制作PC端页面流程有一个整体的感知。

  4)为后期学习移动端项目做铺垫。

 

4、开发工具以及技术栈

  1)开发工具: VScode、 PS、 Chrome浏览器

  2)技术栈:

    a)HTML5 、CSS3 手动布局。可以多使用H5新标签

    b)采取结构与样式相分离,模块化开发。

    c)良好的代码规范有利于团队重好的开发协作

 

  3)总结

    a)品优购项目整体介绍(制作首页、列表页、注册页三个页面)

    b)品优购项目学习目的(里面包含技术较多,能极人锻炼我们布局技术)

    c)开发工具以及技术栈(切图用ps,代码用Vscode,测试用chrome,大量使用HTML5+CSS3)

 

5、项目搭建

  1)创建文件夹    

    

  2)创建文件  

    

  3)模块化开发

    a)模块化:将一个项目按照功能划分,一个功能一个模块,互不影响

    b)模块化优势: 重复使用、更换方便。

    c)common.css 公共样式里包含: 版心宽度、清除浮动、页面文字颜色等公共样式。

 

6、网站 favicon 图标

  favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上。

  目前主要的浏览器都支持favicon.ico图标

  1)制作favicon图标

  2)favicon图标放在网站根目录

  3)HTML页面引入favicon图标

 

7、网站TDK三大标签SEO优化

  SEO(SearchEngine Optimizaton),汉译为:搜索引擎优化, 是一种利用搜索引擎的规则提高网站在有所相关搜索引擎内自然排名的方式。

  SEO的目的是: 对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。

  

  页面必须有三个标签用来符合SEO优化。title、descripiton、keyword  

  

 

   例如:

    

   1)title网站标题

    title 具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

    建议:网站名(产品名)-网站的介绍(尽量不要超过30个汉字)

    例如:  

      

      

  2)description网站说明(简要说明网站的功能)   

    

 

  3)keywords关键字

    keywords是页面关键词,是搜索引擎的关注点之一。

    keywords 最好限制为6~8个关键词,关键词之间用英文逗号隔开,采用 关键词1,关键词2的形式。  

    

 

                  首页制作

 

网站的首页一般都是使用index 命名,比如index.html

1、常用模块类名命名

  

 

3、header制作

        

  1)header 盒子必须要有高度

  2)1号盒子是logo标志定位

  3)2号盒子是search 搜索模块定位

  4)3 号盒子是 hotwrods 热词模块定位

  5) 4号盒子是 shopcar购物车模块

  

  2)**LOGE SEO 优化** 

    a)1ogo里面首先放一个h1 标签,目的是为了提权,告诉搜索引擎,这个地方很重要。

    b)h1 里面再放一个链接,可以返回首页的,把1ogo 的背景图片给链接即可。

    c)为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要展示出来。

      方法1:text-indent 移到盒子外面(text-indent:-9999px),然后 overflow: hidden,淘宝的做法。

      方法2:  直接给 font-size:0;就看不到文字了,京东的做法。

    d)最后给链接一个title 属性,这样鼠标放到 logo上就可以看到提示文字了。

 

  3)search搜索模块

 

后续省略添加 项目地址自行查看

 

标签:13,12,favicon,项目,网站,搜索引擎,vue,页面,品优购
From: https://www.cnblogs.com/changdasheng/p/17371003.html

相关文章

  • C#12“实用”的新功能:类型的别名
    类型的别名是C#12的一种比较“实用”的“新功能”。它可以让你在开发过程中使用using别名指令创建任何类型的别名,也可以为元组类型、数组类型、指针类型或其他不安全类型创建语义别名,这样可以通过类型知道当前参数的含义,降低错误率。之前的C#版本也支持类型别名,但是使用没有这么......
  • vue学习第16天 CSS---3D转换 (translate3d 3d移动、3D旋转 rotate3d、transform-
    3D转换转换:1)3d移动 translate3d 2)3d旋转 rotate3d 3D的特点:1)近大远小2)物体后面遮挡不可见 3D转换:我们工作最常用的 3D位移 和 3D旋转 主要知识点: 1、三维坐标系(z轴,z外(屏幕)+,z内(屏幕)-)三维......
  • vue项目中使用vue-quill-editor富文本编辑器、支持大小和拖拉;以及 vue 引入quill - im
    在本内容的最后面附上了demo代码1.实现的效果图2.首先需要先引入依赖如果引入了下面这两个依赖报错的话,那么请查看当前内容的第8点,哪里有解决这个报错的方案npminstallquill-image-resize-modulenpminstallquill-image-drop-modulenpminstallvue-qui......
  • 22年12月Tita 升级年度考核中支持引入季度、月度考核的结果
    升级快速一览:·【考核模板】年度考核中支持引入季度、月度考核的结果;·【考核管理】支持单个考核活动中按分数计算考核排名; 点击免费领取绩效考核模版等资料1.  年度考核中支持引入季度、月度考核的结果使用场景:1.当做年度考核时,需要引入本年内每个季度或者每个......
  • CF1239E Turtle
    CF1239E Turtle通过观察我们会发现,第一行一定单调递增,第二行一定单调递减,否则不是最优。再次前提下,乌龟的最优方案只有两种,要么一直向右,最后向下,要么先向下,再一直向右。因此,我们将最小的两个数字放在左上角和右下角,然后把余下数字填入剩余位置,并希望下式最小显然,这是一个背包......
  • vue学习第15天 CSS ---- 动画animation
    动画动画(animation)是CSS3中具有颠覆性特征之一,可通过设置多个节点来精确控制一个或一组动画。常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。动画的优点(与过渡相比更好) 1、动画的基本使用(先定......
  • 20230313 java.util.LinkedList
    简介java.util.LinkedListLinkedList相对ArrayList要复杂一些,不是因为链表操作比数组操作复杂,而是LinkedList实现了更多接口LinkedList除了实现List接口外,还实现了Queue和Deque接口,也就意味着可以作为队列或双向队列使用对链表的学习非常有帮助感悟对于接口的认......
  • 基于DSP2812控制永磁同步电机调速系统的仿真和程序仿真波形正确,程序运行调试正确
    基于DSP2812控制永磁同步电机调速系统的仿真和程序仿真波形正确,程序运行调试正确涉及到的知识点和领域范围是控制系统和数字信号处理(DSP)。控制系统是用来管理和操控其他系统的一种系统,而数字信号处理则是对数字信号进行处理和分析的技术。在这段话中,描述了基于DSP2812控制永磁同步......
  • 【保姆级教程】Vue项目调试技巧
    前言在Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要,debug是必备技能。同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。本文主要讲解针对Vue项目进行调试的3......
  • 三菱FX3U-485ADP-MB通讯三种变频器程序 已实现测试的变频器:施耐德ATV312,
    三菱FX3U-485ADP-MB通讯三种变频器程序已实现测试的变频器:施耐德ATV312,三菱E700,台达VFD-M三款变频器,支持rtu的协议的变频器都可实现。需要硬件:FX3UPLC,FX3U-485ADP-MB通信扩展模块,施耐德ATV312变频器或台达vfd-m变频器或三菱E700变频器,fx3u-cnv-bd。通过modbusrtu通讯方式,可......