【前端】CSS（十一）PC端品优购项目（下）

1. 品优购列表页制作

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

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

1.2 列表页 header 和 nav 修改

 秒杀盒子 sk（ second kill ） 定位即可
 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li

1.3 列表页主体 sk _container

1 号盒子 sk _container 给宽度 1200，不要给高度
2 号盒子 sk_hd ，插入图片即可
3 号盒子 sk_bd ，里面包含很多的 ul 和 li

2. 品优购注册页制作

2.1 注册页类名命名

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

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

2.2 注册页布局

2.3 registerarea 布局

3. Web 服务器

3.1 什么是Web服务器

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

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

3.2 本地服务器

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

3.3 远程服务器

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

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 有很大的帮助。