JavaEE之CSS②（前端）

已于 2022-10-28 18:15:01 修改
阅读量1.2k 收藏 9
点赞数 13
文章标签： 前端 http css
于 2022-10-28 18:14:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58437435/article/details/127540322
版权

文章目录

学习前端,和学习C/Java类似,都是需要经常查文档的~
查文档的时候,前端的文档,推荐MDN文档~

一、常用元素属性

介绍一些常用的属性

1.字体属性

  1. 设置字体
    计算机里有很多种字体
  • 使用font-family设置字体
    在这里插入图片描述
    要保证当前电脑上以及有了对应的这个字体~
  • 使用font-weight设置字体的粗细~
    值是100-900的整数(整100)
    数字越大,字体就越粗
    在这里插入图片描述

可以通过css设置文字的大小和粗细,达到和h1标签类似的效果

2.文本样式

① 文本颜色

color 这里可以写的值有多种写法
1.直接写单词 red,green,yellow,blue
2. 写成rgb/rgba 形式 a是透明度~
3. 写成# 十六进制数字

rgb:计算机表示颜色的基本方式

R :red
G :green
B : blue

  1. 之前已经介绍过了,直接写单词就可以

  2. 写成rgb/rgba形式
    色光三原色,其他的各种颜色都是由这三原色来混合构成的!
    计算机就是通过三原色的组合,来表示各种颜色的
    "像素"每个光点都可以表达一种颜色(表达的颜色就是通过RGB来构成的)
    计算机中典型的表示方式,使用一个字节表示R,使用一个字节表示G,使用一个字节表示B,每种颜色的取值范围0-255,合在一起,颜色的取值种类就非常非常多了
    在这里插入图片描述
    rgba里面的a是透明度:
    在这里插入图片描述

  3. #十六进制数字
    6个十六进制位
    两个两个依次对应rgb中的三个数字
    在这里插入图片描述
    针对十六进制的表示方式,是可以有缩写形式的!
    形如#AABBCC => #ABC
    在这里插入图片描述
    每个分量的两个数字都是一样的时候,就可以把六位数字缩写成三位数字~
    #AABCDD则不能缩写! (务必要保证三个分量的数字都可以缩写才能缩写)

此处的颜色表示规则,不仅仅是在color属性中如此,在其他的CSS的和颜色像刚刚的属性中,也都是如此!
在这里插入图片描述

②文本对齐

默认网页上的文字是左对齐
有的时候还需要 居中对齐(例如文章的标题) 或者右对齐(例如落款

使用text-align进行设置~

  • 居中对齐:
    在这里插入图片描述

  • 左对齐:
    在这里插入图片描述

③文本装饰

text-decoration给文字加上 下划线,上划线,删除线

  • 下划线 : text-decoration: under-line
    在这里插入图片描述

  • 上划线 :text-decoration: overline
    在这里插入图片描述

  • 删除线: text-decoration: line-through
    在这里插入图片描述
    此处下划线的颜色和文本颜色是一样的,如果想让文字和下划线颜色不同, 需要使用边框来模拟下划线

  • 给链接去掉下划线 : text-decoration: none
    在这里插入图片描述

④文本缩进

text-indent文本缩进,能够控制一段话的首行,自由缩进
要想精准控制缩进两个字的效果,就需要知道一个文字是多大
在这里插入图片描述

1em就和一个文字的尺寸一样
2em就是两个字,0.5em就是半个字

⑤行高

line-height = 文字大小 + 行间距
在这里插入图片描述

3.背景属性

①设置背景颜色

使用background-color 设置背景颜色,颜色取值的表示方式,和color属性完全相同
在这里插入图片描述

②设置背景图片

  • 还可使用background-image 设置背景图片
    设置上背景图片之后,默认是"平铺"的
    在这里插入图片描述

  • 使用background - repeat 控制背景图的平铺~
    在这里插入图片描述

  • 使用background-position 来设置背景图的位置
    在这里插入图片描述

  • 使用 background-size来设置背景图片大小
    background-size: contain 保证图片能完整显示的基础上尽可能填满div
    background-size: cover 尽可能拉伸
    以上都是让图片尽可能变大,适应div的尺寸~

❓如何让图片的大小跟着浏览器的宽度和高度改变?

先把background-size设置成contain,然后再让div能够和窗口大小一样大即可!
在这里插入图片描述

③圆角矩形

html元素默认是矩形,四个角都是90°直角,直角不好看,所以经常用到圆角的矩形

border-radius: 10px;想象在矩形的角角里面有个内切圆,半径为10px
在这里插入图片描述

10px描述内切圆的半径,半径越大,此时角的弧线就越弯

❗ 有了圆角矩形,就可以生成圆形!!
首先要先有个正方形,然后设置圆角矩形的半径是正方形边长的一半,此时就是一个正圆形
在这里插入图片描述

二、元素的显示模式

1.块级元素行内元素

独占一行的:块级元素 div h1-h6,p.table,tr…
不独占一行的: 行内元素 span,a,u,b,strong…

可以使用display属性针对行内/块级元素相互转换
(绝大多数都是把行内元素转成块级元素,几乎不会把块级元素转成行内)

使用display:block把行内元素转成块级元素~
在这里插入图片描述
display还可以让元素隐藏~
display:none 让元素隐藏~
在这里插入图片描述

2.CSS中的盒模型

页面上的html元素都是一个一个的矩形~
每个矩形就可以视为"盒子",盒子里就可以装东西(文字,链接,图片,表格…,其他任意元素)
每个盒子除了内容之外,还会有有一些其他的部分~
在这里插入图片描述
两个盒子之间的距离就是外边距,盒子自身的厚度就是边框,盒子里的内容不会紧挨着边框,内容与边框之间有一个内边距~

html中的每个元素都是按照上述这样的规则进行展开

在css中,就可以通过一些属性,来设置这里和盒子模型相关的属性

①边框 border

通过border可以给元素设置边框~
在这里插入图片描述
设置边框:
在这里插入图片描述
如果直接这样设置,原来的内容部分会保证尺寸不变,加上边框,就使会盒子被边框给撑大了~

在这里插入图片描述这个属性的含义就是让边框不要撑大盒子
此时内容区域就缩水了~
边框还可以分边框来分别设置,用border-top /bottom /left /right

②内边距(padding)

padding 设置内边距,边框和内容之间的距离~
在这里插入图片描述

直接这么写,是四个方向都设置了,就是复合写法,还可以给每个方向单独设置~
padding-top 上方设置
padding-bottom 下方
padding-left 左侧
padding-right 右侧~

padding:10px 20px上下10px,左右20px
padding:10px 20px 30px上10px,左右20px,下30px
padding:10px 20px 30px 40px上10px,右20px,下30px,左40px(顺时针)

③外边距 (margin)

使用方法和padding非常相似
只不过控制的是元素之间的距离~

3. 弹性布局

前面介绍的CSS属性,都是针对元素自己的~
弹性布局,则是用来描述元素之间的关系的(相对位置关系)
使用弹性布局来完成网页布局!!

HTML/CSS发展这么多年,有很多种布局方式
最早的是基于表格来布局~ (和前面写的那个案例差不多,功能有限)
后来又有了基于 浮动 来布局(副作用大) 后来又有了弹性布局~功能强,使用简单 ~ 当下最主流的布局方式
后来又有了网格布局,相比于弹性布局来说,弹性布局是一维(一行一行来布局的),网格布局针对二维~ (还比较新,旧电脑旧浏览器可能会不适配)

在这里插入图片描述
弹性布局:
在这里插入图片描述

❗ 注意 : 对于行内元素,宽度/高度,外边距 都是不生效的~
要想生效,需要把宽度/高度转成块级元素
在这里插入图片描述

当把span设成块级元素之后,虽然宽度生效了,但是这三个元素就独占一行了~

如果想让它不独占一行,这就是弹性布局,要解决的问题!!!

display : flex; flexable 弹性的
把当前元素,设置成"弹性布局"的容器,里面的子元素就会按照弹性布局的规则来排列了~ (只是针对子元素生效,不影响孙子元素)
加到上层容器上(此处是div上)
在这里插入图片描述

此时,div就是弹性布局的容器,里面的子元素(三个span)就按照弹性布局的规则来进行排列了~

❔如何排列的?

首先这几个元素是水平方向排列开了
然后高度也和父元素一样高了(也可以手动的指定高度)
水平方向默认是靠左对齐的~

弹性布局,就解决了在一行里如何排列元素的问题~
由于块级元素本身就是垂直方向排列的,因此实际进行网页布局的时候,就是一行一行的往下布局
每一行里,如果想有多个元素并列,就使用弹性布局进行处理~

在弹性布局的父容器这里,可以使用 justify-content属性来设置水平方向的排列方式

justify-content有一个很实用的用法: 使用space-around使子元素等距离排列这里是引用

垂直方向,使用align-items进行排列

这里是引用

HTML&CSS 就已经可以写出一些简单的"静态网页" (网页的内容是固定的,死的),后面要想要网页动起来,有更多的交互操作,就需要使用js了

总结

在这里插入图片描述

你可以叫我哒哒呀
本篇到此结束
“莫愁千里路，自有到来风。”
我们顶峰相见！
会越来越强的哒哒
关注
  • 13
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 22
    评论
基于javaweb的图书管理系统毕业设计源码+数据库，前端由HTML/CSS/JavaScript编写，后端由javaEE编写
04-27
一个基于javaweb的图书管理系统，前端由HTML/CSS/JavaScript编写，后端由javaEE编写 软件架构 软件架构说明 1.前端页面基于HTML、CSS、JavaScript构建，使用了boostrap4、Vue2.x、jquery库/框架 2.后端基于...
JAVA之设置背景图片的几种方法
热门推荐
若泣、
05-17 5万+
 第一种方法，通过JLabel来装载图片。 创建一个ImageIcon对象，来获取背景图片。 ImageIcon img = new ImageIcon("image/img1.png"); 创建一个JLabel对象，将图片img载入到JLabel对象中。 JLabel jl_bg = new JLabel(img); //背景 然后，设置jl_bg的位置和大小。 this.jl
详细讲解总结JAVAEE开发流程（前端+后端）酒店管理系统-课程设计
欢迎来到我的博客空间！
06-23 3925
酒店管理系统一、概述二、知识铺垫1.什么是MVC2.什么是SSM3.SSM对4层的任务分配4.JavaScript简介5.什么是servlet6.DispatchServlet三、项目跑通1.配置web.xml2.输入网址，进入登录主页 一、概述 由于小组人数增加，原购物商城项目换成“酒店管理系统”项目。 学习不总结，等于白学，固在期末复习+考研复习之中，抽出时间，记录在此。 注：此篇文章主要介绍用户登录功能 二、知识铺垫 1.什么是MVC MVC 模式代表 Model-View-Controller（模型
全网最细JAVA窗口背景图片设置
qq_52196411的博客
07-26 1万+
全网最细java窗口界面背景设置
【Java EE】-博客系统(前端页面)
m0_63979882的博客
04-26 2076
博客系统 登陆页面，列表页面，详情页面，编辑页面。使用css修饰登录页面，列表页面，详情页面，使用弹性布局进行水平排列。在编辑页面中引入markdown编辑器。引入editor.md需要注意的事项，以及方法。
Java 添加背景图片
com_xpp的专栏
11-05 2390
import java.awt.*; import javax.swing.*; public class TestBackgroundColor extends JFrame { public static void main(String[] args) { // TODO Auto-generated method stub TestBackgroundColor tbc = ne...
基于javaweb的图书管理系统源码+数据库，前端由HTML/CSS/JavaScript编写，后端由javaEE编写
01-17
一个基于javaweb的图书管理系统，前端由HTML/CSS/JavaScript编写，后端由javaEE编写 软件架构说明 1.前端页面基于HTML、CSS、JavaScript构建，使用了boostrap4、Vue2.x、jquery库/框架 2.后端基于HttpServlet构建 ...
停车场管理系统系统采用JAVAEE，利用SQLSERVER2005，B/S架构
最新发布
05-02
前端页面采用JSP技术实现，通过HTML、CSS和JavaScript提供用户界面。同时，使用了AJAX技术实现页面的局部刷新，提升了用户体验。 后端实现 后端处理主要通过Servlet接收用户请求，并与数据库进行交互。系统采用了...
Web前端开发（XHMTL+CSS+JS）
06-24
Web前端开发（XHMTL+CSS+JS） 杭电JavaEE 课件
前端与网络开发手册.zip
04-14
包括：W3School离线手册.chm、jquery.api.3.2.1.CHM、JavaEE-API-7.CHM、css3.0参考手册.chm、servlet-3_0-final-javadoc，适用于 HTML、CSS、JavaScript、JavaEE 等环境开发。
javaee登录界面
08-26
javaee：servlet+JSP+MySQL实现登录界面以及用户增删改
css设置背景图片样式
Lccccb的博客
04-08 9308
background-image: url('../../../assets/image/img/400.png'); background-repeat: no-repeat; /*不平埔*/ background-position:50% 50% ; /*居中*/ background-size:50% 50%; /*背景图片大小*/ ...
javaEE初阶---博客系统(前端)
baijaiyu的博客
10-06 934
基本结构 :页面结构 : 样式 : 最终的导航栏效果 :页面结构 :样式 : 最终的左侧界面效果 : 右侧界面最终效果 : 整个博客列表页最终效果 : 三 : 博客详情页 博客详情页最终效果 : 五 : 博客编辑页 自己实现markdown是有一定难度的 . 所以这里最关键的步骤 ,是使用markdown组件 , 下面我将介绍如何导入这个组件 .第一步 : 网页搜索editor.md , 进入官网下载 . 第二步 : 将下载好的文件夹放在总的博客系统目录下 . 第三步 : 在页面中
java ee 的web项目当中，css样式表的背景图片显示。
Marlon1993的博客
05-02 510
css样式表中引用背景图片，最好的方式： .slide-one {background-image: url(../images/slide-1.jpg)} .slide-two {background-image: url(../images/slide-2.jpg)} .slide-three {background-image: url(../i...
如何在javaee的html中插入背景图片_如何给毕业论文中插入正确格式的参考文献？（一）...
weixin_39938724的博客
11-23 629
「毕业之家」如何给毕业论文中插入正确格式的参考文献？(一) 大家好，我是您的毕业大管家小毕同学。 毕业论文的排版一直是童鞋们很头疼的事情，做起来，琐碎麻烦，如果不能很好地掌握技巧，又是一件很费功夫的事情。今天小毕就来给大家分享一下如何在正文中正确地插入参考文献。希望对大家有所帮助。Step 1：将光标放在要插入参考文献的地方，点击菜单栏[引用]，点击下面的角标(如图所示)，目的是打开脚注和尾注的对...
如何在javaee的html中插入背景图片_微信图文中如何插入往期回顾样式？
weixin_39898380的博客
11-26 572
很多公众号 在文章底部都会添加历史文章引导样式，以此来引导用户阅读公众号的其他历史文章，达到引流的目的，同时还可以提升文章的阅读量，一举两得。正因如此，历史文章引导样式一直都备受小编们的喜爱，并且操作起来也十分简便，今天我们就来教大家在编辑器里如何添加并使用往期回顾样式。一、选择添加往期回顾样式在“通用样式”中的“引导”分类下，选择“往期回顾”。点击任意喜欢的样式添加到编辑区。二、修改往期回顾样式...
java添加背景图片_Java怎么添加背景图片
weixin_42491590的博客
02-20 4833
首先，导入相关的包：import java.awt.BorderLayout;import java.awt.Container;import javax.swing.ImageIcon;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JPanel;也可以用：import java.awt.*；impor...
javaee怎么用前端配合后端
07-08
JavaEE 是一个用于开发企业级应用程序的Java平台，它提供了一套完整的解决方案，包括前端和后端的开发。下面是使用JavaEE开发时前端与后端配合的一般流程： 1. 前端开发：使用HTML、CSS和JavaScript等前端技术进行用户界面的设计和开发。可以使用常见的前端框架如React、Angular或Vue.js来简化前端开发流程。 2. 后端开发：使用JavaEE技术进行后端业务逻辑的开发。JavaEE提供了一系列的API和框架，例如Servlet、JSP、JPA、EJB等，用于处理HTTP请求、数据库访问、事务管理等。可以使用常见的JavaEE容器如Tomcat、JBoss或WebLogic等来运行和管理后端应用程序。 3. 前后端通信：前端与后端通过HTTP协议进行通信。前端通过发送HTTP请求（如GET、POST等）向后端发送数据，并接收后端返回的数据。可以使用Ajax技术在不刷新页面的情况下进行异步通信。 4. 数据交互：前端与后端之间通过JSON、XML等格式进行数据的传递和交互。前端将数据以特定格式发送给后端，后端进行数据处理，并将结果以相同或不同格式返回给前端。 5. 安全性处理：在JavaEE中，可以使用安全框架如Spring Security来处理用户认证和授权。通过配置安全规则和权限控制，确保只有具备相应权限的用户可以访问后端资源。 总结来说，JavaEE提供了一套完整的解决方案，使前端与后端能够协同工作。前端负责用户界面的设计和交互逻辑，后端负责业务逻辑的处理和数据交互。通过HTTP通信和数据格式的约定，实现了前后端的无缝配合。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值