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. MySQL [ERROR] [MY-013183]

    [ERROR] [MY-013183] [InnoDB] Assertion failure,回顾记录一次因数据库(MySql 8.0)操作不当导致的生产事故顺便记录下正常重启发生的意外和解决方法(关 ...

  2. AutoResetEvent 与 ManualResetEvent

    实际上这两个东西是同一种东西,可以把他们理解为线程锁,两个不同的线程可以共享. 这两个类的构造函数参数都是传入一个 bool 值,这个 bool 值可以理解为一开始的时候,这个需要访问的资源是处于可用 ...

  3. U3D破解方法

    文件我的云盘里面有,然后操作如下:Win版破解方法:1.安装Unity后(联网破解不成功就断网试试),运行破解补丁.2.点击Browse选择Unity所在路径 例如我的Unity安装路径 F:\Sof ...

  4. think php 7天免登录

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 微信小程序实现简单的2048

    这两天心血来潮,用微信小程序写了一个简单的2048,欢迎各位老铁围观,提出宝贵意见.这里我从0到1赘述一下个人实现流程: 首先去微信公平台(https://mp.weixin.qq.com/)注册一个 ...

  6. npm vue项目的创建

    一.创建项目之前需要先下载一个node.js 官方网址:https://nodejs.org/en/  二.创建 (1)建一个文件夹,进入这个文件夹输入cmd打开小黑窗: Vue.js文档:https ...

  7. HIve的基本使用

    WHERE从表中筛选行: SELECT从表中查询指定的列: group by在列上做聚合. -- 假设数据文件的内容,字段之间以ASCII 001(ctrl-A)分隔,行之间以换行分隔. CREATE ...

  8. Java基础——抽象类

    一.概述: 在Java中,一个没有方法体的方法应定义为抽象方法在public 修饰符后加 abstract修饰符,而类中如果有抽象方法,该类必须定义为抽象类在public 修饰符后加 abstract ...

  9. Docker——概述

    出现原因:开发接替运维的工作,将jar包连同(mysql,jdk)等环境上线 实现:java -> jar(环境) -> 打包项目带上环境(镜像) -> (Docker仓库:商店) ...

  10. RabbitMQ在开发环境搭建-转载

    1.安装erlang. rabbitmq 安装需要erlang 的支持,所有安装rabbitmq 之前需要现安装erlang.下载 erlang: https://www.erlang.org/dow ...