初学JAVA项目（八、Ada银行-1）

---

前言

本次项目学习目标：
主要通过以项目为导向学习web前端技术HTML、css等内容

---

一、Ada银行-1

电子银行前端门户，初代网络钓鱼项目，直到今天依旧流行的“技术”

截图：

二、项目完成后的一些思考

1.什么是伪类选择器？

     伪类:同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

伪类分为静态伪类伪类选择器 和 动态伪类伪类选择器分为两种。

(1)静态伪类:只能用于超链接的样式。如下:

:link 超链接点击之前:visited 链接被访问过之后（PS:以上两种样式，只能用于超链接。）

(2)动态伪类:针对所有标签都适用的样式。如下:

:hover“悬停”: 代表鼠标悬停放到标签上的时候所展示的样式
:active “激活”:代表鼠标点击标签后但没有松手时所展示的样式。
:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)
PS:以上三种样式，只能用于超链接。

超链接a标签超链接的四种状态a标签有4种伪类(即对应四种状态)。如下:

:link “链接”:超链接点击之前
:visited “访问过的”:链接被访问过之后
:hover “悬停”:鼠标放到标签上的时候
:active “激活”: 鼠标点击标签，但是不松手时

最新CSS3中新增了很多选择器，其中就包括许多伪类选择器，具体使用可以查看w3school。

css3选择器：https://www.w3school.com.cn/cssref/css_selectors.asp

2.什么是响应式设计网页

     （1）根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。

     （2）说白了就是自适应，因为随着移动设备等各式各样的屏幕尺寸问世，对于不同的设备不同尺寸、分辨率有不同的展示需求，但是如果不考虑自适应的话写一套网页需要区分pc(电脑)、app（移动）、ipod等不同的展示需要，因为需要根据不同的尺寸适配写内容一样但是分辨率不一样的网页，这时候就体现响应式设计网页的作用了，一套网页适配不同的设备，维护成本也低。

      （3）CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。

1. 小于500像素时，背景颜色为黄色
2. 处于500像素-800像素时，背景颜色显示为蓝色
3. 大于800像素时，背景颜色显示为红色

3.待续…