初学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-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
- 小于500像素时,背景颜色为黄色
- 处于500像素-800像素时,背景颜色显示为蓝色
- 大于800像素时,背景颜色显示为红色