JavaWeb页面初体验 - 码农知识堂 - 文章详情页

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

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

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

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

1.css选择器

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

（我全都用了class噢）

2.角落自适应
图片位置自适应，比如我的页面中四个角分别插入了四张png图片，他们的定位，我是这样子实现的，这样子设置，即使拖拉页面大小，图片也能跟着自适应位置。
```
...
<head>
 
    ...
 
    <style type="text/css">
 
        ...
 
        .leftTop{
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
        }
        .rightBottom{
            position:absolute;
            right:0px;bottom:0px;
        }
        .rightTop{
            position:absolute;
            right:0px;top:0px;
        }
        .leftBottom{
            position: absolute;
            left: 0; bottom: 0;
        }
 
    </style>
</head>
 
...
 
<img class = "leftTop" src="flirty.png">
<img class = "rightBottom" src="baby.png">
<img class = "rightTop" src="dead-2.png">
<img class = "leftBottom" src="flirt.png">
 
...
 
</body>
</html>
```
效果展示
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

想要本页面源代码的可以私信我😁
相关阅读:
2023.09.09青少年软件编程（Python）等级考试试卷（五级）
Linux部署elk日志监控系统
 JAVA计算机毕业设计宠物购物系统Mybatis+系统+数据库+调试部署
 重装系统后没声音如何解决
 阿里云服务器全方位介绍_优势_使用场景_限制说明
 OBS Studio免费开源录屏工具
 ChatGPT和文心一言的优缺点比较
 一块RTX 3090加速训练YOLOv5s，时间减少11个小时，速度提升20%
还是得从代码角度看yolov5（1）
云原生--kubernetes二
原文地址：https://blog.csdn.net/m0_62742402/article/details/125603911