品优购首页制作

网站的首页一般都是使用index命名，比如index.html或者index.php.
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。

常用模块类名命名

以下是我们约定的命名模块，同学们可以直接使用以下类名即可。

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwrods
导航	nav
导航左侧	dropdown 包含 .dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

快捷导航shortcut制作：通栏的盒子。注意它的行高，会继承给里面的子盒子。包含版心的盒子。

header制作：header盒子必须有高度。logo标志定位，search搜索模块定位，hotwrods热词模块定位，shopcar购物车模块定位（count统计部分用绝对定位做，不要给宽度，因为可能买的件数处比较多，让件数撑开就好了，给一个高度，一定注意左下角不是圆角，其余三个是圆角写法：border-radius：7px 7px 7px 0；)。

LOGO SEO优化
1.logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2.h1里面再放一个链接，可以返回首页的，把Iogo的背景图片给链接即可。
3.为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。
●方法1：淘宝的做法：text-indent移到盒子外面(text-indent：-9999px)，然后overflow：hidden；
●方法2：京东的做法：直接给font-size：0；就看不到文字了。
4.最后给链接一个title属性，这样鼠标放到 logo上就可以看到提示文字了。

nav导航制作：nav盒子通栏有高度，有下边框，左浮动dropdown（根据相关性，包含.dt和.dd两个盒子）。左浮动navitems导航栏组

footer底部制作：footer页面底部盒子通栏给一个高度和灰色的背景，有一个版心，版心里面包含，mod是模块的意思。mod_service是服务模块，mod_help是帮助模块，mod_copyright是版权模块。

main主体模块制作：以前书写的就是模块化中的公共部分。main主体模块是index里面专有的，需要新的样式文件index.css。·main盒子宽度为980px，距左边220px(margin-left)，给高度就不用消除浮动。main里面包含左侧盒子左浮动，focus焦点图模块，右侧盒子右浮动，newsflash新闻快报模块。

推荐模块制作：大盒子recom椎荐模块 recommend，recom-hd、recom-bd，注意里面的小竖线

楼层区floor制作：注意这个floor，不要给高度，内容有多少算多少

品优购列表页制作

品优购列表页制作准备工作

1.列表页面是新的页面，我们需要新建页面文件list.html
2.因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来
3.头部和底部的样式也需要，因此list.html中还需要引入common.css
4.需要新的list.css样式文件，这是列表页专门的样式文件

列表页header和nav修改:秒杀盒子 sk(second kill) 定位即可，左测浮动sk_list和sk_con包含ul和li

列表页主体sk_container：sk_container宽度1200，不给高度，sk_hd，sk_bd包含很多ul和Ii

品优购注册页制作

注册页类名命名

注册页面：register.html
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

名称	说明
注册专区	registerarea
注册内容	reg-form
错误的	error
成功的	success
默认的	default

Web服务器

本知识点的目的：
1.了解什么是服务器以及相关概念
2.把自己网站上传到服务器上，可以让其他人访问

什么是Web服务器：我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览
如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了

服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。以下服务器我们主要指的是Web服务器。
根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

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

远程服务器：本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。
比如域名：www.mi.com 可以访问小米网站

总结：
1.服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器
2.服务器可以分为本地服务器和远程服务器
3.远程服务器是别的公司为我们提供了一台计算机
4.我们可以把网站上传到远程服务器里面，别人就可以通过域名方问我们的网站了

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

注意：一般稳定的服务器都是需要收费的。比如：阿里云
这里给大家推荐一个免费的远程服务器（免费空间）http://free.3v.do/

1.去免费空间网站注册账号。
2.记录下主机名、用户名、密码、域名。
3.利用cutftp软件上传网站到远程服务器。
4.在浏览器中输入域名，即可访问我们的品优购网站了。

基础班课程总结

1.HTML我们学的就是常用标签，就是基本盒子。
2.CSS就是用来美化布局网页。
3.HTML+CSS是没有逻辑可言的，基本就是搭积木摆放盒子的过程，你需要的是耐心。
4.对同学们来说，现在最困难的是布局结构。欠缺分析页面布局的能力。
5.同一个模块，有很多布局方式，能做出来就是好的。
6.多看别人写的页面，模仿人家的布局，每次写页面总会有新的收获。
7.错误总是在所难免，要学会利用chrome调试工具，他们能快速帮我们排查错误，需要细心。
8.学好定位，对后面学习JavaScript有很大的帮助。

拼死也要克服困难！！！！！

品优购---品优购项目制作---8.4相关推荐

优集品 php,从细节处着眼优集品打造成人世界的儿童节
在各大电商企业仍旧在史上最大规模的价格战中拼的不可开交之时,重视用户体验度,以商品传递生活理念而知名的全球优选设计百货--LivePort优集品(http://www.liveport.cn/),已然 ...
淘宝天猫商家运营，店铺选品，如何选复购率高的冷门产品
商家开店选品时,一般都会希望自己的产品复购率高但是又冷门,竞争小.今天主要讲讲该如何找高复购又冷门的产品. 一.如何选品 1.高复购--消耗品一般说道复购率高,大部分商家能想到的都是服饰.日用品.食 ...
维优尚品——全国首家C2M电子商务平台
一.维优尚品是什么维优尚品的概念:全国首家C2M电子商务平台维优尚品,一个致力于向个人提供移动电子商务零售服务的轻创业平台.自2016年5月正式成立,维优尚品一直秉持着"让买卖更简单&q ...
下坠的优信：全国购失灵了？
配图来自Canva 此前,优信陆续剥离一成购.优信拍.金融等业务,力推全国购业务.而今,优信赖以生存的全国购业务业绩不乐观,在疫情.外部竞争影响下,更显得力不从心. 近日,二手车在线商城优信集团发布了 ...
java团购系统开发_基于jsp的团购管理系统化-JavaEE实现团购管理系统化 - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的团购管理系统化, 该项目可用各类java课程设计大作业中, 团购管理系统化的系统架构分为前后台两部分, 最终实现在 ...
前端练习项目——品优购 Day4 nav导航栏制作
1.整体结构分析整体是一个大盒子,大盒子里有一个版心,版心里有左右两个盒子.左盒子是全部商品,右盒子是相关选项.注意左盒子也是两个部分:1.全部商品分类标题 2.全部商品的具体分类 (这俩是一个 ...
前端练习项目——品优购 Day7 推荐recom模块制作
1.结构分析整体是一个大盒子,有两个类名:版心w和推荐recom.左边是recom_hd,右边是recom_hb. 2.大盒子制作 .recom {height: 163px;/* backgrou ...
SEM标准品、对照品的管理大全
标准品.对照品的管理大全标准品.对照品是指国家药品标准中用于鉴别.检查.含量测定的标准物质.在检测工作中占有举足轻重的地位.对检测中心标准品的购买.验收.保存.出库.入库与使用作出明确管理规定,为检 ...
手机团购，团购市场的下一引爆点
手机团购,团购市场的下一引爆点<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" ...
简要讨论python对于1688的关键字搜索、商品详情在电商运营大数据分析、电商选品、竞品分析上的帮助
目录 1688商品详情简要描述 1688商品详情请求URL 请求方式参数关键信息淘宝天猫以及1688.京东.拼多多平台不断地在改变人们的消费习惯,人们从传统购物模式不断走向线上模式,作为电商行业 ...

品优购---品优购项目制作---8.4