生活资讯
CSS 8 品优购项目
2024-12-26 03:13  浏览:71

目录

1.品优购项目规划

1.1网站制作流程

1.2品优购项目整体介绍

 1.3品优购项目的学习目的

1.4开发工具以及技术栈 

小总结​

 1.5品优购项目搭建工作、

1.5.1创建文件夹

1.5.2创建文件 

1.5.3 模块化开发

1.6网站 favicon 图标

1.7网站TDK三大标签SEO优化

1.7.1title网站标题

 1.7.2description网站说明

1.7.3keywords关键字

第一阶段-项目规划参考代码

2.品优购首页制作

 2.1常用模块类名命名

2.2快捷导航shortcut制作

===快捷导航shortcut制作完成代码展示===

 2.3header制作

 2.3.1LOGO SEO优化

LOGO SEO优化代码完成展示

2.3.2 搜索框模块

搜索框模块代码完成展示

2.3.3hotwords热词模块

2.3.4shopcar模块

===header制作完成展示===

2.4 nav导航栏模块

===nav导航栏模块代码展示===

2.5footer底部制作

 ===footer底部制作完成展示===

2.6main主体模块

 2.6.1newsflash快报模块

 ===main主体模块代码展示===

 2.7推荐模块制作

===推荐模块代码展示===

2.8楼层区floor模块制作

2.8.1头部box_hd制作

 2.8.2Tab栏原理-布局需求

===floor模块代码展示===

3.品优购列表页制作

3.1准备工作

​3.2列表页header和nav修改

​ ===header和nav修改代码展示===

3.3列表页主体 sk_con tainer

 ===列表页主题代码展示===

4.品优购注册页制作

4.1注册页类名命名

​ ===注册页面代码展示===

5.Web服务器

​ 5.1什么是Web服务器

 5.2本地服务器

5.3远程服务器

5.4将自己的网站上传到远程服务器


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

1.5.1创建文件夹

1.5.2创建文件 

base.css文件 - CSS初始化代码:        

 

1.5.3 模块化开发

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

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

第一步

1.把品优购图标切成png图片

2.把png图片转化为ico图标,这需要借助于第三方转换网站,例如比特虫:http://www.bitbug.net/

第二步:

favicon图标放到网站根目录下

 第三步

在html页面的<head></head>元素之间引入代码

 

总结: 

1.7.1title网站标题

 1.7.2description网站说明

1.7.3keywords关键字

 
 

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

我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面

1.设置.style_red样式给左侧 '免费注册' 是因为模块中不只有它是这种红色样式(例如搜索框下面的 ' 优惠购首发' ,设置单独一个类名更加合理方便

2. 借鉴右侧导航栏做法,设置13个li ,给偶数小li设置样式实现 ' | ' 分隔,而不是用border(高度不一致麻烦

3.右侧导航栏中的字体图标采用after伪元素,注意字体图标路径(见common.css文件

index.html

 

common.css

 

 2.3.1LOGO SEO优化

logo我们以前的做法div里面放图片是不合理的,实际开发中应该用到SEO优化

LOGO SEO优化代码完成展示

index.html

 

common.css

 

2.3.2 搜索框模块

搜索框测量大盒子定位数据时,因为用的CSS3盒子模型,边框是不会撑大盒子的,因此测量宽度高度的时候直接把边框量进去就是最终的宽度/高度了

参考搜索框做法大盒子包裹住search表单和button按钮,注意search表单和button按钮都是行内元素,会有间隙,卡好宽度的时候容易掉下来 可以用浮动去除。

搜索框模块代码完成展示

index.html

 

common.css

 

2.3.3hotwords热词模块

indedx.html

 

common.css

 

2.3.4shopcar模块

(自己用了shopcar模块用a链接转换成块元素) 加上css伪类元素::before和::after添加文字图标  

购物车商品数量count用定位

效果

index.html

 

common.css

 

 
 
 

制作: 

index.html

 

common.css

 
 
 
 
 

效果

制作: 

index.html

 

common.css

 
 

以前书写的就是模块化中的公共部分。
main 主体模块是 index 里面专用的,注意需要新的样式文件 index.css。

 2.6.1newsflash快报模块

newsflash中的news模块细分

效果

整体: 

 index.html

 

index.css

 

 
 
 
 

index.html 

 

index.css

 
 
 

 

2.8.1头部box_hd制作

 2.8.2Tab栏原理-布局需求

 当用户点击tab_list上的某个选项时,tab_content呈现对应内容,其他内容隐藏。

===floor模块代码展示===

index.html

 

index.css

 
 

 

 

 

list.html

 

list.css

 

 
 
 
 

list.html

 

list.css

 

效果

 

 

注册页面:register.html

注意:注册页面比较隐私,我们不需要对当前页面进行SEO优化

 register.html

 

register.css

 

效果

 

我们可以把自己的电脑设置为本地服务器,这样同一个区域网内的同学就可以访问你的品优购网站了。后面学ajax'的时候,在进行讲解。

注意:一般稳定的服务器都是要收费的。比如:阿里云 

    以上就是本篇文章【CSS 8 品优购项目】的全部内容了,欢迎阅览 ! 文章地址:http://tiush.xhstdz.com/xwnews/717.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://tiush.xhstdz.com/mobile/ , 查看更多   
最新文章
2023年中国AIGC产业全景报告
AIGC丨研究报告核心摘要:古人有云:日就月将,学有缉熙于光明。人类对人工智能学的潜心钻研终于再度获得重大突破,大模型的涌现
chatgpt邮箱登录
在如今的信息时代,电子邮件已经成为人们不可或缺的通信工具之一。无论是工作上的沟通、学习中的交流,还是与亲朋好友的联络,电
AI项目实方案与策略:全面解析人工智能项目文案撰写要点
随着人工智能技术的飞速发展越来越多的企业开始关注并投入项目的开发与实。一个成功的项目不仅需要技术支持还需要一份精准、详尽
2024年10个最佳智能手机浏览器(Android和iOS)
2024年10个最佳智能手机浏览器(Android和iOS)10 个适用于 Android 和 iOS 2024 智能手机的最佳浏览器– 如果您没有安装合适的网
AI绘画4大套路:ChatGPT自动写StableDiffusion提示词!
AI绘画不会写提示词?今天分享3种提示词“套路”,让你快速写出满意的提示词。 套路一:抄作业 进入C站或其他
2022变形金刚地球之战下载安装教程 最新变形金刚地球之战游戏手机版
2022变形金刚地球之战下载安装教程,《变形金刚地球之战》超人气变形金刚题材、玩家在游戏中保护好自己的英雄、开启激烈阵营战斗
1.0.3(2024-01-12)下载此版本
2024.1.111.修复我的页面刷新后等级图标不显示问题2.优化首页部分UI3.首页、分类页新增一种Swiper4.优化版块详情页UI5.修复编辑
13.2 维护国家主权、安全、发展利益 教学设计-2024-2025学年中职高教版(2023) 中国特色社会主义
版权异议什么是版权异议? 如您认为学科网网站上由用户上传的内容(包括文件、图片、视频等)侵犯了您的知识产权,请点击这里提
adb最新版本_Android P 可能是有史以来改动最大的版本,我们为你准备了这份「升降级指南」
随着 Developer Preview 4 的发布,目前的 Android P 预览版变得越来越稳定,越来越适合日用 ,而这次预览版
79456濠江论坛最新消息今天,全面实施分析数据_HT63.962
### 79456濠江论坛最新消息:全面实施分析数据_HT63.962在今日的79456濠江论坛上,最新的讨论焦点集中在了全面实施分析数据_HT63
相关文章