JavaWeb页面初体验

今天下午画了两个小时为JavaWeb项目开了个头——画了个登录界面

发现相比起那个JavaFX，这个真的友好多了

感觉过程中比较麻烦的是各个标签的定位问题

下面就记录一下这次绘制页面用到的一些杂七杂八的知识点

---

1.css选择器 

四种选择器中Class类型选择器是项目开发中最常用的，所以一般首选设置class选择器。

 

（我全都用了class噢）

---

 2.角落自适应

图片位置自适应，比如我的页面中四个角分别插入了四张png图片，他们的定位，我是这样子实现的，这样子设置，即使拖拉页面大小，图片也能跟着自适应位置。

...


    ...

    


...






...

效果展示

  

---

3.渐变色 

这个学会了就非常炫酷，我是用一个宝藏软件ColorSpace自动生成的，就反正非常好用！！

ColorSpace - Color Palettes Generator and Color Gradient Tool (mycolor.space)https://mycolor.space/

 另外，或许有些小伙伴没有注意，颜色是可以直接点这里调节的（如下图）

---

4. 加阴影效果 

overflow: hidden;
box-shadow: 0 10px 20px #8d7272;
            //各方向阴影像素格 阴影颜色

效果如我放出来的效果图，能看出来嘛，中间模块底下的深红色阴影  

---

 5.圆角设置 

 border-radius: 25px;//圆角程度

(你想让哪个圆角就放哪里去，比如模块和按钮...)

6.模块居中 

学会这几种方法css居中很简单_w3cschoolhttps://www.w3cschool.cn/css/css-center.html

这里我是参考了以上文章中的以下这一部分：

7. margin

要学会利用margin属性调整各元素位置

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

如果全部都写分别是上边距，右边距，下边距，左边距。

具体的margin的用法官方文档中讲的很清楚

CSS margin 属性 (w3school.com.cn)https://www.w3school.com.cn/cssref/pr_margin.asp

 想要本页面源代码的可以私信我