1、行内样式。

可以直接把css代码写在现有的HTML标签元素的开始标签里面，并且css样式代码要写在style=" "双引号中才可以，

如：

<p style="color:red">这里文字是红色。</p>

2、内部样式。

如果想让HTML标签和css样式区分开来，可以采取将css样式代码写在<style type="text/css"> </style>标签之间。

这里的<style></style>可以写在<head></head>标签之间或者<body></body>标签之间。

<head>

<style type="text/css">　　

    body {background-color: red}　　

    p {margin-left: 20px}

</style>　　

</head>

3、外部样式

将css单独放置于一个文件中，在jsp中通过link引入。

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"

         pageEncoding="utf-8"%>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Login</title>

  <link rel="stylesheet" type="text/css" href="style.css"/>   <!--引入css样式-->

</head>

<body>

<%

  Object message = request.getAttribute("message");

  if(message!=null && !"".equals(message)){

%>

<script type="text/javascript">

  alert("<%=request.getAttribute("message")%>");

</script>

<%  }  %>

<div id="login">

  <h1>Login</h1>

  <form action="Servlet?method=login" method="post" onsubmit="return check()">

    <input type="text" required="required"  placeholder="请输入账号" name="id"></input>

    <input type="password" required="required"  placeholder="请输入密码" name="password"></input>

    <button class="but" type="submit">登录</button>

  </form>

</div>

</body>

</html>

style.css

html{

    width: 100%;

    height: 100%;

    overflow: hidden;

}

body{

    width: 100%;

    height: 100%;

    font-family: 'Open Sans',sans-serif;

    margin: 0;

    background-color: #4A374A;

}

#login{

    position: absolute;

    top: 50%;

    left:50%;

    margin: -150px 0 0 -150px;

    width: 300px;

    height: 300px;

}

#login h1{

    color: #fff;

    text-shadow:0 0 10px;

    letter-spacing: 1px;

    text-align: center;

}

h1{

    font-size: 2em;

    margin: 0.67em 0;

}

input{

    width: 278px;

    height: 18px;

    margin-bottom: 10px;

    outline: none;

    padding: 10px;

    font-size: 13px;

    color: #fff;

    text-shadow:1px 1px 1px;

    border-top: 1px solid #312E3D;

    border-left: 1px solid #312E3D;

    border-right: 1px solid #312E3D;

    border-bottom: 1px solid #56536A;

    border-radius: 4px;

    background-color: #2D2D3F;

}

.but{

    width: 300px;

    min-height: 20px;

    display: block;

    background-color: #4a77d4;

    border: 1px solid #3762bc;

    color: #fff;

    padding: 9px 14px;

    font-size: 15px;

    line-height: normal;

    border-radius: 5px;

    margin: 0;

}

css文件位置与对应jsp文件位置一样即可

idea新建css文件方法：https://jingyan.baidu.com/article/636f38bb4ad6fed6b9461061.html

CSS样式写在JSP代码中的几种方法的更多相关文章

  1. 编写Java程序_输入三个整数x,y,z，请把这三个数由小到大输出，请写出实现代码。（3种方法）

    要求说明: 输入三个整数x,y,z,请把这三个数由小到大输出. 实现代码: 第1种方法: import java.util.Scanner; public class xyzMaxMin{ publi ...

  2. jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  3. 对“使用MyEclipse，写的jsp代码因有汉字而无法保存”问题的解决

    使用MyEclipse编辑jsp时.有时会出现"使用MyEclipse,写的jsp代码因有汉字而无法保存"的现象,怎样解决呢? Window-->Preferences--& ...

  4. 【转】使用JavaParser获得Java代码中的类名、方法形参列表中的参数名以及统计总的文件个数与不能解析的文件个数

    遍历目录查找Java文件: public static void ergodicDir(File dir, HashSet<String> argNameSet, HashSet<S ...

  5. Tomcat部署发布JSP应用程序的三种方法 (转)

    Tomcat部署发布JSP应用程序的三种方法     1.直接放到Webapps目录下      Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应 ...

  6. Power BI官方视频(2) Power BI嵌入到应用中的3种方法

    今天给大家介绍3种将Power BI嵌入到应用中的方法. 本文原文地址:Power BI官方视频(2) Power BI嵌入到应用中的3种方法 Power BI系列文章地址:微软Power BI技术文 ...

  7. div盒子水平居垂直中的几种方法

      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...

  8. JavaScript确定一个字符串是否包含在另一个字符串中的四种方法

    一.indexOf() 1.定义 indexOf()方法返回String对象第一次出现指定字符串的索引,若未找到指定值,返回-1.(数组同一个概念) 2.语法 str.indexOf(searchVa ...

  9. 正确分析结构使用正确的HTML标签。CSS样式写一起。

    在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...

随机推荐

  1. 流程控制、if、elif、else，whilie、break、continue的使用

    今日内容 流程控制理论 if判断 while循环 流程控制概念 流程控制就是控制事物的执行流程 执行流程的分类 顺序结构 从上往下依次执行,代码运行流程图如下 分支结构 根据某些条件判断做出不同的运行 ...

  2. 矩池云 | 神经网络图像分割：气胸X光片识别案例

    在上一次肺炎X光片的预测中,我们通过神经网络来识别患者胸部的X光片,用于检测患者是否患有肺炎.这是一个典型的神经网络图像分类在医学领域中的运用. 另外,神经网络的图像分割在医学领域中也有着很重要的用作 ...

  3. cmd git的使用

    1:新建仓库 2: 克隆:

  4. laravel报错 : laravel Please provide a valid cache path

    这是因为laravel的缓存路径没有找到 laravel缓存文件路径是在 config/cache.php中设置,默认存在storage文件夹中 'file' => [ 'driver' =&g ...

  5. 使用 Fiddler 进行 iOS 抓包

    使用 Fiddler(下载) 进行 iOS 抓包,具体步骤如下: 安装并配置 Fidder 安装并打开 Fiddler, 点击 Tools -> Fiddler Options 选中 Decrp ...

  6. oneAPI DPC++学习资料和实验平台

    DPC++ 一种新的异构平台,弥补了OPENCL 编写复杂的难题.基于SYCL 抽象层.基于SYCL 有多种实现,其中DPC++是相对成熟的方案. 书籍 由Intel工程师撰写的免费电子图书 Data ...

  7. ArcMap操作随记（6）

    1.上流汇流区 [填洼]→[流向]→[分水岭] 2.输入坐标进行移动,也就是精确移动 [移动]工具(在自定义中,其中的[旋转]工具也有类似效果) 3.找最近的要素(矢量) [近邻分析]→[汇总] 4. ...

  8. 《手把手教你》系列基础篇（八十）-java+ selenium自动化测试-框架设计基础-TestNG依赖测试-番外篇（详解教程）

    1.简介 经过前边几篇知识点的介绍,今天宏哥就在实际测试中应用一下前边所学的依赖测试.这一篇主要介绍在TestNG中一个类中有多个测试方法的时候,多个测试方法的执行顺序或者依赖关系的问题.如果不用de ...

  9. 你也可以很硬核「GitHub 热点速览 v.22.13」

    本周特推介绍了一个非常易上手,操作难度(主要难度在于机件购买)极低的硬件项目,SmartKnob 让你有个可玩性极高的控制仪.本周特推另外一个项目则是一个安全项目,打破你对 URL 是可靠.安全的认知 ...

  10. JDK,JRE,JVM的作用及关系

    1.作用 JVM:Java虚拟机,保证Java语言跨平台 JRE:Java程序的运行环境 JDK:Java程序的开发环境 2.关系 JRE:JVM+类库 JDK:JRE+工具