PC端品优购项目（详细思路+代码实现）

小董爱敲代码️

已于 2024-06-14 20:02:00 修改

阅读量1.2k

点赞数 41

分类专栏：前端知识点文章标签：前端 css css3 html5 javascript

于 2024-06-12 10:48:49 首次发布

本文链接：https://blog.csdn.net/GaoshangD1209/article/details/139601573

版权

前端知识点专栏收录该内容

26 篇文章 0 订阅

订阅专栏

品优购项目规划

1. 网站制作流程

2. 品优购项目整体介绍

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

3. 品优购项目的学习目的

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

4. 开发工具以及技术栈

开发工具🔧：VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）
技术栈：
- 利用HTML5 + CSS3 手动布局，可以大量使用H5 新增标签和样式
- 采取结构与样式相分离，模块化开发
- 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。（详情见素材文件夹---品优购代码规范.md）

5. 品优购项目搭建工作

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

名称	说明
项目文件夹	shoping
样式类图片文件夹	images
样式文件夹	css
产品类图片文件夹	upload
字体类文件夹	fonts
脚本文件夹	js

需要创建如下文件：
名称说明
首页 index.html
CSS初始化样式文件 base.css
CSS公共样式文件 common.css

名称	说明
首页	index.html
CSS初始化样式文件	base.css
CSS公共样式文件	common.css

有些网站初始化的不太提倡 * { margin: 0; padding: 0; }
模块化开发：
- 将一个项目按照功能划分，一个功能一个模块，互不影响模块化开发具有重复使用、更换方便等优点

代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用
这里最典型的应用就是common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式
模块化开发具有重复使用、修改方便等优点

6. 网站favicon图标

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

制作favicon图标
- 把品优购图标切成png图片。
- 把png图片转换为ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
favicon图标放到网站根目录下

HTML页面引入favicon图标
- 在html页面里面的<head></head>元素之间引入代码。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

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

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

title 网站标题
- title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
- 建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）
description 网站说明
- 简要说明我们网站主要是做什么的。
- 提倡：description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。
- 例如：<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
keywords 关键字
- keywords 是页面关键词，是搜索引擎的关注点之一。
- keywords 最好限制为6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式。
- 例如：<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

品优购首页制作

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

1. 常用模块类名命名

可以直接使用一下类名

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

2. 快捷导航shortcut制作

通栏的盒子命名为shortcut，是快捷导航的意思。注意这里的行高，可以继承给里面的子盒子
里面包含版心的盒子
版心盒子里面包含1号左侧盒子左浮动
版心盒子里面包含2号右侧盒子右浮动
需要用到字体图标

3. header制作

header盒子必须要有高度
1 号盒子是logo 标志定位
2 号盒子是search 搜索模块定位
3 号盒子是hotwords 热词模块定位
4 号盒子是shopcar购物车模块
- count 统计部分用绝对定位做
- count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
- 一定注意左下角不是圆角，其余三个是圆角写法：border-radius: 7px 7px 7px 0;
LOGO SEO优化
- logo 里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
- h1 里面再放一个链接，可以返回首页的，把logo 的背景图片给链接即可。
- 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。
  - 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后overflow:hidden，淘宝的做法。
  - 方法2：直接给font-size: 0;就看不到文字了，京东的做法。
- 最后给链接一个title属性，这样鼠标放到logo 上就可以看到提示文字了。

4. nav导航制作

nav盒子通栏有高度，而且有个下边框
1号盒子左侧浮动，dropdown
2号盒子左侧浮动，navitems导航栏组
1号盒子有讲究，根据相关性里面包含.dt和.dd两个盒子

5. footer底部制作

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

6. main主体模块制作

main主体模块是index 里面专有的，注意需要新的样式文件index.css。
main 盒子宽度为980 像素，位置距离左边220px (margin-left )，给高度就不用清除浮动
main 里面包含左侧盒子，左浮动，focus焦点图模块
main 里面包含右侧盒子，右浮动，newsflash新闻快报模块

main主体模块代码实现：

<div class="w">
    <div class="main">
        <div class="focus">
            ...
        </div>
        <div class="newsflash">
            ...
        </div>
    </div>
</div>

.main {
    width: 980px;
    height: 455px;
    margin-left: 220px;
    margin-top: 10px;
}
.focus {
    float: left;
    width: 721px;
    height: 455px;
    background-color: purple;
}
.newsflash {
    float: right;
    width: 250px;
    height: 455px;
}

左侧 focus 模块代码实现：

<div class="focus fl">
	<a href="#" class="arrow-l"> < </a>
	<a href="#" class="arrow-r"> > </a>
	<ul>
		<li>
		  <a href="#"><img src="upload/focus.jpg" alt=""></a>
		</li>
	</ul>
	<ol class="circle">
		<li></li>
		<li class="current"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>

.arrow-l,
.arrow-r {
	position: absolute;
	top: 50%;
	margin-top: -20px;
	width: 24px;
	height: 40px;
	background: rgba(0, 0, 0, .3);
	text-align: center;
	line-height: 40px;
	color: #fff;
	font-family: 'icomoon';
	font-size: 18px;
}
.arrow-r {
	right: 0;
}

.circle {
	position: absolute;
	bottom: 10px;
	left: 50px;
}
.circle li {
	float: left;
	width: 8px;
	height: 8px;
	/*background-color: #fff;*/
	border: 2px solid rgba(255, 255, 255, 0.5);
	margin: 0 3px;
	border-radius: 50%;
	/*鼠标经过显示小手*/
	cursor: pointer;

}
.current {
	background-color: #fff;
	box-shadow: 
}

右侧newsflash模块代码实现：

<div class="newsflash">
    <div class="news">
        ...
    </div>
    <div class="lifeservice">
        ...
    </div>
    <div class="bargain">
        ...
    </div>
</div>

<div class="news">
    <div class="news-hd">
        ...
    </div>
    <div class="news-bd">
        ...
    </div>
</div>

<div class="news-hd">
    <h5>品优购快报</h5>
    <a href="#" class="more">更多</a>
</div>

<div class="news-bd">
    <ul>
        <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li>
        <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
        <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
        <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
        <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li>
    </ul>
</div>

<div class="lifeservice">
    <ul>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
    </ul>
</div>

<div class="bargain">
    <img src="upload/bargain.png" alt="">
</div>

.news {
   height: 165px;
   border: 1px solid #e4e4e4;
}
.news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
.news-hd h5 {
    float: left;
    font-size: 14px;
}
.news-hd .more {
    float: right;
}
.news-hd .more::after {
    font-family: 'icomoon';
    content: '\e920';
}
.news-bd {
    padding: 5px 15px 0;
}
.news-bd ul li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lifeservice {
    overflow: hidden;
    height: 209px;
    /* background-color: purple; */
    border: 1px solid #e4e4e4;
    border-top: 0;
}
.lifeservice ul {
    width: 252px;
}
.lifeservice ul li {
    float: left;
    width: 63px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    text-align: center;
}
.lifeservice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    background-color: pink;
    margin-top: 12px;
    background: url(../images/icons.png) no-repeat -19px -15px;
}
.bargain {
    margin-top: 5px;
}

7. 推荐模块制作

大盒子recom 推荐模块recommend
里面包含2个盒子，浮动即可
1号盒子recom_hd
2号盒子recom_bd，注意里面的小竖线
推荐模块实现代码：

<div class="w recom">
    ...
</div>

 <div class="w recom">
    <div class="recom_hd">
        ...
    </div>
    <div class="recom_bd">
        ...
    </div>
</div>

<div class="recom_hd">
    <img src="images/recom.png" alt="">
</div>

<div class="recom_bd">
    <ul>
        <li><img src="upload/recom_03.jpg" alt=""></li>
        <li><img src="upload/recom_03.jpg" alt=""></li>
        <li><img src="upload/recom_03.jpg" alt=""></li>
        <li><img src="upload/recom_03.jpg" alt=""></li>
    </ul>
</div>

.recom {
    height: 163px;
    background-color: #ebebeb;
    margin-top: 12px;
}

.recom_hd {
    float: left;
    height: 163px;
    width: 205px;
    background-color: #5c5251;
    text-align: center;
    padding-top: 30px;
}

.recom_bd {
    float: left;
}
.recom_bd ul li {
    position: relative;
    float: left;
}
.recom_bd ul li img {
    width: 248px;
    height: 163px;
}
.recom_bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

8. 楼层区floor制作

第一楼是家用电器模块：里面包含两个盒子
- 1号盒子box_hd，给一个高度，有个下边框，里面分为左右2个盒子
- 2号盒子box_bd，不要给高度

box_hd模块
- 有高度可以不用清除浮动
- 左边h3，盒子左浮动
- 右边tab_list，右浮动，因为用到tab 切换效果，所以里面要用ul和li来做
- box_hd模块代码实现：

<div class="box_hd">
    <h3>家用电器</h3>
    <div class="tab_list">
        <ul>
            <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>
            <li><a href="#">新奇特</a>|</li>
            <li><a href="#"> 高端电器</a></li>
        </ul>
    </div>
</div>

.box_hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
}
.box_hd  h3 {
    float: left;
    font-size: 18px;
    color: #c81623;
    font-weight: 400;
}
.tab_list {
    float: right;
    line-height: 30px;
}
.tab_list ul li {
    float: left;
}
.tab_list ul li a {
    margin: 0 15px;
}

Tab栏原理-布局需求
- 要求选项卡个数要内容个数一致。

box_bd模块
- 根据tab 切换的原理，tab_content 里面包含内容部分。这个内容可以通过ul布局
- 分为5 个大列，列的宽度不一致
- box_bd模块代码实现：

<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;
}

品优购列表页制作

1. 品优购列表制作准备工作

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

2. 列表页header和nav修改

秒杀盒子sk（secondkill）定位即可
1 号盒子左侧浮动sk_list 里面包含ul 和li
2 号盒子左侧浮动sk_con 里面包含ul 和li
列表页header和nav修改代码实现：

<header class="header w">
     <!-- logo模块 -->
     ...
     <!-- 列表页的秒杀模块 -->
     <div class="sk">
         <img src="images/sk.png" alt="">
     </div>
     <!-- search搜索模块 -->
     ...
     <!-- hotwords模块制作 -->
     ...
     <!-- 购物车模块 -->
     ...
 </header>

<!-- 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 {
    position: absolute;
    left: 190px;
    top: 40px;
    border-left: 1px solid #c81523;
    padding: 3px 0 0  14px;
}
.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';
}

3. 列表页主体sk_container

1号盒子sk _container 给宽度1200，不要给高度
2号盒子sk_hd，插入图片即可
3号盒子sk_bd，里面包含很多的ul 和li
列表页主体sk_container代码实现：

<!-- 列表页主体部分 -->
<div class="w sk_container">
    <div class="sk_hd">
        ...
    </div>
    <div class="sk_bd">
        ...
    </div>
</div>

<div class="sk_hd">
    <img src="upload/bg_03.png" alt="">
</div>

<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;
}

品优购注册页制作

1. 注册页类名命名

注册页面：register.html
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。
名称说明
注册专区 registerarea
注册内容 reg-form
错误的 error
成功的 success
默认的 default

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

2. 注册页布局

注册页代码实现：

<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;
}

3. registerarea布局

registerarea主体模块代码实现：

<div class="registerarea">
   ...
</div>

<h3>注册新用户
    <div class="login">我有账号，去<a href="#">登陆</a></div>
</h3>

<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>

.registerarea {
    height: 522px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.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;
}

.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;
}

Web服务器

1. 什么是Web服务器

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

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

2. 本地服务器

我们可以把自己的电脑设置为本地服务器，这样同一个局域网内的人就可以访问你的网站了。

3. 远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把网站上传到远程服务器。
远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。
总结：
- 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器
- 服务器可以分为本地服务器和远程服务器
- 远程服务器是别的公司为我们提供了一台计算机。
- 我们可以把网站上传到远程服务器里面，别人就可以通过域名访问我们的网站了。

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

注意：一般稳定的服务器都是需要收费的。比如：阿里云
一个免费的远程服务器（免费空间）：http://free.3v.do/
- 去免费空间网站注册账号。
- 记录下主机名、用户名、密码、域名。
- 利用cutftp软件上传网站到远程服务器。
- 在浏览器中输入域名，即可访问我们的品优购网站了。

小董爱敲代码️

关注

41
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
PC端品优购项目（详细思路+代码实现）

项目名称：品优购项目描述：品优购是一个电商网站，我们要完成PC 端首页、列表页、注册页面的制作我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了。服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。Web 服务器一般指网站服务器。
复制链接

扫一扫