目录
目标产品溢价采购项目网站制作主要主模块制作左侧对焦模块制作右侧新闻闪光模块制作
推荐模块制作——“recom”家电模块“box_hd”和“box_bd”的制作、标签栏切换需求的制作
列表创建() 产品优狗列表页面创建准备列表页面`header` 和`nav` 修改列表页面正文`sk_container`sk_hd` 制作`sk_bd` 制作
准备注册页面() `header` 头部实现`registerarea` 主模块实现底层实现
Web 服务器什么是本地服务器远程服务器概述
将您的网站上传到远程服务器()
目标
您可以创建列表页面、创建注册页面、将拼友购网站部署到本地服务器或将拼友购网站上传到远程服务器。
品优购项目
首页制作
main 主体模块制作
我之前写的是模块化的共同部分。
主模块专用于索引。需要一个新的样式文件index.css。
主框的宽度为980 像素，高度为455 像素，距左侧(margin-left) 的位置为220 像素。如果设置了高度，则不需要清除浮动。
main 包含一个721px 宽的左框、左浮动和焦点焦点图模块。
Main 右侧包含一个250px 宽的浮动框和一个Newsflash 新闻模块。
结构代码
div 类=\’w\’
div 类=\’主\’
div 类=\’焦点\’
.
/div
div 类=\’newsflash\’
.
/div
/div
/div
样式代码
。主要的{
宽度： 980 像素；
高度： 455 像素；
边距-left: 220px；
边距-top: 10px；
}。专注{
float: 左；
宽度： 721 像素；
高度： 455 像素；
背景颜色：紫色；
}
.新闻快报{
float: 右；
宽度： 250 像素；
高度： 455 像素；
}
左侧 focus 模块制作
大焦点框包围着1 号（带有照片的框）、3 号（带有左右箭头的框）和4 号（带有小点的框）。
div class=\’聚焦佛罗里达\’
a href=\’#\’ class=\’arrow-l\’ /a
a href=\’#\’ class=\’arrow-r\’ /a
乌尔
李
a href=\’#\’img src=\’上传/焦点.jpg\’ alt=\’\’/a
/里
/ul
ol 类=\’圆\’
李/李
li 类=\’当前\’/li
李/李
李/李
李/李
李/李
李/李
李/李
/ol
/div
包1号Box（ul li a img），轮播布局是为了后面配置JS逻辑代码时方便。
2 号框和3 号框使用左右箭头定位。
样式代码
.箭头-l，
.arrow-r {
绝对位置：
排名前： 50%；
边距-top: -20px；
宽度： 24 像素；
高度： 40 像素；
背景： rgba(0, 0, 0,3);
文本对齐：居中；
行高： 40px；
color:#fff；
字体-family: \’图标\’;
字体大小： 18px；
}
.arrow-r {
右： 0;
}
4号盒子里有一个小点（ol li）
小圆圈使用边框来实现小点内的背景颜色并实现样式代码。
。圆圈{
绝对位置：
底部： 10px；
左： 50px；
}。圆圈{
float: 左；
宽度： 8 像素；
高度： 8 像素；
/*背景颜色： #fff;*/
border: 2px 实心rgba(255, 255, 255, 0.5);
margin: 0 3px;
边界半径： 50%；
/*鼠标经过时显示小手*/
光标：指针；
}。当前{
背景颜色： #fff;
}
右侧 newsflash 模块制作
右侧模块分为上、中、下三个框
结构代码
div 类=\’newsflash\’
div 类=\’新闻\’
.
/div
div class=\’生活服务\’
.
/div
div 类=\’讨价还价\’
.
/div
/div
1号框是新闻模块，高度为165像素。
分为上层和下层两种结构，但是两个模块都使用了div。 上面的一个是news-hd，下面的一个是news-bd。
结构代码
div 类=\’新闻\’
div class=\’新闻-高清\’
.
/div
div 类=\’新闻-bd\’
.
/div
/div
样式代码
。消息{
高度： 165 像素；
border: 1px实心#e4e4e4；
}
上面是news-hd，设置高度为33px，设置下边框。
我将h5 放入其中，在标题中放入a 标签，将内容进一步向右浮动，并使用伪元素设置三角形的字体图标。
div class=\’新闻-高清\’
h5产品优购快递/h5
a href=\’#\’ class=\’more\’more/a
/div
样式代码
.新闻-高清{
高度： 33 像素；
行高： 33px；
border-bottom: 1px虚线#e4e4e4;
内边距： 0 15px；
}
.news-hd h5 {
float: 左；
字体大小： 14px；
}
.新闻-高清.更多{
float: 右；
}
.news-hd .more:after {
字体-family: \’图标\’;
content: \’\\e920\’;
}
以下为新闻BD
它包含用于将ul 和li 和li 的高度设置为24 像素以及设置单行文本溢出抑制的链接。
div 类=\’新闻-bd\’
乌尔
lia href=\’#\’strong[重量级]/strong 来来来，粉红先生来了，他是谁？ /一/里
lia href=\’#\’strong[重量级]/strong 来来来，粉红先生来了/a/li
lia href=\’#\’strong[重量级]/strong 来来来，粉红先生来了/a/li
lia href=\’#\’strong[重量级]/strong 来来来，粉红先生来了/a/li
lia href=\’#\’strong[重量级]/strong 来来来，粉红先生来了，他是谁？ /一/里
/ul
/div
样式代码
.新闻-bd {
内边距： 5px 15px 0;
}
.news-bd ul li {
高度： 24 像素；
行高： 24px；
溢出： 隐藏。
空白：narap；
文本溢出：省略号；
}
2号盒子是生活服务模块，高度为209像素。
设置边框（左右下边框），将里面的内容设置为ul 12*li。将li的宽度设置为63px，高度设置为71px。 这样设置好后，设置为浮动。第4个li没有安装并崩溃解决办法是：
lifeservice盒子的宽度是250，但是里面的4个较小的lilifeservice盒子无法安装。可以将lifeservice ul宽度设为252，并放置以下四个lilifeservice小盒子，隐藏多余的部分。在li中，放入i（将图标放在里面），用p标签将后面的文本包围起来，并将i设置为宽度为24像素，高度为28像素（注意i是内联元素，将被转换为内联块）。 -align:center for li，显示结构代码，内部内容居中。
div class=\’生活服务\’
乌尔
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
李
我/我
手机话费/p
/里
/ul
/div
样式代码
.lifeservice {
溢出： 隐藏。
高度： 209 像素；
/* 背景颜色： 紫色*/
border: 1px实心#e4e4e4；
边框顶部： 0;
}
.lifeserviceul {
宽度： 252 像素；
}
.lifeserviceulli{
float: 左；
宽度： 63 像素；
高度： 71 像素；
右边框： 1px实心#e4e4e4；
边框底部： 1px实心#e4e4e4；
文本对齐：居中；
}
.lifeservice ul li i {
display:内联块；
宽度： 24 像素；
高度： 28 像素；
背景颜色：粉色；
边距-top: 12px；
背景： url(./images/icons.png) 无重复-19px -15px;
}
盒子3很便宜
这个比较简单，直接插入结构体代码即可。
div 类=\’讨价还价\’
img src=\’upload/bargain.png\’ alt=\’\’
/div
样式代码
。便宜货{
边距-top: 5px；
}
推荐模块制作 recom
大盒子推荐模块推荐
设置Recom 框的中心、高度163px、背景颜色(#ebebeb) 以及距顶部的距离为12px。
div 类=\’w 推荐\’
.
/div
样式代码
.recom {
高度： 163 像素；
背景颜色： #ebebeb；
边距-top: 12px；
}
有两个盒子，所以只需将它们浮动即可。
结构代码
div 类=\’w 推荐\’
div 类=\’recom_hd\’
.
/div
div 类=\’recom_bd\’
.
/div
/div
框1 recom_hd
将宽度设置为205px，高度设置为163px，将img标签放在里面，然后插入图像。
div 类=\’recom_hd\’
img src=\’images/recom.png\’ alt=\’\’
/div
样式代码
.recom_hd {
float: 左；
高度： 163 像素；
宽度： 205 像素；
背景颜色： #5c5251;
文本对齐：居中；
顶部内边距： 30px；
}
2号框recom_bd，注意里面的小垂直线。
4 将ul 放在包含li 的右侧结构上。每个li包含一个img。使用切片工具直接将其视为li图像。将img的宽度和高度设置为248px。高度163像素。小竖线就是用伪元素来实现的，在每个li后面设置伪元素，设置这个伪元素的绝对位置，设置前10个像素，设置li的相对位置（注意李在最后）。不需要设置伪元素），可以使用nth-child( -n+3){.} 结构体代码
div 类=\’recom_bd\’
乌尔
liimg src=\’上传/recom_03.jpg\’ alt=\’\’/li
liimg src=\’上传/recom_03.jpg\’ alt=\’\’/li
liimg src=\’上传/recom_03.jpg\’ alt=\’\’/li
liimg src=\’上传/recom_03.jpg\’ alt=\’\’/li
/ul
/div
样式代码
.recom_bd {
float: 左；
}
.recom_bd ul li {
相对位置：
float: 左；
}
.recom_bd ul li img {
宽度： 248 像素；
高度： 163 像素；
}
.recom_bd ul li:nth-child(-n+3):after {
内容：\’\’；
绝对位置：
右： 0;
顶部： 10 像素；
宽度： 1 像素；
高度： 145 像素；
背景颜色： #ddd;
}
家用电器模块
请注意这一层。它要多少钱？
一楼是家电模块：包含两个盒子
box_hd 制作
1号框box_hd具有指定的高度、下边框，并分为左、右两个框。
box_hd 将左侧h3 框和右侧div 框放置在2px 底部边框上，左侧框向左浮动，右侧框向右浮动。 a标签的距离可以通过左右填充来扩展以结构化代码。
div 类=\’box_hd\’
h3家电/h3
div 类=\’tab_list\’
乌尔
li a href=\’#\’ class=\’style_red\’popular/a|/li
lia href=\’#\’主要电器/a|/li
lia href=\’#\’家电/a|/li
lia href=\’#\’厨房电器/a|/li
lia href=\’#\’家电/a|/li
lia href=\’#\’个人护理与健康/a|/li
lia href=\’#\’季节性家电/a|/li
lia href=\’#\’空气/纯净水/a|/li
lia href=\’#\’新颖独特/a|/li
lia href=\’#\’ 豪华家电/a/li
/ul
/div
/div
样式代码
.box_hd {
高度： 30 像素；
边框底部： 2px实心#c81623；
}
.box_hd h3 {
float: 左；
字体大小： 18px；
颜色： #c81623;
字体粗细
: 400;
}
.tab_list {
float: right;
line-height: 30px;
}
.tab_list ul li {
float: left;
}
.tab_list ul li a {
margin: 0 15px;
}
box_bd 制作
2 号盒子 box_bd，不要给高度
box_bd 属于是tab栏的内容区域，所以在这个里面先嵌套一个盒子 tab_content，在tab_content 里面包裹tab选项卡对应的内容内容被一个大盒子包裹（tab_list_item），里面是 ul 包裹 5个 li，每个li设置对应的宽度，然后设置浮动而这5个li的宽度是不一致的，在这里我们的做法是 先把宽度的样式列出来，然后给对应的li设置
第一个小 li 分为上下结构，上面是 ul 包裹 li ，li里面包裹 a，下面插入一张图片上面的li设置宽高，设置浮动，这样就排列下来了后面的小 li 里面先放一个a标签，然后在a标签里面插入图片即可 结构代码
<div class=\”box_bd\”>
<div class=\”tab_content\”>
<div class=\”tab_list_item\”>
<div class=\”col_210\”>
<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>
</ul>
<a href=\”#\”>
<img src=\”upload/floor-1-1.png\” alt=\”\”>
</a>
</div>
<div class=\”col_329\”>
<a href=\”#\”>
<img src=\”upload/floor-1-b01.png\” alt=\”\”>
</a>
</div>
<div class=\”col_221\”>
<a href=\”#\” class=\”bb\”> <img src=\”upload/floor-1-2.png\” alt=\”\”></a>
<a href=\”#\”> <img src=\”upload/floor-1-3.png\” alt=\”\”></a>
</div>
<div class=\”col_221\”>
<a href=\”#\”> <img src=\”upload/floor-1-4.png\” alt=\”\”></a>
</div>
<div class=\”col_219\”>
<a href=\”#\” class=\”bb\”> <img src=\”upload/floor-1-5.png\” alt=\”\”></a>
<a href=\”#\”> <img src=\”upload/floor-1-6.png\” alt=\”\”></a>
</div>
</div>
</div>
</div>
样式代码
.box_bd {
height: 361px;
}
.tab_list_item>div {
float: left;
height: 361px;
}
.col_210 {
width: 210px;
background-color: #f9f9f9;
text-align: center;
}
.col_210 ul li {
float: left;
width: 85px;
height: 34px;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 33px;
margin-right: 10px;
}
.col_210 ul {
padding-left: 12px;
}
.col_329 {
width: 329px;
}
.col_221 {
width: 221px;
border-right: 1px solid #ccc;
}
.col_219 {
width: 219px;
}
.bb {
/* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
display: block;
border-bottom: 1px solid #ccc;
}
tab栏切换需求
tab栏的布局是 ul > li > a有多少个tab选项卡，那么对应就有多少个内容但是每一次只会显示一个内容块，其他内容进行的隐藏等后面我们学习了js之后，我们就会配合js来实现，tab栏的切换
列表制作（★★★）
品优购列表页制作准备工作
列表页面是新的页面，我们需要新建页面文件 list.html因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来头部和底部的样式也需要，因此 list.html 中还需要引入 common.css需要新的 list.css 样式文件，这是列表页专门的样式文件
列表页 header 和 nav 修改
秒杀盒子 sk（ second kill ） 定位即可
结构代码
<header class=\”header w\”>
<!– logo模块 –>
…
<!– 列表页的秒杀模块 –>
<div class=\”sk\”>
<img src=\”images/sk.png\” alt=\”\”>
</div>
<!– search搜索模块 –>
…
<!– hotwords模块制作 –>
…
<!– 购物车模块 –>
…
</header>
样式代码
.sk {
position: absolute;
left: 190px;
top: 40px;
border-left: 1px solid #c81523;
padding: 3px 0 0 14px;
}
1 号盒子左侧浮动 sk_list 里面包含 ul 和 li2 号盒子左侧浮动 sk_con 里面包含 ul 和 li
结构代码
<!– nav模块制作 start –>
<nav class=\”nav\”>
<div class=\”w\”>
<div class=\”sk_list\”>
<ul>
<li><a href=\”#\”>品优秒杀</a></li>
<li><a href=\”#\”>品优秒杀</a></li>
<li><a href=\”#\”>品优秒杀</a></li>
</ul>
</div>
<div class=\”sk_con\”>
<ul>
<li><a href=\”#\”>女装</a></li>
<li><a href=\”#\” class=\”style_red\”>女鞋</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>
</div>
</nav>
样式代码
.sk_list {
float: left;
}
.sk_list ul li {
float: left;
}
.sk_list ul li a {
display: block;
line-height: 47px;
padding: 0 30px;
font-size: 16px;
font-weight: 700;
color: #000;
}
.sk_con {
float: left;
}
.sk_con ul li {
float: left;
}
.sk_con ul li a {
display: block;
line-height: 49px;
padding: 0 20px;
font-size: 14px;
}
.sk_con ul li:last-child a::after {
content: \’\\e91e\’;
font-family: \’icomoon\’;
}
列表页主体 sk_container
1 号盒子 sk_container 给宽度 1200，不要给高度
结构代码
<!– 列表页主体部分 –>
<div class=\”w sk_container\”>
<div class=\”sk_hd\”>
…
</div>
<div class=\”sk_bd\”>
…
</div>
</div>
sk_hd 制作
2 号盒子 sk_hd ，插入图片即可
结构代码
<div class=\”sk_hd\”>
<img src=\”upload/bg_03.png\” alt=\”\”>
</div>
sk_bd 制作
3 号盒子 sk_bd ，里面包含很多的 ul 和 li
当鼠标移入到 li 上面的时候显示红色的边框，在这里先给 li 设置透明的边框，当鼠标移入的时候 设置为红色即可由于给每个 li 都设置了外边距，导致一行的最后一个 li 掉了下来，在这里我们利用 nth-child(4n) 来选择出来每一行最后一个 li，去掉外边距就好了
结构代码
<div class=\”sk_bd\”>
<ul class=\”clearfix\”>
<li>
<img src=\”upload/list.jpg\” alt=\”\”>
</li>
<li>
<img src=\”upload/list.jpg\” alt=\”\”>
</li>
<li>
<img src=\”upload/list.jpg\” alt=\”\”>
</li>
<li>
<img src=\”upload/list.jpg\” alt=\”\”>
</li>
<li>
<img src=\”upload/list.jpg\” alt=\”\”>
</li>
<li>
<img src=\”upload/list.jpg\” alt=\”\”>
</li>
<li>
<img src=\”upload/list.jpg\” alt=\”\”>
</li>
<li>
<img src=\”upload/list.jpg\” alt=\”\”>
</li>
<li>
<img src=\”upload/list.jpg\” alt=\”\”>
</li>
</ul>
</div>
样式代码
.sk_bd ul li {
overflow: hidden;
float: left;
margin-right: 13px;
width: 290px;
height: 460px;
border: 1px solid transparent;
}
.sk_bd ul li:nth-child(4n) {
margin-right: 0;
}
.sk_bd ul li:hover {
border: 1px solid #c81523;
}
注册页面（★★★）
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化
准备工作
创建register.html，引入 base.css，引入favicon图标创建register.css ，在html页面进行引入
header 头部实现
整个内容用 版心 进行包裹第一个头部区域怎么简单怎么来，用一个header盒子包裹链接，链接里面放图片即可
结构代码
<header>
<div class=\”logo\”>
<a href=\”index.html\”> <img src=\”images/logo.png\” alt=\”\”></a>
</div>
</header>
样式代码
.w {
width: 1200px;
margin: 0 auto;
}
header {
height: 84px;
border-bottom: 2px solid #c81523;
}
.logo {
padding-top: 18px;
}
registerarea 主体模块实现
整个大盒子 高度为 522px，设置4个边框
结构代码
<div class=\”registerarea\”>
…
</div>
样式代码
.registerarea {
height: 522px;
border: 1px solid #ccc;
margin-top: 20px;
}
1号盒子 是一个 h3 标签，放标题
里面放 注册新用户 的文字，然后包一个 div的标签，让div标签右浮动 结构代码
<h3>注册新用户
<div class=\”login\”>我有账号，去<a href=\”#\”>登陆</a></div>
</h3>
样式代码
.registerarea h3 {
height: 42px;
border-bottom: 1px solid #ccc;
background-color: #ececec;
line-height: 42px;
padding: 0 10px;
font-size: 18px;
font-weight: 400;
}
.login {
float: right;
font-size: 14px;
}
.login a {
color: #c81523;
}
2号盒子 里面放注册的内容
先用一个盒子，把整个内容包裹起来，设置盒子宽度（600px），让这个盒子距上边50px，水平居中显示
里面的内容利用 ul 包含 li 来实现的（不需要用表格）
每个 li 里面，左侧放 label 标签， 中间放input 标签， 右侧放 span 提示信息
左侧 label里面的文字都是右对齐，我们可以给label设置一个宽度（88px），然后利用text-align 来设置右对齐
input 表单设置 宽度 242px，高度 37px，设置边框
右侧 span修饰一下文字颜色
提示信息的样式优化
定义一个 错误的样式，定义一个 正确的样式，然后给对应的盒子设置类名
在span里面放一个小盒子，这个小盒子用来显示 图标的，设置一下宽高 （20×20）
插入图片了之后，默认与文字是基线对齐，通过 vertical-algin 来设置 图片与文字对齐方式
安装程度的布局，在第4个小 li 里面放 三个盒子，分别放 弱、中、强
设置 em 的 左右 12px 的内边距，设置一下文字颜色分别设置 背景颜色 同意协议 和 完成注册 都是用 li 进行包裹
结构代码
<div class=\”reg_form\”>
<form action=\”\”>
<ul>
<li><label for=\”\”>手机号：</label> <input type=\”text\” class=\”inp\”>
<span class=\”error\”> <i class=\”error_icon\”></i> 手机号码格式不正确，请从新输入 </span></li>
<li><label for=\”\”>短信验证码：</label> <input type=\”text\” class=\”inp\”>
<span class=\”success\”> <i class=\”success_icon\”></i> 短信验证码输入正确 </span></li>
<li><label for=\”\”>登录密码：</label> <input type=\”password\” class=\”inp\”>
<span class=\”error\”> <i class=\”error_icon\”></i> 手机号码格式不正确，请从新输入 </span></li>
<li class=\”safe\”>安全程度 <em class=\”ruo\”>弱</em> <em class=\”zhong\”>中</em> <em class=\”qiang\”>强</em> </li>
<li><label for=\”\”>确认密码：</label> <input type=\”password\” class=\”inp\”>
<span class=\”error\”> <i class=\”error_icon\”></i> 手机号码格式不正确，请从新输入 </span></li>
<li class=\”agree\”><input type=\”checkbox\” name=\”\” id=\”\”>
同意协议并注册 <a href=\”#\”>《知晓用户协议》</a>
</li>
<li>
<input type=\”submit\” value=\”完成注册\” class=\”btn\”>
</li>
</ul>
</form>
</div>
样式代码
.reg_form {
width: 600px;
margin: 50px auto 0;
}
.reg_form ul li {
margin-bottom: 20px;
}
.reg_form ul li label {
display: inline-block;
width: 88px;
text-align: right;
}
.reg_form ul li .inp {
width: 242px;
height: 37px;
border: 1px solid #ccc;
}
.error {
color: #c81523;
}
.error_icon,
.success_icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: url(../images/error.png) no-repeat;
margin-top: -2px;
}
.success {
color: green;
}
.success_icon {
background: url(../images/success.png) no-repeat;
}
.safe {
padding-left: 170px;
}
.safe em {
padding: 0 12px;
color: #fff;
}
.ruo {
background-color: #de1111;
}
.zhong {
background-color: #40b83f;
}
.qiang {
background-color: #f79100;
}
.agree {
padding-left: 95px;
}
.agree input {
vertical-align: middle;
}
.agree a {
color: #1ba1e6;
}
.btn {
width: 200px;
height: 34px;
background-color: #c81623;
font-size: 14px;
color: #fff;
margin: 30px 0 0 70px;
}
底部实现
结构代码
<footer>
<div class=\”mod_copyright\”>
<div class=\”links\”>
<a href=\”#\”>关于我们</a> | <a href=\”#\”>联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
品优购公益 | English Site | Contact U
</div>
<div class=\”copyright\”>
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</div>
</div>
</footer>
样式代码
.mod_copyright {
text-align: center;
padding-top: 20px;
}
.links {
margin-bottom: 15px;
}
.links a {
margin: 0 3px;
}
.copyright {
line-height: 20px;
}
Web服务器
把自己网站上传到服务器上，可以让其他人访问
什么是Web服务器
我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。
如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了
服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。
Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
以下服务器我们主要指的是Web服务器。
根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。
本地服务器
我们可以把自己的电脑设置为本地服务器， 这样同一个局域网内的同学就可以访问你的品优购网站了。 就业班学ajax的时候，再进行讲解
远程服务器
本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。
远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。
比如域名： www.mi.com 可以访问小米网站
小结
服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器服务器可以分为本地服务器和远程服务器远程服务器是别的公司为我们提供了一台计算机。我们可以把网站上传到远程服务器里面， 别人就可以通过域名访问我们的网站了
将自己的网站上传到远程服务器（★★★）
注意：一般稳定的服务器都是需要收费的。 比如：阿里云
这里给大家推荐一个免费的远程服务器（免费空间） http://free.3v.do/
去免费空间网站注册账号。记录下主机名、用户名、密码、域名。利用 utftp 软件 上传网站到远程服务器在浏览器中输入域名，即可访问我们的品优购网站了
#以上关于品优购PC项目学习详解二的相关内容来源网络仅供参考，相关信息请以官方公告为准！
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92587.html
