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. 学习Java集合

    1.列表  List接口(继承于Collection接口)及其实现类 List接口及其实现类是容量可变的列表,可按索引访问集合中的元素. 特点:集合中的元素有序.可重复: 列表在数据结构中分别表现为: ...

  2. xshell + xftp 安装及1603错误解决

    xshell + xftpan下载安装 百度网盘下载链接:https://pan.baidu.com/s/14orvEWDjFkrLvr_9JaG4Gw 提取码:om9z 下载地址 https://w ...

  3. python程序的三种执行结构

    一.分支结构:根据条件判断的真假去执行不同分支对应的子代码 1.1 if判定 完整语法如下: if 条件1: #条件可以是任意表达式,如果条件1为True,则依次执行代码. 代码1 代码2 ... e ...

  4. WPF 可视化树的用途

    1.可视化树的主要用途: 1.可以使用样式改变可视化树中的一个元素.可以使用Style.TargetType属性选择希望修改 的特定元素.甚至当控件属性发生变化时,可以使用触发器自动完成更改. 2.可 ...

  5. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  6. web note

    web note html note 列表 ul 无序列表 ol 有序列表 并且可以通过 type 来定义列表序号的形式 <!DOCTYPE html> <html> < ...

  7. Java——spring中session的获取

    获得session public static HttpServletRequest getSession(){ return ((ServletRequestAttributes) RequestC ...

  8. 三面面试官：运行 npm run xxx 的时候发生了什么？

    事情是这样的,直接开讲 面试官:npm run xxx的时候,发生了什么?讲的越详细越好. 我(心想,简单啊): 首先,DNS 解析,将域名解析成 IP 地址,然后 TCP 连接,TCP 三次握手.. ...

  9. (转载)linux下Yum的$releasever和$basearch的取值

    https://blog.csdn.net/whatday/article/details/51097456

  10. ruoyi首次使用常见问题的解决方案

    1.导入项目之后,下载依赖包之后,模块的依赖项飘红(我这里无法复现,当参考图吧) 解决方法: 2.ruoyi框架代码生成之后,需要自己进行替换到指定位置.相应的官方文档位置,否则,可能会出现404,访 ...